全局安装typescript
在命令行输入 npm install -g typescript 或者也可以使用cnpm。安装完成后,假设当前目录下有index.ts文件,在命令行输入tsc index.ts,便可在当前目录下得到index.js文件。
typescript的配置
如果相对编译后的文件做一定的细化限制,我们可以使用typescript的配置文件。使用方法很简单,在项目根目录下创建一个json文件,命名为tsconfig.json即可。配置说明如下
{ "compilerOptions": { "allowUnreachableCode": true, // 不报告执行不到的代码错误。 "allowUnusedLabels": false, // 不报告未使用的标签错误 "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句 "baseUrl": ".", // 工作根目录 "experimentalDecorators": true, // 启用实验性的ES装饰器 "jsx": "react", // 在 .tsx文件里支持JSX "sourceMap": true, // 是否生成map文件 "module": "commonjs", // 指定生成哪个模块系统代码 "noImplicitAny": false, // 是否默认禁用 any "removeComments": true, // 是否移除注释 "types": [ //指定引入的类型声明文件,默认是自动引入所有声明文件,一旦指定该选项,则会禁用自动引入,改为只引入指定的类型声明文件,如果指定空数组[]则不引用任何文件 "node", // 引入 node 的类型声明 ], "paths": { // 指定模块的路径,和baseUrl有关联,和webpack中resolve.alias配置一样 "src": [ //指定后可以在文件之直接 import * from 'src'; "./src" ], }, "target": "ESNext", // 编译的目标是什么版本的 "outDir": "./dist", // 输出目录 "declaration": true, // 是否自动创建类型声明文件 "declarationDir": "./lib", // 类型声明文件的输出目录 "allowJs": true, // 允许编译javascript文件。 "lib": [ // 编译过程中需要引入的库文件的列表 "es5", "es2015", "es2016", "es2017", "es2018", "dom" ] }, // 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件) "include": [ "src/**/*" ], // 指定一个排除列表(include的反向操作) "exclude": [ "demo.ts" ], // 指定哪些文件使用该配置(属于手动一个个指定文件) "files": [ "demo.ts" ] }
下面介绍一些常用的字段细节:
"baseUrl"
"baseUrl":"." 说明工作目录的根路径是tsconfig.json所在的目录,如果指定为"baseUrl":"src",则根路径为tsconfig.json所在的目录下的src目录
"target"
指定生成的js版本,默认为"ES3",其余选项为'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNEXT',“EXNEXT”包含最新的一些TC39标准提案,具体见 https://github.com/tc39/proposals
"module"
指定生成代码的模块类型,选项有'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 'ESNext'。
如果不指定,则由target字段决定,target为es3或者es5的时候,module的默认值为commonjs,当target为其他的值的时候,那么module的默认值为es6。
"types"
一个数组。如果指定了types
,只有被列出来的包才会被包含进来。 比如:
{ "compilerOptions": { "types" : ["node", "lodash", "express"] } }
这个tsconfig.json
文件将仅会包含 ./node_modules/@types/node
,./node_modules/@types/lodash
和./node_modules/@types/express
。/@types/。 node_modules/@types/*
里面的其它包不会被引入进来。
指定"types": []
来禁用自动引入@types
包。
注意,自动引入只在你使用了全局的声明(相反于模块)时是重要的。 如果你使用 import "foo"
语句,TypeScript仍然会查找node_modules
和node_modules/@types
文件夹来获取foo
包。
“lib”
一个数组,指定需要引入的库。如果--lib
没有指定默认注入的库的列表。默认注入的库为:
► 针对于--target ES5
:DOM,ES5,ScriptHost
► 针对于--target ES6
:DOM,ES6,DOM.Iterable,ScriptHost
其他配置值可参考: https://www.tslang.cn/docs/handbook/compiler-options.html
这些库主要是为原生的一些类型和api提供类型接口,注意尽量不要引入无用的库,比如写node项目就可以不需要引入DOM相关的库,避免编译时报错。
”include“
一个数组,该数组下的文件都会被编译,该字段可以使用通配符,而”files“字段中只能一个个文件指定,不能使用通配符。所以建议使用include而尽量少用files。
”exclude“
一个数组,与”include“字段相反,该数组内的文件不会被编译,可使用通配符。
小tips:命令行输入tsc --init会生成一个包含常用的配置的tsconfig.json文件。