介绍

在使用入门项目或 Angular CLI 等工具之前，您可能已经使用过 TypeScript。在本教程中，您将学习如何在没有初学者帮助的情况下设置 TypeScript 项目。您还将了解如何在 TypeScript 中进行编译以及如何在 TypeScript 项目中使用 linter。

先决条件

要完成本教程，您将需要以下内容：

• 您的机器上安装了最新版本的 Node。您可以按照如何安装 Node.js 和创建本地开发环境教程来完成此操作。
• 熟悉npm. npm带有节点。要了解有关使用 的更多信息npm，请查看如何使用 Node.js 模块npm和package.json教程。

第 1 步 – 启动 TypeScript 项目

要开始您的 TypeScript 项目，您需要为您的项目创建一个目录：

mkdir typescript-project

现在切换到您的项目目录：

cd typescript-project

设置好项目目录后，您可以安装 TypeScript：

npm i typescript --save-dev

包含该--save-dev标志很重要，因为它将 TypeScript 保存为开发依赖项。这意味着 TypeScript 对于您的项目的开发是绝对必要的。

安装 TypeScript 后，您可以使用以下命令初始化您的 TypeScript 项目：

npx tsc --init

npm还包括一个名为 的工具npx，它将运行可执行包。npx允许我们运行包而不必全局安装它们。您可以在此处详细了解如何npx工作以及何时使用它。

tsc此处使用该命令是因为它是内置的 TypeScript 编译器。当您使用 TypeScript 编写代码时，运行tsc会将您的代码转换或编译为 JavaScript。

使用--init上述命令中的标志将通过tsconfig.json在您的typescript-project项目目录中创建一个文件来初始化您的项目。此tsconfig.json文件将允许您进一步配置和自定义 TypeScript 和tsc编译器的交互方式。您可以删除、添加和更改此文件中的配置，以最好地满足您的需求。

tsconfig.json在您选择的代码编辑器中打开，您将看到以下默认配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

许多默认配置将被注释掉。上述配置设置了您的 TypeScript 将被编译到的 JavaScript 版本以及您编译的程序的预期模块系统。设置"strict"为true确保将启用广泛的类型检查规则。这意味着您的 TypeScript 程序将有更少的错误。

您可以自定义 TypeScript 配置。在tsconfig.json文件中，添加以下键值对：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

给出"outDir"的值"dist"将创建一个名为 的文件夹或目录dist。当你运行npx tsc编译你的 TypeScript 文件时，编译的 JavaScript 文件将被放置在dist文件中。

一个sourcemap当您编译打字稿文件也会被创建。sourcemap 是一个将新编译的 JavaScript 文件映射到原始 TypeScript 文件的文件。当您的代码中存在错误或需要进行更改时，最好调试原始源代码而不是编译后的代码。这就是源映射有用的原因。设置"sourceMap"为true将允许您快速解决原始 TypeScript 文件中的错误。

安装 TypeScript 并准备好tsconfig.json文件后，您现在可以继续编写 TypeScript 应用程序并对其进行编译。

第 2 步 – 编译 TypeScript 项目

在开始编写 TypeScript 项目之前，请在typescript-project名为src. 在src文件夹内，创建一个index.ts文件。

index.ts在您的代码编辑器中打开。在 中编写以下 TypeScript 代码index.ts：

const world = 'world';

export function hello(world: string = world): string {
  return `Hello ${world}! `;
}

有了这个 TypeScript 代码，index.ts就可以编译了：

npx tsc index.ts

您会注意到编译后的 JavaScriptindex.js文件和index.js.map源映射文件都已添加到dist文件夹中。

打开index.js，您将看到以下已编译的 JavaScript 代码：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'world';
function hello(world) {
    if (world === void 0) { world = world; }
    return "Hello " + world + "! ";
}
exports.hello = hello;
//# sourceMappingURL=index.js.map

每次进行更改时都运行 TypeScript 编译器可能很乏味。要解决此问题，您可以将编译器置于监视模式。将编译器设置为监视模式意味着每次进行更改时都会重新编译您的 TypeScript 文件。

您可以使用以下命令激活监视模式：

npx tsc -w

您已经了解了 TypeScript 编译器的工作原理，现在您可以成功编译 TypeScript 文件了。通过在工作流程中引入 linter，您可以将 TypeScript 项目提升到一个新的水平。

第 3 步 – 为 TypeScript 项目配置 TSLint

在编码时使用 linter 将帮助您快速找到代码中的不一致、语法错误和遗漏。实际上，TypeScript 的linter是TSLint。

