TypeScript编译环境和tsconfig.json文件 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript环境声明

编译上下文是一组TypeScript文件的术语，这些文件将进行解析和分析，以确定哪些是有效的，哪些是无效的。编译上下文包含有关使用哪些编译器选项的信息。我们可以使用tsconfig.json文件来定义TypeScript文件的逻辑分组。

我们可以使用tsc <文件名>.ts命令编译TypeScript文件。当我们使用’$tsc’命令编译TypeScript代码时，编译器会在tsconfig.json文件中搜索加载配置，TypeScript还提供了在大型项目中编译多个.ts文件的选项。

tsconfig.json文件

tsconfig.json文件是json格式的文件，在tsconfig.json文件中，我们可以指定各种选项告诉编译器如何编译当前项目。

任何新TypeScript项目的第一步都是添加tsconfig.json文件。要创建tsconfig.json文件先打开要存储源文件的文件夹，并添加一个名为tsconfig.json的新文件。

我们可以通过以下方式之一编译typescript项目:

• 通过调用没有输入文件的tsc: 在这种情况下，在父目录链之后的当前目录中开始，编译器将搜索tsconfig.json文件。
• 通过不使用输入文件和——project(或-p)命令调用tsc：在这种情况下，编译器指定包含tsconfig.json文件的目录的路径，它还指定了包含配置的有效.json文件的路径。

创建tsconfig.json文件

我们可以创建一个tsconfig.json文件，通过使用以下命令在项目的根文件夹中创建。

$ tsc --init                   

如果我们执行上面的命令，一个默认的tsconfig.json文件将被创建。

{    
  "compilerOptions": {    
    "declaration": true,    
    "emitDecoratorMetadata": false,    
    "experimentalDecorators": false,    
    "module": "none",    
    "moduleResolution": "node",    
    "noFallthroughCasesInSwitch": false,    
    "noImplicitAny": false,    
    "noImplicitReturns": false,    
    "removeComments": false,    
    "sourceMap": false,    
    "strictNullChecks": false,    
    "target": "es3"    
  },    
  "compileOnSave": true    
}  

包含和排除属性

包含和排除属性允许我们使用数组模式从编译过程中添加或删除TypeScript文件列表。

{  
    "compilerOptions": {  
        "module": "system",  
        "noImplicitAny": true,  
        "removeComments": true,  
        "preserveConstEnums": true,  
        "outFile": "../../built/local/tsc.js",  
        "sourceMap": true  
    },  
    "include": [  
        "src/**/*"  
    ],  
    "exclude": [  
        "node_modules",  
        "**/*.spec.ts"  
    ]  
}  

compilerOptions属性

我们可以使用compilerOptions自定义编译器选项属性，它允许为typescript编译器指定额外的选项。下表总结了一些重要的编译器选项。

要查看编译器选项的完整列表，请转到官方页面。

compileOnSave

它是用来设置IDE来编译所包含的TypeScript文件并自动生成输出的属性。它向IDE发出信号，生成给定tsconfig的所有文件。json在储蓄。

{  
   "compileOnSave": true,  
   "compilerOptions": {  
       "noImplicitAny" : true  
   }  
}