[JavaScript知识库]4.0 TypeScript编译

上一篇：

TypeScript补充（& ，type）https://blog.csdn.net/qq_42543244/article/details/122778263

1.?tsc xxx.ts

将某个ts文件编译成js文件，当我们改动了ts文件的代码，我们就需要执行一次该命令；

问题：需要手动执行命名，而且当我们有多个ts文件时，只能编译单一ts文件。

2. tsc xxx.ts -w

w代表watch的意思，执行此命令，当我们再去修改该ts文件时，可直接自动编译；

问题：有多个ts文件时，需要启动多个文件窗口命令。

3. tsc (重点来了)

我们可以直接使用tsc编译当前目录下的ts文件，但是前提是目录下需要包含：tsconfig.json文件，即使tsconfig.json内容为空，快速生成tsconfig.json命令

tsc -init

目录图

?tsconfig.json （常用的一些）更多配置项

  /* 
当前文件作用：是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
 */
  {
    "include": [
      "./src/**/*"
    ], //那些ts文件需要被编译  **表示任意目录  *表示任意文件
    "exclude": [
      "./src/hello/**/*"
    ], //不需要被编译的目录 默认值：['node_modules','bower_components',"jspm_packages"]
    // "extends": "",  //定义被继承的配置文件 假如有另外一个配置文件与当前配置文件内容一致，那就可以直接使用extends，直接写上目录即可
    // "files": [], //指定被编译的文件列表，只有需要编译的文件较少时才会用到，一般用不到
    "compilerOptions": { //编译选项配置（重要）
      "target": "es2015", //用来指定ts被编译成js的版本 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'
      "module": "es2015", //指定使用的模块化规范  'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
      // "lib": [], //用来指定项目中使用的库，一般情况下不需要改 
      /* 可选值
'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 
'es2020', 'es2021', '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.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl',
'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl',
'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
*/
      "outDir": "./dist", //指定编译后文件所在的目录
      // "outFile": "./dist/app.js", //将代码合并成一个文件,设置outfile后，全局作用域的代码会合并到同一个文件
      "allowJs": false, //是否对js文件进行编译，默认false
      "checkJs": false, //是否检查js代码符合语法规范，默认false
      "removeComments": true, //是否移除注释，默认false
      "noEmit": false, //不生成编译后的文件，默认false
      "noEmitOnError": true, //当有错误后不生成编译的文件 默认false
      "strict": true, //所有严格检查的总开关，建议设置为true
      "alwaysStrict": true, //设置编译后的文件是否使用严格模式 默认false
      "noImplicitAny": true, //是否允许设置any类型
      "noImplicitThis": true, //不允许不明确的this
      "strictNullChecks": true, //严格的检查空值 默认false
    }
  }

4. tsc -w??

在主文件路径下执行，自动编译路径下的所有ts文件