警告：现在不推荐使用 TSLint。最好的做法是改用 ESLint。阅读本文以了解如何执行此操作：如何在 Visual Studio Code 中使用 ESLint 整理和格式化代码。

要安装 TSLint，请运行以下命令：

npm i tslint --save-dev

现在安装了 TSLint。要配置 TSLint 并自定义它在您的项目中的工作方式，请运行以下命令来初始化 TSLint：

npx tslint --init

初始化 TSLint 将创建一个tslint.json文件。所有 TSLint 配置都保存在tslint.json. tslint.json在您的代码编辑器中打开。您将看到以下默认配置：

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Linter 会在代码中的错误下划线。要在代码编辑器中启用此行为，您需要安装 TSLint 扩展。

注意：请记住，不推荐使用 TSLint。在您的代码编辑器中安装 TSLint 可能不起作用。

返回到index.ts您的代码编辑器中。您会在两个地方注意到下划线：单引号应该是双引号，文件应该以新行结束。这两个标记的消息都不是错误。它们是 TSLint 为您配置的风格偏好。随着tslint.json在地方，你可以改变这些配置。

要更改这些风格偏好，您将使用 中的"rules"键值对tslint.json：

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

您可能不想在每个文件的末尾包含额外的行。您可以使用"eofline"规则更改此设置。设置"eofline"to的值false将删除 TSLint 下划线：

"rules": {
  "eofline": false
},

您不必手动设置要添加或自定义的每条规则。您可以采用一些众所周知的配置并将其集成到 TSLint 中。Airbnb 风格指南是许多开发人员信任和使用的一组配置。

要使用 Airbnb 风格指南，您首先需要安装它：

npm install tslint-config-airbnb

安装 Airbnb 风格指南后，您需要确保您的 TSLint 配置tslint.json反映了这一点。该"extends"密钥将需要指向新安装tslint-config-airbnb：

{
    "defaultSeverity": "error",
    "extends": "tslint-config-airbnb",
    "jsRules": {},
    "rules": {
        "eofline": false
    },
    "rulesDirectory": []
}

随着 Airbnb 风格指南的到位并集成到 中tslint.json，TSLint 将不再为使用单引号引发错误消息。Google 还有一个广泛使用的 TypeScript 样式指南，称为gts，它具有更多有用的功能。

第 4 步 – 使用 gts

您知道 TypeScript 配置和 linting 是如何工作的。有了这些幕后知识，您可以使用其他工具来避免在tsconfig.json文件中设置 linting 和配置。Google TypeScript Style就是这样一种工具。Google TypeScript Style，称为 gts，是集风格指南、linter 和自动代码校正器于一体的工具。使用 gts 将帮助您快速引导一个新的 TypeScript 项目并避免自行车棚。gts 还提供自以为是的默认配置。这意味着您不必进行太多的配置自定义。

要测试 gts，首先要创建一个新的项目文件夹。一旦您的项目文件夹就位，请使用以下命令初始化 gts：

npx gts init

上面的命令将生成开始使用 TypeScript 所需的一切，包括tsconfig.json文件和 linting 设置。package.json如果您还没有一个文件，也会生成一个文件。

运行npx gts init还会将有用的npm脚本添加到您的package.json文件中。例如，您现在可以运行npm run compile以编译您的 TypeScript 项目。要检查 linting 错误，您现在可以运行npm run check.

注意：请记住，不推荐使用 TSLint。查看gts 文档以了解如何将 gts 与 ESLint linter 集成。

要在 TypeScript 项目中使用 TSLint，您仍需要安装 TSLint 并运行npx tslint --init以创建tslint.json配置文件。在上一步中，我们扩展了 TSLint 以使用 Airbnb 风格指南。你需要对 gts 做同样的事情：

{
  "defaultSeverity": "error",
  "extends": [
    "./node_modules/gts/tslint.json"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

现在 TSLint 将遵循 gts 制定的 linting 规则。

gts 现在已安装并正确集成到您的 TypeScript 项目中。在未来的项目中使用 gts 将允许您快速设置具有必要配置的新 TypeScript 项目。

结论

在本教程中，您开始了一个具有自定义配置的 TypeScript 项目。您还将 Google TypeScript 样式指南集成到您的 TypeScript 项目中。使用 gts 将帮助您快速启动并运行新的 TypeScript 项目。使用 gts，您无需手动设置配置或将 linter 集成到您的工作流程中。

作为附加步骤，您可能有兴趣学习如何在 Visual Studio Code 中使用 TypeScript。

您还可以查看本文以了解如何将 TypeScript 与 React 结合使用。