[TS]安装及基本配置

TypeScript是JavaScript的一个超集，优化了JavaScript中没有静态类型的缺点。

并且在编译时，可以发现一些错误，在vscode中，当出错时，未当编译时就会出现红色波浪线。

---

1.安装

• 提示：在安装TypeScript之前，需要先安装Node.

npm install -g typescript

当安装之后，全局中则多了一个 tsc 命令。

---

2.编写及编译

在安装TypeScript之后，我们则可以创建以.ts为后缀的文件了，以.ts为后缀的文件，里面就是TypeScript代码。

当TypeScript文件中的代码写完之后，我们需要对它进行编译成JavaScript文件，就像Java一样，需要将.java文件编译成.class。

需要在终端中执行以下命令，进行编译。

tsc 文件名.ts

当执行完以下命令后，则生成了一个编译好的.js文件。

vscode报错问题：

在vscode中，如果不生成tsconfig.json配置文件，在编译TypeScript生成JavaScript文件后，就会报重复定义的错误。

• 解决办法：只需要生成一下该文件即可[无论是用tsc命令生成，还是手动创建一个tsconfig.json文件]。

---

3.编译错误

在编译的过程中，会检查你编写的TypeScript代码有没有问题，如果出现了问题，那么在终端中则会显示哪里出现了问题。

但是，它并不会影响生成JavaScript文件，就算编译时出现了错误，它依旧会生成JavaScript文件。

• 我们可以在tsconfig.json中把noEmitOnError这个选项解开注释使其生效，这样当TypeScript编译错误时，就不会在生成JavaScript文件了。

---

4.tsc命令

1.编译某个文件

• tsc 文件名.ts

2.监听某个文件,变化时自动编译

• tsc 文件名.ts --wach

3.一次性编译所有文件

• tsc

4.监听所有文件的变化,变化时自动编译

• tsc --watch

5.生成配置文件

• tsc --init

---

5.配置文件

我们可以通过tsc --init命令去生成一个配置文件，在终端运行以下命令。

tsc --init

当运行完如上命令后，在文件夹中则会生成一个tsconfig.json文件夹。

• 该文件中，存储的都是配置选项，noEmitOnError选项就在其中[TypeScript编译错误时不生成JavaScript]。

• 在该JSON文件中，是可以写注释的，并且它一共有5个大选项。

  • compilerOptions
  • files：单独需要编译的文件,此次编译只会编译里面的文件。
  • include：指定文件夹，此次编译文件夹中的文件。
  • exclude：不编译该文件夹中的内容，默认值为：node_modules…
  • extends：表示继承的其他配置文件。

---

compilerOptions

• 说明：编译选项.

target：

• 说明： 将TypeScript编译成ECMAScript哪个版本？

"compilerOptions": {
    "target": "es2015" 或者 "target": "es6"
}

outDir：

• 说明： 默认情况下，是将编译后的.js文件放到根目录的，我们可以通过该选项去指定编译生成的.js文件放到哪个位置。
• 假如main.ts放在了src目录下，并且将outDir设置成了./js，那么编译后，这个被编译生成的main.js是放在./js/src/main.js中的。

"compilerOptions": {
    "outDir": "./js"
}

module：

• 说明： 该选项可以选择模块化系统。
• 可选值：CommonJS【require】、Es6【import】、UMD、AMD、System、ES2020、ESNext.

"compilerOptions": {
    "module": "CommonJS"
}

---

files

• 说明：如果在该数组中指定了文件路径，那么此次编译就只会编译元素中的文件。
• 提示：该选项的元素中，只能指定一个单独的.ts文件，不能指定文件夹。

"files": [
    "./src/index.ts"
]

---

extends

• 说明：继承其他配置文件的配置。

"extends": "./src/tsconfig.json"

---

include

• 说明：每个元素的内容为一个文件夹地址，编译时会编译文件夹中的文件。
• 提示：可以选择通配符，详情看代码注释。

"include": [
    // 编译 src 文件夹下的，所有文件夹[**]中的所有文件[*]
    "./src/**/*"
]

---

exclude

• 说明：数组每个元素是一个地址，对这些元素中的地址不进行编译。
• 默认值：node_module…

"exclude": [
    "..."
]