TypeScript编译选项

 1. 自动编译文件

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

2. 自动编译整个项目

• 如果直接使用tsc指令，则可以自动将当前项目下所有的ts文件编译为js文件
• 但是能直接使用tsc命令的前提是，要先在项目的根目录下创建一个ts的配置文件tsconfig.json
• tsconfig.json是一个JSON文件，添加配置文件后，只需tsc命令即可完成对整个项目的编译
• 配置选项：
  • include
    • 定义希望被编译文件所在的目录
    • 默认值：[ "**/*" ]

      {
        /*
          下面示例中，表示只编译src文件夹下所有的ts文件
          这里的**表示所有文件夹
          这里的*表示所有文件
        */
        "include":["src/**/*"]
      }

  • exclude
    • 定义被编译时需要排除在外的目录
    • 默认值：["node_modules", "bower_components", "jspm_packages"]

      {
        /*
          下面示例中，表示src中test目录下的ts文件不会被编译
        */
        "exclude":["src/test/**/*"]
      }

  • extends

    • 定义被继承的配置文件

      {
        /*
          下面示例中，表示当前配置文件中会自动包含config目录下base.json中的所有配置信息
        */
        "extends": "./config/base"
      }

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

      {
        /*
          下面示例中，表示列表中的文件都会被TS编译器所编译
        */
        "files": [
                    "core.ts",
                    "sys.ts",
                    "types.ts",
                    "scanner.ts",
                    "parser.ts",
                    "utilities.ts",
                    "binder.ts",
                    "checker.ts",
                    "tsc.ts"
                  ]
      }

  • compilerOptions：编译器的选项
    • 编译选项是配置文件中非常重要也比较复杂的配置选项
    • 在compilerOptions中包含多个子选项，用来完成对编译的配置
      • 项目选项
        • target

          {
            "compilerOptions": {
              // target用来指定ts被编译为的ES版本
              // "es3","es5","es6","es2015","es2016","es2017","es2018",……,"esnext"(最新的es版本)
              "target": "ES2022"
            }
          }

        • module

          {
            "compilerOptions": {
              // module用来指定要使用的模块化的规范
              // "none","commonjs","amd","system","umd","es6","es2015","es2020","esnext"(最新的es版本)
              "module": "es6",
            }
          }

        • lib

          {
            "compilerOptions": {
              // lib用来指定项目中要用的库，一般在浏览器环境下不需要配置lib，使用默认情况就好
              // ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......
              "lib": ["ES6", "DOM"],
            }
          }

        • outDir

          {
            "compilerOptions": {
              // outDir用来指定编译后文件所在的目录
              // 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
              "outDir": "./dist"
            }
          }

        • outFile

          {
            "compilerOptions": {
              // outFile用来将代码合并成一个文件
              // 默认将所有的全局作用域中的代码会合并到同一个文件中
              // 如果module制定了None、System或AMD则会将模块一起合并到文件之中
              "outFile": "./dist/app.js"
            }
          }

        • allowJs

          {
            "compilerOptions": {
              // 是否对js文件编译
              // 默认值为false
              "allowJs": true
            }
          }

        • checkJs

          {
            "compilerOptions": {
              // 是否对js文件进行检查
              // 默认值为false
              // 一般checkJs配置与allowJs配置同时出现，都为true或都为false
              "checkJs": true
            }
          }

        • removeComments

          {
            "compilerOptions": {
              // 是否对js文件进行检查
              // 默认值为false
              "removeComments": true
            }
          }

        • noEmit

          {
            "compilerOptions": {
              // 不生成编译后的文件
              // 默认值为false
              "noEmit": true
            }
          }

        • noEmitOnError

          {
            "compilerOptions": {
              // 当有错误时，不生成编译后的文件
              // 默认值为false
              "noEmitOnError": true
            }
          }

        •  strict

          {
            "compilerOptions": {
              // 所有严格检查的总开关
              // 默认值为false
              "strict": true
            }
          }

        • alwaysStrict

          {
            "compilerOptions": {
              // 用来设置编译后的文件是否使用严格模式
              // 默认值为false
              "alwaysStrict": true
            }
          }

        • noImplicitAny

          {
            "compilerOptions": {
              // 不允许隐式的any类型
              // 默认值为false
              "noImplicitAny": true
            }
          }

        • noImplicitThis

          {
            "compilerOptions": {
              // 不允许不明确类型的this
              // 默认值为false
              "noImplicitThis": true
            }
          }

        • strictNullChecks

          {
            "compilerOptions": {
              // 严格检查空值
              // 默认值为false
              "strictNullChecks": true
            }
          }