如何使用 Typescript 设置 Node 项目

介绍

Node是一个 运行时间环境,使书写服务器侧 JavaScript成为可能。自2011年发布以来,它已经得到广泛的采用。

来自其他语言的JavaScript开发人员经常抱怨其缺乏强大的静态打字,但这就是TypeScript进入图像的地方,以弥合这种差距。

TypeScript是一个编写(可选)的JavaScript超组,可以帮助构建和管理大规模的JavaScript项目,它可以被认为是JavaScript,具有强大的静态编写,编译和面向对象的编程等额外功能。

<$>[注] **注:**TypeScript在技术上是一个JavaScript的超组,这意味着所有JavaScript代码都是有效的TypeScript代码。

以下是使用TypeScript的一些好处:

  1. 可选的静态打字
  2. 类型推断
  3. 使用接口的能力

在本教程中,您将使用 TypeScript 设置一个 Node 项目,您将使用 TypeScript 构建一个 Express 应用程序,并将其转载到 JavaScript 代码中。

前提条件

在启动本指南之前,您需要在您的系统上安装 Node.js. 您可以按照 如何安装 Node.js 和创建本地开发环境指南执行此操作系统。

步骤1 - 启动项目

要开始,创建一个名为node_project的新文件夹,然后进入该目录:

1mkdir node_project
2cd node_project

接下来,将其初始化为 npm 项目:

1npm init -y

-y 标志告诉 npm init 自动对默认值说是 您可以随时在package.json 文件中更新此信息。

步骤 2 – 配置 TypeScript 编译器

现在您的 npm 项目已初始化,您已经准备好安装和设置 TypeScript。

从项目目录中运行以下命令来安装 TypeScript:

1npm install --save-dev typescript

1[secondary_label Output]
2added 1 package, and audited 2 packages in 1s
3
4found 0 vulnerabilities

TypeScript 使用一个名为 tsconfig.json 的文件来配置项目的编译器选项. 在项目目录根部创建一个 tsconfig.json 文件:

1nano tsconfig.json

然后插入以下JSON:

 1[label tsconfig.json]
 2{
 3  "compilerOptions": {
 4    "module": "commonjs",
 5    "esModuleInterop": true,
 6    "target": "es6",
 7    "moduleResolution": "node",
 8    "sourceMap": true,
 9    "outDir": "dist"
10  },
11  "lib": ["es2015"]
12}

让我们来看看上面的 JSON 片段中的一些密钥:

  • module: 指定模块代码生成方法. Node 使用 commonjs.
  • target: 指定输出语言水平.
  • moduleResolution: 这有助于编译器弄清楚一个导入指的是什么。

要了解有关可用的关键值选项的更多信息,官方的 TypeScript 文档提供了每个选项的解释。

步骤 3 – 创建最小型TypeScript Express服务器

现在是时候安装 Express框架并创建一个最小的服务器了:

1npm install --save [email protected]
2npm install -save-dev @types/[email protected]

第二个命令安装了支持TypeScript的Express types。Types在TypeScript中是文件,通常具有.d.ts的扩展.这些文件用于提供有关API的类型信息,在这种情况下是Express框架。

这个包是必需的,因为TypeScript和Express是独立的包,如果没有@types/express包,TypeScript就无法知道Express类的类型。

接下来,在项目目录的根中创建一个src文件夹:

1mkdir src

然后在里面创建一个名为app.ts的TypeScript文件:

1nano src/app.ts

使用您选择的文本编辑器打开app.ts文件,并粘贴下面的代码片段:

 1[label src/app.ts]
 2import express from 'express';
 3const app = express();
 4const port = 3000;
 5
 6app.get('/', (req, res) => {
 7  res.send('Hello World!');
 8});
 9
10app.listen(port, () => {
11  return console.log(`Express is listening at http://localhost:${port}`);
12});

上面的代码创建了Node Server,它在端口3000上听取请求. 要运行应用程序,您首先需要使用以下命令将其编译成JavaScript:

1npx tsc

这使用了我们在上一步创建的配置文件来确定如何编译代码以及在哪里将结果放置,在我们的情况下,JavaScript是输出到dist目录。

使用node运行 JavaScript 输出:

1node dist/app.js

如果成功运行,将登录到终端的消息:

1[secondary_label Output]
2Express is listening at http://localhost:3000

现在,你可以在你的浏览器中访问 http://localhost:3000,你应该看到这个消息:

