介绍

Node是一个运行时环境，可以编写服务器端JavaScript。自 2011 年发布以来，它已获得广泛采用。由于 JavaScript 语言的性质，随着代码库的增长，编写服务器端 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 步 – 初始化 npm 项目

首先，创建一个名为的新文件夹node_project并移动到该目录中。

mkdir node_project
cd node_project

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

npm init

运行后npm init，您需要向 npm 提供有关您项目的信息。如果您更愿意让 npm 假定合理的默认值，那么您可以添加y标志以跳过提示以获取其他信息：

npm init -y

现在您的项目空间已经设置好，您可以继续安装必要的依赖项了。

第 2 步 – 安装依赖项

初始化裸 npm 项目后，下一步是安装运行TypeScript所需的依赖项。

从项目目录运行以下命令以安装依赖项：

npm install -D [email protected]
npm install -D [email protected]

该-D标志是快捷方式：--save-dev。您可以在 npmjs 文档 中了解有关此标志的更多信息。

现在，是时候安装Express框架了：

npm install -S [email protected]
npm install -D @types/[email protected]

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

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

第 3 步 – 配置 TypeScript

在本节中，您将设置 TypeScript 并为 TypeScript 配置 linting。TypeScript 使用一个名为的文件tsconfig.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.

手动创建和填充tsconfig.json文件的替代方法是运行以下命令：

tsc --init

此命令将生成一个很好的注释tsconfig.json文件。

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

现在您可以为项目配置 TypeScript linting。在本教程建立的项目目录根目录中运行的终端中node_project，运行以下命令以生成tslint.json文件：

./node_modules/.bin/tslint --init

打开新生成的tslint.json文件并相应地添加no-console规则：

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

默认情况下，TypeScript linter 阻止使用调试 usingconsole语句，因此需要明确告诉 linter 撤销默认no-console规则。

第 4 步 – 更新package.json文件

在本教程的这一点上，您可以单独在终端中运行函数，也可以创建一个npm 脚本来运行它们。

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

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

{
  "name": "node-with-ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}

在上面的代码段中，您更新了main路径并将start命令添加到脚本部分。查看start命令时，您会看到首先tsc运行的是命令，然后是node命令。这将编译并运行生成的输出node。

该tsc命令告诉 TypeScript 编译应用程序并将生成的.js输出放在文件中outDir设置的指定目录中tsconfig.json。

第 5 步 – 创建和运行基本 Express 服务器

现在 TypeScript 和它的 linter 已经配置好了，是时候构建一个 Node Express 服务器了。

首先，src在项目目录的根目录中创建一个文件夹：

mkdir src

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

touch src/app.ts

此时，文件夹结构应如下所示：

├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json

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

import express from 'express';

const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

上面的代码创建了在端口上侦听3000请求的节点服务器。使用以下命令运行应用程序：

npm start

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

Output
server is listening on 3000

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

Output
The sedulous hyena ate the antelope!

打开dist/app.js文件，您将找到 TypeScript 代码的转译版本：

"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 = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
    res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

//# sourceMappingURL=app.js.map

此时，您已成功设置 Node 项目以使用 TypeScript。

结论

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

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