我们从上一篇教程文章知道，Typescript的第二个构成是Typescript编译器，本篇文章我们主要讲解Typescript编译器
Typescript教程（二）使用Typescript编译器

Typescript编译器如何编译Typescript文件

首先，我们新建一个目录，在目录内输入tsc --init,此时目录内会生成一个tsconfig.json文件。这个文件里面包含了关于Typescript编译器的所有配置选项，当我们需要使用到某个选项时，就在tsconfig.json中配置开启即可。

mkdir test
cd test
tsc --init

我们接着新建test1.ts文件和test2.ts文件，里面随便写console.log('this is test'），然后我们在命令行输入tsc，这时会生成一个test1.js文件和test2.js文件
默认情况下，如果我们在终端中单独运行 tsc 命令，编译器将尝试使用最接近的tsconfig.json配置来编译ts文件，任何包含 tsconfig.json 文件的目录都被视为 TypeScript 项目的根目录。严格来讲，一个项目中最好只有一个tsconfig.json文件。假设我们有如下文件结构
Typescript教程（二）使用Typescript编译器
当我们在./目录下运行tsc时，Typescript编译器将采用第一个tsconfig.json，当我们在src目录下运行tsc时，Typescript编译器将采用第二个tsconfig.json，但是当我们把第二个tsconfig.json删除并在src目录下运行tsc时，Typescript编译器将采用第一个tsconfig.json。Typescript编译器将会向上导航到根目录并找到在那里使用的配置文件。
如果项目中代码中没有错误，编译器将编译它找到的所有 TypeScript 文件，并为每个文件生成一个 .js 文件，如果没配置outDir，最终将包含已编译的代码以及 .ts 文件。当编译成功时，终端根本没有输出——唯一的输出是文件系统中生成的文件。
当我们得到js文件后，ts文件就不需要了，所以我们一般都需要指定一个outDir，有两种指定方式

在tsconfig.json中配置outDir
在命令行中配置 --outDir ，如tsc --outDir ./dist

以上这两种方式同时使用的话，优先采用命令行方式的配置

tsconfig.json文件的配置

在主配置对象compilerOptions之后，我们可以自己添加几个选项。

include 指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含 tsconfig.json 文件的目录进行解析的
exclude 用于指定我们不想编译的文件夹，解析 include 时应跳过的文件名或模式数组。
files 与include类似，但这里不能放文件夹，只能放文件，并且如果找不到任何文件，则会发生错误
extends extends 的值是一个字符串，其中包含要继承的另一个配置文件的路径。该路径可以使用 Node.js 样式解析

compilerOptions中的几个主要配置介绍：

target 用于指定ECMAScript版本如ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019'等
commonjs 用于指定模块化方式，默认commonjs
lib 这允许我们表示 TypeScript 知道哪个默认版本和功能。如果您输入值并按“ctrl + space”，则会弹出自动完成框，显示可用的选项
allowJs 允许在项目中导入 JavaScript 文件，而不仅仅是 .ts 和 .tsx 文件。
checkJs 与 allowJs 协同工作。启用 checkJs 后，JavaScript 文件会受Typescript一样的类型检查待遇
jsx 是否允许编译jsx文件
rootDir 此选项设置我们保存 TS 文件的位置
outDir 设置输出 JS 文件的存储位置
removeComments 是否从输出 JS 文件中删除注释
noEmit 当此选项设置为 true 时，TypeScript 将检查错误，但不会生成 JS 文件。这对于我们想要在编译之前进行调试的大文件很有帮助
noEmitOnError 与前面的属性类似，但是使用此选项，只要没有错误，就会编译。但是，如果 TypeScript 确实发现错误，则不会编译任何文件。
sourceMap 使用默认配置，编译器仅发出 .js 文件。为了能够在运行时调试 TS 文件，我们需要源映射。要启用源映射生成，我们可以使用 sourceMap 选项

TypeScript 注释指令

所谓“注释指令”，指的是采用 JS 双斜杠注释的形式，用于向编译器发出的命令，Typescript主要有以下注释指令
// @ts-nocheck 告诉编译器不对当前脚本进行类型检查，可以用于 TypeScript 脚本，也可以用于 JavaScript 脚本。
```
// @ts-nocheck
```

const element = document.getElementById(123);

上面示例中，document.getElementById(123)存在类型错误，但是编译器不对该脚本进行类型检查，所以不会报错。

- //@ts-check 如果一个 JavaScript 脚本顶部添加了// @ts-check，那么编译器将对该脚本进行类型检查，不论是否启用了checkJs编译选项。
```typescript
// @ts-check
let isChecked = true;

console.log(isChceked); // 报错
</code></pre>
<p>上面示例是一个 JavaScript 脚本，// @ts-check告诉 TypeScript 编译器对其进行类型检查，所以最后一行会报错，提示拼写错误</p>
<ul>
<li>// @ts-ignore  // @ts-ignore或// @ts-expect-error，<strong>告诉编译器不对下一行代码进行类型检查</strong>，可以用于 TypeScript 脚本，也可以用于 JavaScript 脚本。
<pre><code class="language-typescript">
let x:number;</code></pre></li>
</ul>
<p>x = 0;</p>
<p>// @ts-expect-error
x = false; // 不报错</p>
<pre><code>上面示例中，最后一行是类型错误，变量x的类型是number，不能等于布尔值。但是因为前面加上了// @ts-expect-error，编译器会跳过这一行的类型检查，所以不会报错。

<a name="d8yow"></a>
## JSDoc
TypeScript编译器 直接处理 JS 文件时，如果无法推断出类型，会使用 JS 脚本里面的 JSDoc 注释。<br />使用 JSDoc 时，有两个基本要求。<br />（1）JSDoc 注释必须以/**开始，其中星号（*）的数量必须为两个。若使用其他形式的多行注释，则 JSDoc 会忽略该条注释。<br />（2）JSDoc 注释必须与它描述的代码处于相邻的位置，并且注释在上，代码在下。<br />下面是 JSDoc 的一个简单例子。
```typescript
/**
 * @param {string} somebody
 */
function sayHello(somebody) {
  console.log('Hello ' + somebody);
}

现有项目添加Typescript支持

vite项目

Vite 支持开箱即用地支持了 .ts 文件。它只执行转译而不执行类型检查。因此，只需小小的修改一下tsconfig.json配置文件即可
通过 create-vue 搭建的项目包含了预先配置好的 tsconfig.json。其底层配置抽象于 @vue/tsconfig 包中。
手动配置 tsconfig.json 时，请留意以下选项：

compilerOptions.isolatedModules 应当设置为 true，因为 Vite 使用 esbuild 来转译 TypeScript，并受限于单文件转译的限制。
如果正在使用选项式 API，需要将 compilerOptions.strict 设置为 true (或者至少开启 compilerOptions.noImplicitThis，它是 strict 模式的一部分)，才可以获得对组件选项中 this 的类型检查。否则 this 会被认为是 any。

如果你在构建工具中配置了路径解析别名，*例如 @/ 这个别名被默认配置在了 create-vue 项目中**，你需要通过 compilerOptions.paths 选项为 TypeScript 再配置一遍。

基于Webpack构建的项目

利用 ts-loader 结合官方 typescript 库来实现。

1、安装Typescript、ts-loader

npm install -D typescript
npm install -D ts-loader

2、配置tsconfig.json文件

大概的配置项如下

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"suppressImplicitAnyIndexErrors": true,
"resolveJsonModule": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env"],
"paths": {
  "@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}

3、配置webpack.config.js文件

给webpack添加ts-loader支持

...
.module
    .rule("type-script") // 配置 ts-loader
        .test(/\.tsx?$/) // loader 加载的条件是 ts 或 tsx 后缀的文件
        .use("ts-loader")
            .loader("ts-loader")
            .options({ // ts-loader 相关配置
                transpileOnly: true, // 只用于编译
                appendTsSuffixTo: ['\\.vue$'] // 给 .vue 文件添加后缀
            })
            .end()
        .end()
...

Typescript教程（二）使用Typescript编译器