1[secondary_label Output]
2Hello World!

打开 dist/app.js 文件,您将找到 TypeScript 代码的转录版本:

 1[label dist/app.js]
 2"use strict";
 3var __importDefault = (this && this.__importDefault) || function (mod) {
 4    return (mod && mod.__esModule) ? mod : { "default": mod };
 5};
 6Object.defineProperty(exports, "__esModule", { value: true });
 7const express_1 = __importDefault(require("express"));
 8const app = (0, express_1.default)();
 9const port = 3000;
10app.get('/', (req, res) => {
11    res.send('Hello World!');
12});
13app.listen(port, () => {
14    return console.log(`Express is listening at http://localhost:${port}`);
15});
16//# sourceMappingURL=app.js.map

此时,您已成功设置您的 Node 项目以使用 TypeScript. 接下来,您将设置 eslint linter 来检查您的 TypeScript 代码是否存在错误。

步骤 4 — 配置使用 eslint 的 Typescript Linting

现在,您可以为该项目配置 TypeScript 链接,首先,我们使用npm来安装eslint:

1npm install --save-dev eslint

然后,运行eslint的初始化命令以互动地设置项目:

1npx eslint --init

这将问你一系列的问题.对于这个项目,我们将回答如下:

  • 您想如何使用 ESLint?: 要检查语法并找到问题( _)* 您的项目使用的是什么类型的模块?: JavaScript模块(导入/导出) _)* 您的项目使用的是什么框架?: 没有这些( _)* 您的项目使用的是TypeScript?: _Yes() _)* 您的代码在哪里运行?: _Node() _)* 您希望配置文件在哪个格式?: _JavaScript() _)

最后,您将被要求安装一些 additioanl eslint 库. 选择是。 该过程将完成,您将留下以下配置文件:

 1[label eslintrc.js]
 2module.exports = {
 3  env: {
 4    es2021: true,
 5    node: true,
 6  },
 7  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
 8  parser: '@typescript-eslint/parser',
 9  parserOptions: {
10    ecmaVersion: 13,
11    sourceType: 'module',
12  },
13  plugins: ['@typescript-eslint'],
14  rules: {},
15}

运行启动器以检查使用 .ts TypeScript 扩展的所有文件:

1npx eslint . --ext .ts

您现在已经设置了 eslint linter 来检查您的 TypeScript 语法. 接下来,您将更新您的 npm 配置,以添加一些方便的脚本来链接和运行您的项目。

步骤 5 — 更新 package.json 文件

将您通常执行的命令行任务放入 npm 脚本可能有用。 npm 脚本在您的 package.json 文件中定义,并且可以使用命令 npm run your_script_name 运行。

在此步骤中,您将添加一个开始脚本,将转载TypeScript代码,然后运行结果的.js应用程序。

您还将添加一个lint脚本,在您的TypeScript文件上运行eslint linter。

打开package.json文件并相应地更新它:

 1[label package.json]
 2{
 3  "name": "node_project",
 4  "version": "1.0.0",
 5  "description": "",
 6  "main": "dist/app.js",
 7  "scripts": {
 8    "start": "tsc && node dist/app.js",
 9    "lint": "eslint . --ext .ts",
10    "test": "echo \"Error: no test specified\" && exit 1"
11  },
12  "keywords": [],
13  "author": "",
14  "license": "ISC",
15  "devDependencies": {
16    "@types/express": "^4.17.1",
17    "@typescript-eslint/eslint-plugin": "^5.4.0",
18    "@typescript-eslint/parser": "^5.4.0",
19    "eslint": "^8.3.0",
20    "typescript": "^4.5.2"
21  },
22  "dependencies": {
23    "express": "^4.17.1"
24  }
25}

在上面的片段中,您更新了主要路径为编译的应用程序输出,并将开始和链接命令添加到 脚本部分。

当你查看开始命令时,你会看到首先运行tsc命令,然后运行节点命令。

lint命令与我们在上一个步骤中执行的命令相同,减少了在这种情况下不需要的npx前缀。

结论

在本教程中,您了解了为什么TypeScript对写可靠的JavaScript代码有用,您还了解了与TypeScript合作的一些好处。

最后,您使用 Express 框架设置了 Node 项目,但使用 TypeScript 编译和运行该项目。

Published At
Categories with 技术
Tagged with
comments powered by Disqus