丁鹿学堂前端培训干货: Typescript的自动编译配置

104 阅读2分钟

ts 实时编译单文件的方法 tsc xxx.ts -w

ts编译指定目录的方法:

1新建 文件 tsconfig.json
2文件配置

tsconfig.json本身是一个json文件。里面有很多配置项,我们要掌握和了解几个重点即可。

include 用来指定哪些ts文件需要被编译 ** 表示任意目录, 表示任意文件*

exclude 和include相反,表示指定ts文件不需要编译

compilerOptions编译配置:

    1. target: 编译的es的版本
    2. module:模块化解决方案选择
    3. lib 项目中需要用到哪些库,比如dom就看成一个库。一般采用默认(就是不配置这个项)
    4. outdir 指定编译的js文件的输出目录
    5. outfile 指定某个文件,会把全局的ts文件给编译合并成到一个js文件中
    6. allowJs 是否对js文件进行编译,默认是false
    7. checkJs 是否对js文件进行语法检查
    8. removeComments 编译后是否移除注释
    9. noEmit 默认false ,不生成编译后的文件
    10. noEmitOnError 有错误时不生成编译文件
    11. strict 是否开启严格检测,下面几个都有。建议设置为true
    12. alwaysStrict:编译后的js是否使用严格模式
    13. noImplicitAny 不允许使用隐式设置类型为any
    14. noImplicitThis 不允许使用不明确类型的this
    15. strictNullChecks 严格检查空值

附上代码示例:

{
/*
 include 用来指定哪些ts文件需要被编译  ** 表示任意目录,* 表示任意文件
 exclude 和include相反,表示指定ts文件不需要编译
*/
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES2015",  // ts 编译成es的版本  es2015就是es6
        "module": "ES2015", // 模块话编译的标准
//        "lib": ["dom"], // 使用到哪些库,默认不设置,了解
        "outDir": "./dist",
//        "outFile": "./dist/index.js", // 不常用,了解
        "allowJs": false, // 是否对js文件进行编译,默认就是false
        "checkJs": false, // 是否对js代码进行检查
        "removeComments": false, // 编译后是否移除注释
        "noEmitOnError": false, // 有错误时不生成编译文件
        "alwaysStrict": false,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "strictNullChecks": false,
    }
}