项目初始化

参考文档

当使用 入门项目 或者像 Angular CLI 这样的工具时，使用 TypeScript 是非常容易的（因为这些项目脚手架已经把项目结构初始化好了），但是如果只是想要初始化一个简单的 TypeScript 项目，这个项目原本也就只是一个普通的 JavaScript 工程的时候，该怎么办呢？让我们来试一试一些简单的方法。

依赖库

首先，你当然需要安装好 TypeScript ，你可以选择在电脑上全局安装，或者是仅在项目内部本地安装。

全局安装，执行：

npm i typescript -g  
// 或者使用 Yarn  
yarn global add typescript

本地安装，执行：

npm i typescript --save-dev
// 或者使用 Yarn  
yarn add typescript --dev

初始化

TypeScript 有两个二进制文件：tsc 和 tsserver，tsc 是 TypeScript 的编译器，编译器有一个具有很多可选项的命令行接口，初始化 TypeScript 工程只需要轻松使用 --init 选项。

tsc --init

如果是在项目内部本地安装的 TypeScript，你可以通过从本地 node_modules 文件夹调用 tsc 来运行本地版本：

./node_modules/.bin/tsc --init

或者，也可以 使用 npx 来运行本地版本的 tsc 命令。

npx tsc --init

在使用 --init 选项执行了 tsc 命令之后，在项目的根目录下将生成一个 tsconfig.json 文件，这个文件带有一些默认的配置项和注释掉的配置项，下面是初始配置：

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

我们可以向基本配置添加两项：

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

添加配置后，TypeScript 编译器编译的 JavaScript 文件将被输出到 dist 文件夹，同时会生成 sourcemaps。

编译

有了 tsconfig.json，我们就可以开始用 TypeScript 编写应用代码了，我们先在 src/01 目录创建一个文件 01.ts，文件内容如下：

const world = 'world';

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

现在我们可以简单地使用 tsc 命令进行编译了：

tsc

// 如果是项目内部安装 tsc
npx tsc

好了，现在 JavaScript 代码和 sourcemap 文件就都生成好了，下面是编译好的 JavaScript 文件的内容： /dist/01.js

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

监视模式

当对源代码做了修改后，你不必每次都在命令行重新运行 tsc 命令，你可以启用编译器的监视模式，每次代码修改后编译器会自动重新编译。

tsc -w

// 如果是项目内部安装 tsc
npx tsc -w

TSLINT

编写代码时需要使用 Linter 工具以便快速发现代码的语法错误和遗漏，TypeScript 使用 TSLINT。
接下来我们在项目中安装和配置 TSLINT，使用 npm 执行如下命令：

// 全局安装
npm i tslint --g

// 项目内部安装
npm i tslint --save-dev

如果喜欢 Yarn：

// 全局安装
yarn global add tslint

// 项目内部安装
yarn add tslint --dev

TSLINT 安装完成后，可以使用 --init 选项进行初始化：

// 如果是全局安装
tslint --init

// 如果是项目内部安装
npx tslint --init

命令执行后将会在项目根目录生成 tslint.json 配置文件，文件默认内容如下：

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

现在你可能还需要安装编辑器的 TSLINT 插件以便在编码时发现错误提示，插件安装完成后需要重启编辑器。

使用上面简单的代码示例，TSLINT 提示我们单引号应该替换为双引号，同时文件应该以新的一行作为结尾。如果我们就喜欢使用单引号而且也不想在结尾加一个空白行，那么需要在 TSLINT 的配置文件中新增两个配置项。

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "eofline": false,
        "quotemark": [
            true,
            "single"
        ]
    },
    "rulesDirectory": []
}

在实际配置过程中，因为我以前将我的 Yarn 本地仓库和 NPM 本地仓库移动到了非默认位置，导致使用 Yarn 方式安装 TSLINT 后，在 VSCODE 编辑器中始终提示找不到 TSLINT，后来使用 NPM 方式安装后，TSLINT 才开始正常工作。

Airbnb 的 TSLINT 配置指南

手动配置规则是很无趣，因此通常使用大家都接受的默认配置，Airbnb 就有一套这样的默认配置。

继续在我们的项目中安装：

npm install tslint-config-airbnb

// 使用 Yarn
yarn add tslint-config-airbnb

鉴于之前通过 Yarn 配置时无效的问题，建议通过 NPM 方式安装。

现在我们可以修改 TSLINT 的配置文件以便能够继承 Airbnb 的推荐配置。

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

注意现在我们删除了单引号规则，因为 Airbnb 的配置中已经有了单引号规则。

更简单的方法：输入 gts

现在我们已经知道了一个 TypeScript 的工程的各个模块是如何构成的，其实可以使用更加简单的方法而不用一步步完成 TSLINT 和 tsconfig.json配置文件的初始化，Google TypeScript Style (gts) 是一个让 TypeScript 项目初始化更简单的工具，它可以避免 bikeshedding ，同时有更多合理的默认项目配置。

你需要做的很简单，仅仅是在一个文件夹下面执行如下命令：

npx gts init

确保 npm 版本 >= 5.3，这个版本的 npm 自带有 npx 命令。

这个命令将生成我们上述的一堆配置，如果文件夹下没有 package.json，它也会默认创建。

然后就可以执行命令安装项目依赖了：

npm install

// 如果使用 Yarn
yarn

gts 在 package.json 文件中添加了一些方便的脚本，例如，如果想编译项目可以执行 npm run compile，如果要检查 ESLINT 的错误，执行 npm run check。

如果想让 TSLINT 和编辑器一起工作，你仍然需要手动在项目中添加 tslint.json 配置文件，并且将 TSLINT 检查风格继承自 gts。

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

gts 仍在开发中，在撰写本文时（2017 年 12 月）尚未达到稳定的版本，请谨慎使用。

现在，你可以轻松地开始使用TypeScript了！在以后的文章中，我们将探讨如何使用 Webpack。

← 文档规范