Typescript编译常见选项

之前编写完ts后可以在命令行中输入tsc ts文件名，来编译生成js文件，当我们的ts文件更改的时候还是需要手动的通过命令来编译生成新的文件，此时就不太方便了，这个时候我们就需要 tsc  ts文件名 -w (watch：看，观察)，这条命令，让编译器自动观察ts文件的变动后进行自动编译，

此处我们使用上面的监视命令，发现了一个问题，一个命令窗口只能够监视一个ts文件，如果项目中ts文件有很多，可想而知这种方法是行不通的

此时我们希望有一个命令可以将所有的ts文件一次性编译而且同时监视

此时我们就需要用到一个配置文件tsconfig.json,

Tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的配置来对代码的编译

只要创建了该配置文件

在命令行输入 tsc ，就可以将全部文件编译

输入tsc -w就是监视所有文件，后面我们要讲解配置文件的

配置内容，

我们知道json文件类似于对象，最外层是一对花括号{}

1.  
   {
2.  
     /*
3.  
       tsconfig.json是ts编译器的配置文件，ts编译器根据它的配置来编译ts文件
4.  
       "include"用来指定哪些ts文件要进行编译
5.  
       "exclude"用来指定那些ts文件不需要进行编译，默认值 ["node_modules","bower_components","jspm_packages"]
6.  
       "extends"定义被继承的配置文件，也就是在多个json配置文件的时候，我们希望，只使用一个配置文件
7.  
       此刻我们就需要将其他的json配置文件引入进来，相当于import引入外部文件
8.  
       "files"指定被编译文件的列表，只能写文件名，所以只有在文件较少的情况下使用
9.  
       */
10.  
      // "include": ["./index.ts","./test.ts"]  //表示这两文件
11.  
      //一般使用下面的做法
12.  
      "include": ["./src/*"],  //'*'表示任意文件 。'**'表示任意目录
13.  
      // "exclude": ["./src/index.ts"],  //表示不对index.ts文件进行编译
14.  
      // "files": []
15.  
     
16.  
      /*
17.  
      compilerOptions编译器的选项
18.  
      1.target指定要编译的ts文件编译成什么版本的js，默认是ES3（原因是它老，所有的浏览器多兼容）,在ES3中会将let编译成var
19.  
      而在ES6版本中let将会编译成let，ESNext表示最新版本的ES
20.  
      2.module指定使用什么个是来进行，模块化，它有这几个值：'none', 'commonjs', 'amd',
21.  
       'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12',
22.  
       'nodenext'. es6与es2015是一样的
23.  
      3.lib(libary库)指定项目中要使用的库,一般情况下不需要去更改
24.  
      4.outDir指定编译后的文件所在的目录
25.  
      5.outFile可以将我们编译后的文件中的全局作用域的代码合并成一个文件
26.  
      如果要使多个模块合并在一个文件当中，模块module因为amd或system，其他的会报错
27.  
      一般我们不手动实现，我们通过打包工具来实现这个功能
28.  
      6.allowJs指定是否编译js文件，在任意文件当中* 如果我们模块使用js写的，那么我们需要
29.  
      将allowJs设置为true,默认为false
30.  
      7.checkJs检查js是否符合js语法,默认为false，checkJs与allowJs一般是一起用的
31.  
      8.removeComments是否移除注释，默认false
32.  
      9.noEmit编译但不产生编译后的代码，这个一般使用在不想使用tsc编译生成代码，只想使用它来
33.  
      检查一下代码是否有错，默认为false
34.  
      10.noEmitOnError指当有错误时不生成文件，默认为false
35.  
    11.alwaysStrict（strict严格的）js有一种严格模式，也就是比之前的语法更加严谨
36.  
      浏览器运行的效率更好，我们在单独的js文件中在文件开头部分添加一个“use strict”
37.  
      表示了我们开启了js的严格模式，而在ts中使用alwaysStrict来进行开启，默认为false
38.  
      12.noImplicitAny（implicit：隐式）检查隐式的any类型，我们不提倡使用any类型，更不提倡使用隐式的any
39.  
      此时我们可以将noImplicitAny改为true来对隐式的any类型进行检查
40.  
      13.noImplicitThis检查不明确的this类型，我们知道在单独的函数（也就是函数外边没有指定以的对象）时
41.  
      在函数体调用this,这个this指向window，当我们在指定以对象的里面调用this,此时这个this指向我们定义
42.  
      的对象，
43.  
      比如：
44.  
      function fn(this){
45.  
        alert(this)
46.  
      }
47.  
      若是函数是在指定义对象外调用，这this指向window
48.  
      若是函数是在指定义对象里面调用，这this指向这个对象
49.  
      此时我们可以在函数的形参部分进行声明明确的类型
50.  
      function fn(this: window){
51.  
        alert(this)
52.  
      }
53.  
      14.strictNullChecks 严格的检查空值，默认为false
54.  
      15.strict是所有严格检查的总开关，默认false，一般开发打开
55.  
      ......还有很多配置我们先讲解这些常用的，后面的配置遇到的时候
56.  
      在慢慢看
57.  
      */
58.  
      "compilerOptions": {
59.  
        "target": "ES6",
60.  
        "module": "system",
61.  
        // "lib": [],
62.  
        "outDir": "./dish",
63.  
        "outFile": "./dish/app.js",
64.  
        "allowJs": false,
65.  
        "checkJs": false,
66.  
        "removeComments": false,
67.  
        "noEmit": false,
68.  
        "noEmitOnError": true,
69.  
        "alwaysStrict": true,
70.  
        "noImplicitAny": true,
71.  
        "noImplicitThis": true,
72.  
        "strictNullChecks": true,
73.  
        "strict": false
74.  
      },
75.  
      },
76.  
     
77.  
     
78.  
    }

这篇好文章是转载于：学新通技术网