如何使用Typescript设置节点项目

来自菜鸟教程
跳转至：导航、​搜索

介绍

Node 是一个 run-time 环境，可以编写服务器端 JavaScript。 自 2011 年发布以来，它已获得广泛采用。 由于 JavaScript 语言的性质：dynamic 和 weak typed，随着代码库的增长，编写服务器端 JavaScript 可能具有挑战性。

从其他语言转向 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 的新文件夹并进入该目录： 

mkdir node_project
cd node_project

接下来，将其初始化为 npm 项目： 

npm init -y

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

第 2 步 — 配置 TypeScript 编译器

现在您的 npm 项目已初始化，您可以安装和设置 TypeScript。

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

npm install --save-dev typescript

Outputadded 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

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

nano tsconfig.json

然后粘贴以下 JSON：

tsconfig.json 

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

让我们回顾一下上面 JSON 片段中的一些键：

  • module：指定模块代码生成方式。 节点使用 commonjs。
  • target：指定输出语言级别。
  • moduleResolution：这有助于编译器确定导入所指的内容。 node 的值模仿了 Node 模块解析机制。
  • outDir：这是转译后输出.js文件的位置。 在本教程中，您将把它保存为 dist。

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

第三步——创建一个最小的 TypeScript Express 服务器

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

npm install --save express@4.17.1
npm install -save-dev @types/express@4.17.1

第二个命令安装 Express types 以支持 TypeScript。 TypeScript 中的类型是文件，通常具有 .d.ts 的扩展名。 这些文件用于提供有关 API 的类型信息，在本例中为 Express 框架。

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

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

mkdir src

然后在其中创建一个名为 app.ts 的 TypeScript 文件： 

nano src/app.ts

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

src/app.ts 

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`Express is listening at http://localhost:${port}`);
});

上面的代码创建了节点服务器，它在端口 3000 上侦听请求。 要运行该应用程序，您首先需要使用以下命令将其编译为 JavaScript： 

npx tsc

这使用我们在上一步中创建的配置文件来确定如何编译代码以及放置结果的位置。 在我们的例子中，JavaScript 被输出到 dist 目录。

使用 node 运行 JavaScript 输出： 

node dist/app.js

如果运行成功，将在终端记录一条消息： 

OutputExpress is listening at http://localhost:3000

现在，您可以在浏览器中访问 http://localhost:3000 ，您应该会看到以下消息： 

OutputHello World!

打开 dist/app.js 文件，你会发现 TypeScript 代码的转译版本：

dist/app.js 

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = (0, express_1.default)();
const port = 3000;
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(port, () => {
    return console.log(`Express is listening at http://localhost:${port}`);
});
//# sourceMappingURL=app.js.map

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

第 4 步 — 使用 eslint 配置 Typescript Linting

现在您可以为项目配置 TypeScript linting。 首先，我们使用 npm 安装 eslint： 

npm install --save-dev eslint

然后，运行eslint的初始化命令，以交互方式设置工程： 

npx eslint --init

这会问你一系列问题。 对于这个项目，我们将回答以下问题：

  • 你想如何使用 ESLint？： 检查语法并发现问题
  • 您的项目使用什么类型的模块？： JavaScript 模块（导入/导出）
  • 您的项目使用哪个框架？： 都不是
  • 您的项目是否使用 TypeScript？： 是的
  • 你的代码在哪里运行？： 节点
  • 您希望配置文件采用什么格式？： JavaScript

最后，系统会提示您安装一些附加的 eslint 库。 选择 Yes。 该过程将完成，您将获得以下配置文件：

eslintrc.js 

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
}

运行 linter 以检查所有带有 .ts TypeScript 扩展名的文件： 

npx eslint . --ext .ts

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

第 5 步 — 更新 package.json 文件

将您常用的命令行任务放入 npm 脚本 会很有用。 npm 脚本在您的 package.json 文件中定义，可以使用命令 npm run your_script_name 运行。

在此步骤中，您将添加一个 start 脚本，该脚本将转译 TypeScript 代码，然后运行生成的 .js 应用程序。

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

打开 package.json 文件并进行相应更新：

包.json 

{
  "name": "node_project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.3.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

在上面的代码片段中，您将 main 路径更新为编译后的应用程序输出，并将 start 和 lint 命令添加到 scripts 部分。

查看 start 命令时，您会看到首先运行 tsc 命令，然后是 node 命令。 这将编译然后使用 node 运行生成的输出。

lint 命令与我们在上一步中运行的命令相同，但在此上下文中不需要使用 npx 前缀。

结论

在本教程中，您了解了为什么 TypeScript 对编写可靠的 JavaScript 代码很有用。 您还了解了使用 TypeScript 的一些好处。

最后，您使用 Express 框架设置了一个 Node 项目，但使用 TypeScript 编译并运行了该项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用Typescript设置节点项目&oldid=27828”
Powered by MediaWiki