企业官网建设流程全解析

一、自动编译文件

• 编译 TS 文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译

tsc 【TS 文件】 -w

二、配置文件

1. 如果直接使用 tsc 指令，则可以自动将当前项目下的所有 TS 文件编译为 JS 文件，但是能直接使用 tsc 指令的前提是要先在项目根目录下创建一个 TS 的配置文件 tsconfig.json

2. 生成tsconfig.json文件的方式，运行指令tsc --init，它会在当前目录生成一个带注释的tsconfig.json模板文件

3. tsconfig.json文件的 exclude 默认情况下会排除node_modules、bower_components、jspm_packages、<outDir>目录

三、配置选项

• tsconfig.json 是 TS 编译器的配置文件，TS 编译器可以根据它的信息来对代码进行编译

• 详细配置见官方文档：https://www.tslang.cn/docs/handbook/compiler-options.html

1、include

• 定义希望被编译的文件所在的目录

• 默认值：[“**/*”]

"include":["./src/**/*"]

2、exclude

• 定义需要排除在外的目录

• 默认值：[“node_modules”, “bower_components”, “jspm_packages”]

"exclude":["./src/hello/**/*"]

3、extends

• 定义被继承的配置文件

"extends":"./configs/base"

4、files

• 定义被编译文件的列表，只有需要编译的文件较少时才会用到

"files":["demo1.ts","demo2.ts","demo3.ts","demo4.ts","demo5.ts"]

5、compilerOptions

（1）target

• 设置 TS 代码编译的目标版本

• 可选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

"compilerOptions":{"target":"ES6"}

• 设置一个错误的目标版本后进行编译，控制台会提示相应的目标版本

tsconfig.json:5:19 - error TS6046: Argument for '--target' option must be: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'.

（2）module

• 设置编译后代码使用的模块化系统

• 可选值：CommonJS、UMD、AMD、System、ES2020、ESNext、None

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

• 设置一个错误的模块化系统后进行编译，控制台会提示相应的模块化系统

tsconfig.json:6:19 - error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'.

（3）lib

• 指定代码运行时所包含的库，一般不需要修改

• 可选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost…

"compilerOptions":{"lib":["ES6","DOM"]}

• 设置一个错误的库，控制台会提示相应的库

tsconfig.json:7:17 - error TS6046: Argument for '--lib' option must be: 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.date', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2020.number', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'es2021.intl', 'es2022.array', 'es2022.error', 'es2022.intl', 'es2022.object', 'es2022.string', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'.

（4）outDir

• 编译后文件的所在目录，默认情况下，编译后的 JS 文件会和 TS 文件位于同级目录，设置 outDir 后可以改变编译后文件的位置

"compilerOptions":{"outDir":"dist"}

（5）outFile

• 将所有的文件编译为一个 JS 文件，将所有的编写在全局作用域中的代码合并为一个 JS 文件，如果 module 制定了 None、System 或 AMD 才会将模块一起合并到文件之中

"compilerOptions":{"outFile":"./dist/main.js"}

（6）allowJs

• 是否对 JS 文件编译，主要搭配 checkJs 一同使用

• 默认值：false

"compilerOptions":{"allowJs":true}

（7）checkJs

• 是否对 JS 文件进行检查，主要搭配 allowJs 一同使用

• 默认值：false

"compilerOptions":{"checkJs":true}

（8）removeComments

• 是否删除注释

• 默认值：false

"compilerOptions":{"removeComments":true}

（9）noEmit

• 不生成编译后的文件，主要针对于只想使用 TS 语法进行检测

• 默认值：false

"compilerOptions":{"noEmit":true}

（10）noEmitOnError

• 当有错误时不生成编译后的文件

• 默认值：false

"compilerOptions":{"noEmitOnError":true}

（11）alwaysStrict

• 设置编译后的文件是否使用严格模式

• 默认值：false

"compilerOptions":{"alwaysStrict":true}

（12）noImplicitAny

• 是否禁止隐式的 any 类型

• 默认值：false

"compilerOptions":{"noImplicitAny":true}

• 隐式的 any 类型

functiongetSum(a,b){returna+b;}

• 非隐式的类型

functiongetSum(a:number,b:number){returna+b;}

（13）noImplicitThis

• 是否禁止不明确类型的 this

• 默认值：false

"compilerOptions":{"noImplicitThis":true}

• 不明确类型的 this

functionhi(){console.log(this);}

• 明确类型的 this

functionhi(this:Window){console.log(this);}

（14）strictNullChecks

• 是否严格的检查空值

• 默认值：false

"compilerOptions":{"strictNullChecks":true}

• 下例代码中的 box 可能为 null

letbox=document.querySelector("box");box.addEventListener("click",function(){console.log("Hello World");});

• 确保 box 不是 null

letbox=document.querySelector("box");if(box!=null){box.addEventListener("click",function(){console.log("Hello World");});}

（15）strict

• 是否启用所有的严格检查，一半书写位置靠前

• 默认值：true

"compilerOptions":{"strict":true}