如何在Node.js中使用TypeScript

DebugUsery
18,149 阅读8分钟

如何在Node.js中使用TypeScript

TypeScript是一个JavaScript超集，在开发者中获得了巨大的人气。它集成了每一个JavaScript特性，并具有静态类型和类型检查等补充特性。

许多因素使Node.js成为流行的JavaScript框架。Node.js有一个强大的NPM（Node Package Manager）生态系统，提供开源代码（包），你可以在你的任何Node.js项目中使用。

Node.js非常适合制作服务器端应用程序，但它缺乏一些现代组件，如类型检查。Node.js的代码库也可能非常难以维护。

Typescript支持这些现代编码风格，如静态类型和类型检查。它是为构建广泛和高水平的应用程序而制作的。这就是为什么将Typescript作为支持Node.js功能的主要语言会很好。

这使得你可以用强大的类型检查来编写基于服务器端的应用程序，这使得你可以避免运行时的类型错误和其他Typescript的优势，并充分利用Node.js的优势。

为了从这些重要的Node.js功能中获益，你需要用Node.js运行时设置和配置你的Typescript。本指南将教你如何用Node.js设置和运行你的Typescript应用程序，并在你的Typescript应用程序中运行一些Node.js包。

前提条件

要跟随本教程前进--读者需要具备以下条件。

  • 在你的电脑上安装[Node.js]。
  • [对Node.js的]。
  • [对Typescript的]基本[了解]。

设置Node.js

一旦Node.js安装在计算机中，运行node –v ，以确认安装是否成功。

就像你对运行在Node.js运行时的任何应用程序所做的那样，创建一个项目文件夹。打开一个命令行，改变目录以指向这个新的项目文件夹。

为了生成Node.js package.json文件，运行npm init 。这将引入关于你的项目的系统问题。这提示了你设置常规Node.js项目的方式。或者，运行npm init -y ，用默认值覆盖packages.json 文件。

packages.json file

设置Typescript

要在Node.js中设置Typescript，你需要Typescript依赖项。要安装Typescript编译器包，请运行以下命令。

npm install -g typescript

上面的命令将全局安装Typescript编译器。这意味着你在电脑上创建的任何项目都可以访问Typescript依赖项，在构建另一个项目时无需重新安装Typescript包。

运行tsc --version 来确认是否安装了编译器。

TSC version checking

注意：Typescript代码不会直接在浏览器上构建（没有浏览器会直接读取Typescript）。浏览器只会读取JavaScript代码。要调用任何Typescript代码，你需要一个编译器来将Typescript转译为浏览器可执行的JavaScript。Typescript只会在开发过程中帮助你，让你从它的功能中受益。

创建一个Typescript配置文件

为了用Node.js初始化Typescript项目，在项目根目录下创建一个tsconfig.json文件。

该配置文件存储了Typescript编译器的选项。另外，你也可以运行tsc --init ，在你所在的任何目录下自动创建这个文件。

Generating tsconfig.json file

这个文件是Typescript的配置文件。它指定了Typescript的编译选项。

tsconfig.json file

tsconfig.json 文件有许多选项。知道什么时候打开和关闭这些选项是很好的。TSC 读取这个文件并使用这些选项将 Typescript 转译为浏览器可读的 JavaScript。

让我们编辑这个配置文件，加入运行Typescript的必要选项。

  • "target": "es6" - 你需要定义的一个关键事项是编译器将输出的JavaScript的版本。如果你需要更高级的JavaScript功能，如使用箭头函数、 、 ，你可以选择使用ES6或更高版本。目标选项允许你使用并遵循新的JavaScript模式。今天的大多数浏览器只理解es6版本的JavaScript。我们需要告诉Typescript编译器将我们的Typescript代码转译成es6 JavaScript。const let

  • "module": "commonjs" - 这是用于结构化和组织JavaScript代码的JavaScript模块格式系统。这使得编译器可以使用模块函数，如 和对象，如 。require() module.exports

  • "rootDir": "./src" - 一个存放输入的Typescript文件的目录。我把这个文件夹命名为 。src

  • "outDir": "./dist" - 这是一个输出目录，编译后的JavaScript的输出结构将被保存在这里。在这种情况下，JavaScript代码将被保存在主项目根目录下一个名为 的文件夹中。dist

  • "moduleResolution": "node" - 一个模块导入解析算法，模仿Node.js实时搜索模块的方式。

  • "strict": true - 启用所有的JavaScript严格类型检查选项。

  • "esModuleInterop": true - esModuleInterop允许我们将ES6模块编译为commonjs模块。

  • "exclude":[] - 告诉Typescript不要编译指定的文件或文件夹。在这种情况下，你可以告诉Typescript不要编译 文件夹，因为它已经安装了Node.js库的JavaScript版本的依赖项。node_modules

比如说。

"exclude":[
    "./node_modules"
]

这里是一个tsconfig.json 文件选项的例子。

