TypeScript（2）
如何使用VSCode自动编译TypeScript代码
在上一节中我们介绍了TypeScript的开发环境配置，并以一个实例展示了如何编译TypeScript代码为原生的JavaScript代码。在开发过程中，我们往往需要时时预览代码的效果，这就需要不断地对我们的TypeScript代码进行编译——让人窒息的操作。不过别慌，本文将使用一种方法自动地将TypeScript编译为JavaScript。
接着上一节。我们在"tscode"目录中建立子目录"02_autoCompile"以存放本节地内容。
打开终端，进入目录"02_autoCompile"：
cd .\02_autoCompile\
接着，使用如下命令创建编译的配置文件：
tsc --init
若文件成功被创建可以看到左侧的目录中生成了一个名为tsconfig.json的json配置文件，并提示信息：
Successfully created a tsconfig.json file.
如图所示：
打开该配置文件，其内容如下（为方便理解，已将英文注释替换成了中文）：
{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* 基本选项 */ // "incremental": true, /* 启用增量编译 */ "target": "es5", /* 指定ECMAScript目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT' */ "module": "commonjs", /* 指定模块代码生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 或者 'ESNext' */ // "lib": [], /* 指定要包含在编译中的库文件 */ // "allowJs": true, /* 允许编译javascript文件 */ // "checkJs": true, /* 在 .js 文件中报告错误 */ // "jsx": "preserve", /* 指定JSX代码生成: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ // "declaration": true, /* 生成相应的 '.d.ts' 文件 */ // "declarationMap": true, /* 为每个对应的'.d.ts'生成相应的sourcemap文件 */ // "sourceMap": true, /* 生成相应的 '.map' 文件 */ // "outFile": "./", /* 指定一个输出文件的文件名 */ // "outDir": "./", /* 重定向输出到该指定的目录 */ // "rootDir": "./", /* 为输入文件指定一个根目录. 使用--outDir选项以控制输出目录结构 */ // "composite": true, /* 使能（允许）项目编译 */ // "tsBuildInfoFile": "./", /* 指定一个文件以存储附加的编译信息 */ // "removeComments": true, /* 不向输出分发注释 */ // "noEmit": true, /* 不要分发输出. */ // "importHelpers": true, /* 从' tslib '导入分发帮助程序 */ // "downlevelIteration": true, /* 当以“ES5”或“ES3”为目标时，在“for-of”、“spread”和“destructuring”中为iterables提供完全支持 */ // "isolatedModules": true, /* 将每个文件作为一个单独的模块进行传输(类似于“ts.transpileModule”) */ /* 严格类型检查选项 */ "strict": true, /* 启用所有严格的类型检查选项 */ // "noImplicitAny": true, /* 在隐含'any'类型的表达式和声明中引发错误。 */ // "strictNullChecks": true, /* 允许严格的 null 校验 */ // "strictFunctionTypes": true, /* 允许对函数类型的严格校验 */ // "strictBindCallApply": true, /* 允许函数中严格的'bind', 'call', 和 'apply' 方法 */ // "strictPropertyInitialization": true, /* 允许对类中属性初始化的严格检查 */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* 在严格模式下解析，并为每个源文件发出"use strict" */ /* 附加校验 */ // "noUnusedLocals": true, /* 报告未使用的局部变量的错误 */ // "noUnusedParameters": true, /* 报告未使用参数的错误 */ // "noImplicitReturns": true, /* 当函数中并非所有代码路径都返回值时报告错误 */ // "noFallthroughCasesInSwitch": true, /* 在switch语句中报告失败案例的错误 */ // "noUncheckedIndexedAccess": true, /* 在索引签名结果中包含'undefined' */ // "noPropertyAccessFromIndexSignature": true, /* 需要索引签名中未声明的属性才能使用元素访问。 */ /* 模块解析选项 */ // "moduleResolution": "node", /* 指定模块解析策略: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* 解析非绝对模块名的基目录。 */ // "paths": {}, /* 一系列用于重新映射 import 以查找与'baseUrl'相关的位置的入口. */ // "rootDirs": [], /*根目录列表，其组合内容代表运行时（Runtime）项目的结构 */ // "typeRoots": [], /* 包含类型定义的文件夹列表 */ // "types": [], /* 要包含在编译中的类型声明文件*/ // "allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块默认导入。这不影响代码发出，只是类型检查 */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports' */ // "preserveSymlinks": true, /* 不要解析符号链接的真实路径 */ // "allowUmdGlobalAccess": true, /* 允许从模块访问UMD全局 */ /* 源映射选项 */ // "sourceRoot": "", /* 指定调试器应该定位类型脚本文件的位置，而不是源位置。 */ // "mapRoot": "", /* 指定调试器应该定位映射文件的位置，而不是生成的位置。 */ // "inlineSourceMap": true, /* 生成一个带有源映射的文件，而不是一个单独的文件。 */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; 需要'--inlineSourceMap' 或者 '--sourceMap' 测设定 */ /* 实验性选项 */ // "experimentalDecorators": true, /* 支持ES7装饰器的实验性支持，比如你想用装饰器等功能，则需要启用TypeScript实验性功能。 */ // "emitDecoratorMetadata": true, /* 启用对为装饰器发出类型元数据的实验支持。 */ /* 高级选项 */ "skipLibCheck": true, /* 跳过声明文件的类型检查。 */ "forceConsistentCasingInFileNames": true /* 不允许对同一文件进行大小写不一致的引用。 */ } }
为了文件更好地归类，我们希望生成的JavaScript都放在同一个子目录中，因此，我们取消对outDir的注释，并填写目录名如下：
"outDir": "./js",
这里指定的js目录我们不用手动创建，一但自动编译运行起来后，该目录将会自动生成。
如果我们不配置"outFile"选项，那么生成JavaScript文件的文件名与原TypeScript文件名保持一致，仅仅是后缀由".ts"变成了".js"。接下来，关闭JavaScript 严格模式。（严格模式下有诸多限制，如你不能使用未声明的变量等等。我们这里选择了关闭，你也可以选择使用严格模式）：
"strict": false,
修改后的配置文件如下：
{ "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "outDir": "./js", /* Redirect output structure to the directory. */ "strict": false, /* Enable all strict type-checking options. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES */ "skipLibCheck": true, /* Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ } }
接下来，就可以启动监视任务了，方法如下：
以此点击"Terminal -> Run Task"（若你安装了额外的中文插件则对应为"终端 -> 运行任务"），如图：
滚动到最下面，点击"Show All Task…"（中文插件对应为"显示所有任务"）
可以看到有这里有两个任务，一个是监视（watch）任务，一个是构建（build）任务，如图：
选择红框所圈出的"监视任务"。——接下来就可以自动编译代码了。此时终端已被启动，你将在终端中看到如下内容：
这里提示有error没有关系，只是因为我们还没有创建ts文件。
为了展示效果，接下来我们在"02——auto_Compile"目录下建立一个ts文件和一个Html文件，仍然采用上一节中的TypeScript代码。注意观察VSCode左侧目录变化以及终端输出内容的更新。
- 当我们建立好文件"anto_Com.ts"后（还未保存该文件代码），终端中提示检测到更改，js子目录被自动生成。
接下来使用"ctrl + S"保存以上ts代码，可以看到对应的js文件"“被自动地生成在了”./js"子目录中：
之后只要我们没有停止该监视任务，但凡是我们改动了项目目录中的ts文件，对应的同名js文件就会自动地生成或更改于"./ts"目录中。
如更改并保存：
对应的js文件便立即被自动地完成编译：
怎么样，是不是特别省事呢。喜欢的话记得点赞加关注哦！
