如何建立一个新的 TypeScript 项目

作者 Alligator.io

导言

你可能曾经在使用启动器（starter）项目或 Angular CLI 等工具时使用过 TypeScript。在本教程中，你将学习如何在没有启动器的帮助下建立一个 TypeScript 项目。你还将学习如何在 TypeScript 中进行编译，以及如何在TypeScript 项目中使用 linter。

前期准备

要完成本教程，你需要以下条件：

在你的计算机上安装最新版本的 Node。
熟悉 npm。npm是 Node 自带的。

第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 允许在不全局安装它们的情况下运行包。这里使用 tsc 命令是因为它是内置的 TypeScript 编译器。当你用 TypeScript 写代码时，运行 tsc 会将你的代码转化或编译成 JavaScript。在 tsc 命令中使用 --init 标记将在 typescript-project 项目目录下创建一个 tsconfig.json 文件，从而初始化你的项目。这个 tsconfig.json 文件将允许你进一步配置和定制 TypeScript 和 tsc 编译器的交互方式。你可以删除、添加和改变这个文件中的配置，来完美匹配你的需求。在你的编辑器（以 nano 为例）中打开 tsconfig.json：

$ nano tsconfig.json

你会看到文件中的默认配置。会有很多选项，其中大部分被注释掉了： typescript-project/tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
    . . .
  }
}

下面你可以在 tsconfig.json 文件中自定义你的 TypeScript 配置。例如，你可以考虑取消对 outDir 项的注释，并将其设置为"./build"，这将把你所有编译过的 TypeScript 文件放入该目录。安装好 TypeScript 并配置完 tsconfig.json文件后，现在你可以继续写你的 TypeScript 应用程序并编译它。注意：为了让你更快上手，下面的第3步用合理的默认值替换了你的许多配置。

第2步 - 编译 TypeScript 项目

你现在可以开始写你的 TypeScript 项目了。在你的编辑器中打开一个名为 index.ts 的新文件。在 index.ts 中写下以下 TypeScript 代码： typescript-project/index.ts

const world = 'world';

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

有了这些 TypeScript 代码，你的项目就可以被编译了。从你项目的目录中运行 tsc：

$ npx tsc

你会注意到，只要你在 tsconfig.js 文件中指定，编译后的 JavaScript index.js 文件和 index.js.map 源码图文件都会被添加到构建文件夹中。打开 index.js，你会发现被编译的 JavaScript 代码，如下： typescript-project/build/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
    return `Hello ${who}! `;
}
exports.hello = hello;

每做一次改变就运行一次 TypeScript 编译器会很麻烦。为了解决这个问题，你可以将编译器置于观察模式（watch mode），这意味着你的 TypeScript 文件将在每次改变时被重新编译。你可以用以下命令激活观察模式：

$ npx tsc -w

你已经了解了 TypeScript 编译器的工作原理，现在已经能够成功地编译你的 TypeScript 文件。接下来，你可以在工作流程中引入 linter，让你的 TypeScript 项目更上一层楼。

第3步 - 使用 Google TypeScript 风格来提示和纠正你的代码

编码时使用 linter 将帮助你快速找到代码中的不一致、语法错误和遗漏。此外，使用风格指南不仅可以帮助你确保代码格式良好和一致，还让你可以使用额外的工具来执行该风格。常用的工具是 eslint，它能与许多 IDE 良好配合，为开发过程提供帮助。目前项目已经设置好了，你可以使用 TypeScript 生态系统中的其他工具来协助你，不必手动在 tsconfig.json 文件中设置提示和配置。Google TypeScript Style 就是这样一个工具。它简称 GTS，是一个集风格指南、linter 和自动代码纠正器于一身的工具。使用 GTS 将帮助你快速启动一个新的 TypeScript 项目，避免关注小的、组织性的细节，而专注于设计你的项目。GTS 还提供了它认定的默认配置。这意味着你不需要进行太多的自定义配置。首先安装 GTS：

$ npm i gts --save-dev

从这里开始，使用以下命令初始化 GTS：

$ npx gts init

上述命令将生成你开始使用 TypeScript 所需要的一切，包括一个 tsconfig.json 文件和一个 linting 设置。如果你还没有package.json 文件，也会生成一个 package.json 文件。运行 npx gts init 也会将有用的 npm 脚本添加到你的 package.json 文件。例如，你现在可以运行 npm run compile 来编译你的 TypeScript 项目。为了检查是否有错误，你现在就可以运行 npm run check。注意：在安装 GTS 之前安装 TypeScript 可以确保你在开发应用程序时拥有最新的 TypeScript 版本。由于 GTS 的开发速度比 TypeScript 慢，你可能会发现它建议在你的开发依赖中降级 TypeScript 的版本。如果你需要更新的功能，可以指示 GTS 不要覆盖这个值。此外，eslint TypeScript linter有一个 TypeScript 支持版本的范围，较新版本的语言可能会超出这个范围。在这种情况下，eslint 会警告你。它很有可能会继续正常工作，但如果你确实遇到了问题，你可以在安装时指定 TypeScript 需要降级到的版本。例如，用npm i typescript@4.4.2 --save-dev降级到 4.4.2 版本。 GTS 现在已经安装好并正确地集成到你的 TypeScript 项目中了。在未来的项目中使用 GTS，你将能够快速建立具有必要的配置的新 TypeScript 项目。由于 GTS 提供的方法是自己认定、无需配置的，因此它将使用自己合理的 linting 和修复规则。这些规则遵循了许多最佳实践。但如果你发现自己需要以任何方式修改这些规则，可以通过扩展默认的 eslint 规则来实现。要做到这个，需要在你的项目目录下创建一个名为 .eslintrc 的文件，该文件扩展了样式规则：

---
extends:
  - './node_modules/gts'

这将允许你修改由 GTS 提供的样式规则，或向其中添加规则。

结语

在本教程中，你开启了一个具有自定义配置的 TypeScript 项目。你还将 Google TypeScript Style 集成到了你的 TypeScript 项目中。使用 GTS 将帮助你快速启动和运行一个新的 TypeScript 项目。有了 GTS，你就不需要手动设置配置或将 linter 整合到你的工作流程中。