{
  "compilerOptions": {                        
    "target": "es6",                               
    "module": "commonjs",                           
    "outDir": "./dist",                             
    "rootDir": "./src",                             
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,                       
  },
  "exclude":[
    "./node_modules"
  ]
}

请根据需要自由添加或修改这个文件，以便根据你的应用和环境需求配置Typescript编译器。

在Node.js中使用Typescript

继续在你的项目目录下创建文件夹src 。src ，如前所述，存放Typescript文件。在src 里面，创建一个index.ts 文件，开始写一些Typescript代码。在写Typescript的时候，建议在项目的本地依赖中安装一个Typescript编译器。

运行npm install -D typescript 来做到这一点。

function sum (num1:number, num2:number){
    return num1 + num2;
}
console.log(sum(8,4))

让我们看看如何使用Node.js执行上述Typescript。运行tsc ，将Typescript编译成JavaScript。这将构建、编译并输出JavaScript代码到你在config.json 文件的"outDir": "./dist" 中指定的路径。

Compiled JavaScript

现在运行下面的命令来执行该代码。

node dist/index.js

Results

在开发环境中，每一次运行上述命令来编译和运行都是很烦人的。为了使这个过程更容易，你需要安装一个叫做ts-node 的包。

npm install -D ts-node

Ts-node允许我们指向一个Typescript文件。它将运行.ts ，为我们编译并在Node.js中运行它。

当使用Ts-node时，确保你的本地项目中安装了Typescript。要安装它，请运行npm install -D typescript 。

继续配置你的package.json 脚本标签并启动构建命令，如下图所示。

"scripts": {
   "start": "ts-node ./src/index.ts"
}

现在你可以运行npm start 来执行index.ts 。而当你删除带有编译后的index.js 的dist文件夹，然后仍然运行npm start ，你会得到同样的结果。

Ts-node compiler

使用包的Typescript

使用Typescript和Node.js的高潮是能够利用开源的NPM包和框架。让我来演示一下我们如何使用Typescript来开始与NPM包进行交互。

这个例子将设置Typescript与Express.js。你应该从NPM注册表中安装Express.js。

要做到这一点，请运行npm install express 。

注意：在使用Node.js编写Typescript时，一定要确保安装了Node.js类型检查包。

npm install -D @types/node

Node.js包是用JavaScript而不是Typescript编写的。为了获得其包的类型定义，你需要安装名为@types 的第三方包。

例如，要使用Express类型定义，通过运行安装@types/express 。

npm install -D @types/express

这将使你能够获得Express的类型定义。

不是所有的包都有@types 。带有类型的软件包有以下NPM@types 标签。

Npm types declarations

让我们使用Typescript设置一个简单的Express服务器。

  • 导入该包。当使用Node.js时，你通常会使用require() 函数导入一个包。而使用Typescript，这就有点不同了。使用关键字import 来访问一个包模块，如下图所示。
import express, {Request,Response,Application} from 'express';
  • 在Typescript中初始化Express。
const app:Application = express();
  • 设置服务器端口。
const PORT = process.env.PORT || 8000;
  • 设置一个端点/路径。
app.get("/", (req:Request, res:Response):void => {
  res.send("Hello Typescript with Node.js!")
});
  • 监听服务器端口。
app.listen(PORT, ():void => {
  console.log(`Server Running here 👉 https://localhost:${PORT}`);
});
  • 运行npm start 来设置服务器并运行。当你在浏览器中打开https://localhost:8000/ ，一个响应将被送回给你，正如在res.send() 中定义的。

当开发一个广泛的应用程序时，建议用观察参数钩住你的项目，这将有助于你在对代码结构进行修改和保存时重新启动你的服务器。

有两个主要的选项。

  1. Ts-node-dev -Ts-node-dev监视.ts 文件，每当你做了一个改变，它将为你重启服务器。

运行下面的命令来安装它。

npm install -D ts-node-dev

要使用它，请修改package.json 脚本标签，如下所示。

  "scripts": {
    "dev": "ts-node-dev --respawn ./src/index.ts"
  }

然后运行npm run dev ，每当你对代码进行修改时，你的服务器就会受到监视。

Ts-node-dev

  1. Nodemon -Nodemon的工作原理与Ts-node-dev相同。它是一个Node.js包，用于在创建服务器时监视.js 文件。每当你做出改变并保存服务器文件时，Nodemon会自动为你重新启动服务器。

运行下面的命令来安装它。

  npm install -D nodemon

要在你的项目中使用它，请按以下方式编辑package.json 脚本标签。

 "scripts": {
   "dev": "nodemon ./src/index.ts"
 }

然后运行npm run dev 。

Nodemon

总结

Typescript将在开发过程中帮助你，使你不至于在bug和小错误中挣扎。它可以在编译过程中和代码运行前捕捉到错误。

这让你有机会提前发现并修复运行时的错误。这将提高你的开发速度，特别是在构建一个广泛的应用程序时。

avatar
文章
阅读
粉丝