[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": [
    "..."
]
发表评论 / Comment

用心评论~