tsc 指令,ts配置
# tsc 指令
- 生成tsconfig.json配置文件
tsc --init
- 用watch来动态检测ts文件的变化 并动态编译
tsc -w
简单理解
编译上下文就是告诉ts哪些文件是可以被编译的,以及使用什么样的编译选项进行输出。使用tsconfig.json文件定义编译上下文。
# ts配置
- 执行tsc指令会编译tsconfig.json定义的最近的一个项目。也可以传递你想要编译的文件名tsc xxx.ts。
- 需要全局安装Typescript才能直接使用tsc指令,只在某个项目中安装了使用npx tsc
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* 启用增量编译 */
// "composite": true, /* 是否编译构建应用项目. */
// "tsBuildInfoFile": "./", /* 指定要安装的文件夹。tsbuildinfo增量编译文件。 */
// "disableSourceOfProjectReferenceRedirect": true, /* 在引用复合项目时,禁用首选源文件而不是声明文件。 */
// "disableSolutionSearching": true, /* 忽略(编辑器对于)复合项目中的引用/跳转,提高响应能力 */
// "disableReferencedProjectLoad": true, /* 禁用所有项目的自动加载(如果项目较大,ts会将所有可用项目加载到内存中,开启此功能,仅会动态加载编辑器打开的文件) */
/* Language and Environment */
"target": "es2016", /* target 用于指定编译以后的版本目标version: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES7'/'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNext':始终构建成最新的es版本标准 . */
"lib": [
"es6",
"dom"
], /* lib 用于指定要包含在编译中的库文件,如果要使用一些es6的新语法,你需要引入es6这个库,或者也可以写成es2015 */
// "jsx": "preserve", /* 指定js代码用于的开发环境,preserve | react-native | react. */
"experimentalDecorators": true, /* experimentalDecorators的值为true | false 用于指定是否启用实验性的装饰器特性*/
// "emitDecoratorMetadata": true, /* emitDecoratorMetadata 的值为true | false 用于指定是否为装饰器提供元数据支持,关于元数据 es6的新标准,通过 Reflect 提供的静态方法获取元数据, 如果使用Reflect,需要引入ES2015.Reflect*/
// "jsxFactory": "", /* 指定jsx编译时的工厂函数 e.g. 'React.createElement' or 'h' */
// "jsxFragmentFactory": "", /* 指定jsx对空标签的编译 e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* 指定使用'JSX:react JSX时用于导入JSX工厂函数的模块说明符*` */
// "reactNamespace": "", /* 指定createElement目标React调用的对象,默认为React */
// "noLib": true, /* 禁用包含任何库文件,开启后lib失效. */
// "useDefineForClassFields": true, /* 定义类字段,TS与最新TC39语法语法相同,但运行时行为不同。适用于ES2022和ESNext. */
/* Modules */
"module": "commonjs", /* 用来指定要使用的模块标准,none | commonjs | amd | system | umd | es2015 | or esnext .*/
// "rootDir": "./", /* 用来指定编译文件的根目录,编译器会在根目录查找入口文件,如果编译器发现以rootDir的值作为根目录查找入口文件并不会把所有文件夹在进去的话会报错,但是不会停止编译 */
// "moduleResolution": "node", /* moduleResolution 用于选择模块解析策略,有node和classic(TypeScript 1.6 发布前使用) 两种类型 */
// "baseUrl": "./", /* baseUrl 用于设置解析非相对模块名称的基本目录,相对模块不会受baseUrl的影响. */
"paths": {
"*": ["./node_modules/@types", "./typings/*"]
}, /* paths 用于设置模块名到基于baseUrl的路径映射. */
// "rootDirs": [], /* rootDirs 可以指定一个路径列表。在构建时编译器会将这个路径列表的路径中的内容都放在一个文件夹中. */
// "typeRoots": [], /* typeRoots 用来指定声明文件/文件夹的路径列表,如果指定了此项,则只有在这里列出的文件才会被加载. */
// "types": [], /* 指定加载的声明文件包 . */
// "allowUmdGlobalAccess": true, /* 允许模块访问UMD变量 */
// "resolveJsonModule": true, /* 允许导入json文件 */
// "noResolve": true, /* 禁止检查 `import`s, `require`s or `<reference>`导入的文件类型. */
/* JavaScript Support */
// "allowJs": true, /* allowJs 设置的值为true | false用来指定是否允许编译JS文件,默认是false,即不编译JS文件. */
// "checkJs": true, /* checkJs的值为true | false 用来指定检查和报告JS文件中的错误,默认是false. */
// "maxNodeModuleJsDepth": 1, /* 指定用于从node_module检查JavaScript文件的最大文件夹深度。仅适用于' allowJs: true'. */
/* Emit */
// "declaration": true, /* declaration的值为true | false 用于指定是否在编译的时候生成相应的[.d.ts]声明文件,如果设置为true,编译每个ts文件以后会生成一个js文件和一个声明文件,但是declaration 和 allowJs不能同时设置为true. */
// "declarationMap": true, /* 值为true|false,指定是否为声明文件.d.ts 生成map文件 */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* souceMap的值为true | false 用来指定编译时是否生成map文件. */
// "outFile": "./", /* outFile用于指定将输出文件合并为一个文件,它的值为一个文件路径吗,比如设置为“./dist/main.js” 则输出的文件是main.js 文件 但是需要注意,只有设置module 的值为 amd 或者system模块时才支持这个配置. */
// "outDir": "./", /* outDir 用来指定输出文件夹,值作为一个文件夹路径字符串,输出的文件都将放置在这个文件夹中. */
// "removeComments": true, /* removeComments 值为true | false 用于指定是否将编译后的文件中的注释删掉,设为true的话立即删除掉,默认false. */
// "noEmit": true, /* 不生成编译文件,一般很少用 */
// "importHelpers": true, /* importHelpers的值为true | false, 指定是否引入tslib里面的辅助函数,默认false. */
// "importsNotUsedAsValues": "remove", /* 当target 为es5或者es3的时候,为for-of, spread 和destructuring 中的迭代器提供完全支持 */
// "downlevelIteration": true, /* 允许更加准确的转换为低版本js代码(会导致代码量过多). */
// "sourceRoot": "", /* sourceRoot 用于指定调试器应该找到typeScript文件而不是源文件位置,这个值会被写入map文件. */
// "mapRoot": "", /* mapRoot 用于指定调试器找到映射文件 而非生成文件位置,指定map文件的根路径,该选项会影响.map文件中的source属性. */
// "inlineSourceMap": true, /* inlineSourceMap的值为true | false 指定是否将map文件的内容和js文件编译在同一个文件中,如设置为true,则map的内容会以//# sourceMappingURL = 然后接base64字符串的形式插入到js文件底部. */
// "inlineSources": true, /* inlineSources的值为true | false 用于指定是否进一步将.ts文件的内容也包含到输出文件中. */
// "emitBOM": true, /* 编译后文件写入UTF-8字节顺序标记(最好不要开启,除非有充分理由). */
// "newLine": "crlf", /* 指定编译文件的换行符,可选参数 crlf, lf */
// "stripInternal": true, /* 允许禁用在JSDoc注释中包含' @internal '的声明. */
// "noEmitHelpers": true, /* 允许禁用tslib中的辅助函数,但需要自己实现相关函数. */
// "noEmitOnError": true, /* 允许报告了类型错误不再进行编译 */
// "preserveConstEnums": true, /* 允许保留常量枚举. */
// "declarationDir": "./", /* 指定声明文件的目录 . */
// "preserveValueImports": true, /* 在JavaScript输出中保留未使用的导入值,否则将被删除. */
/* Interop Constraints */
// "isolatedModules": true, /* isolatedModules 值为true | false, 指定是否将每个文件作为单独的模块,默认为true,他不可以和declaration 同时设置. */
// "allowSyntheticDefaultImports": true, /* allowSyntheticDefaultImports 的值为true | false 用来指定允许从没有默认导出的模块默认导入. */
"esModuleInterop": true, /* 通过导入内容创建命名空间,实现CommonJs 和ES模块的户操作性 */
// "preserveSymlinks": true, /* 不把符号链接解析为其真实路径,具体可以了解下webpack 和nodejs symlink. */
"forceConsistentCasingInFileNames": true, /* 开启区分大小写文件名 */
/* Type Checking */
"strict": true, /* strict的值为true| false, 用于指定是否启动所有类型检查,如果设置为true,则会同时开启下面这几个类型检查, 默认为false */
// "noImplicitAny": true, /* noImplicitAny 的值为true | false 如果我们没有为一些值设置明确的类型,编译器会默认认为这个值为any类型,如果将noImplicitAny设置为true, 则如果没有明确的类型会报错,默认值为false */
// "strictNullChecks": true, /* strictNullChecks 值为true | false, 当设置为true,`null` and `undefined` 不能赋值给非这两种类型的值,别的类型的值也不能赋值给他们,除了any类型 和 undefined 可以赋值给void类型. */
// "strictFunctionTypes": true, /* strictFunctionTypes 的值为true | false 用来指定是否使用函数参数双向协变检查. */
// "strictBindCallApply": true, /* strictBindCallApply 值为true | false 设置为true后会对bind,call 和apply 绑定方法的参数的检测是严格检测的. */
// "strictPropertyInitialization": true, /* strictPropertyInitialization 的值为true | false 设置为true后会对检查类的非undefined属性是否已经在构造函数中初始化,如果要开启这个. 需要同时开启 strictNullChecks 默认为false*/
// "noImplicitThis": true, /* 当this的表达式的值为any的时候 生成一个错误. */
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* alwaysStrict 的值为true | false 指定始终以严格模式检查每个模块,并且在编译后的js文件中加入 “use strict” 字符串,用来告诉浏览器是严格模式. */
// "noUnusedLocals": true, /* noUnusedLocals 的值为true | false 用于检查是否有定义了但是没有使用的变量 对于这个检测可以结合eslint 在书写代码的时候做提示,默认值false. */
// "noUnusedParameters": true, /* noUnusedParameters 的值为true | false 用于检查是否在函数体中没有使用的参数,结合eslint提示 默认false */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* noImplicitReturns 检查函数是否有返回值,设置为true后,如果函数没有返回值则会提示,默认false. */
// "noFallthroughCasesInSwitch": true, /* noFallthroughCasesInSwitch 的值为true | false 用于检测switch中是否有case,没有使用break,跳出switch, 默认false. */
// "noUncheckedIndexedAccess": true, /* 开启索引签名中包含undefined */
// "noImplicitOverride": true, /* 开启子类覆盖父类方法事,需添加override,否则报错 */
// "noPropertyAccessFromIndexSignature": true, /* 开启获取索引签名对象的key时,未定义进行报错 */
// "allowUnusedLabels": true, /* 禁用未使用标签的错误报告 . */
// "allowUnreachableCode": true, /* 开启允许永远不会执行的代码(开启后,if else 的之后不会执行的代码不会进行报错). */
/* Completeness */
// "skipDefaultLibCheck": true, /* 跳过默认库的声明文件类型检查. */
"skipLibCheck": true /* 跳过 .d.ts 声明文件的类型检查. */
},
// "files": [], // files 配置成一个数组列表,里面包含指定文件的相对路径或绝对路径,编译器在编译的时候只会编译包含在files中列出来的文件,如果不指定,则取决于有没有设置include这个选项,如果没有include选项,则默认会编译根目录以及所有子目录的文件,这里列出来的路径必须是指定文件,而不是某个文件夹,而且不能使用*? **/ 等通配符
// "include": [], //include 指定要编译的路径列表,但是和files的区别在于,这里的路径可以是文件夹,也可以是文件,可以使用相对和绝对路径,而且可以使用通配符,比如“./src“即表示要编译src文件夹下的所有文件以及子文件夹的文件
"exclude": ["./dist "], // exclude 排除路径列表,规则和include一样
// "extends": "", // extends 可以通过指定一个其他的tsconfig.json文件路径,来继承这个配置文件里的配置,继承来的文件会覆盖当前文件定义的配置,TS在3.2版本开始,支持继承来自一个Node.js 包的tsconfig.json 配置文件
// "compileOnSave": true, // compileOnSave的值是true or false 如果设置为true,在我们编译的项目文件保存的时候,编译器会根据tsconfig.json的配置重新生成文件,不过这个要编译器支持
// "references": [] // 一个对象数组,指定要引入的项目
}