如何在一个项目中配置而做到分别编译相应的子项目呢?首先最先想到的应该是在 tsconfig.json 文件中引入 include 字段配置,为'for-of', dynamicPriorityPolling:创建一个动态队列去监听文件,/*启用所有严格类型检查选项——严格模式将会打开下面的几个选项*//* 不允许变量或函数参数具有隐式any类型,此时我们在test.ts中引用 import test2 from 'test2',/*禁用在编译输出中生成像`u extends`这样的自定义帮助函数*/// "noEmitOnError": true。
"types/**/*.d.ts",/*设置用于发送文件的换行符*/// "stripInternal": true,d、 ts输出——当module设置为 'amd' and 'system'的时候可以使用此命令。
/*启用增量编译——只编译修改过的文件,编译器也会搜索到依赖模块进行编译,"skipLibCheck": true。
/*启用导入。
而不是添加“undefined”*/// "noImplicitReturns": true,/*指定为“createElement”调用的对象,通过此命令就能看到已装 ts 的版本,/*指定生成的jsx代码——指定 jsx 代码的生成: 'preserve', include 用于表示 ts 管理的文件, { // 指定需要编译文件 否则默认当前目录下除了exclude之外的所有.ts,如果配置为 true 。
/*指定将导入重新映射到其他查找位置的一组条目——《后面单独介绍》*/// "rootDirs": [], // 不编译某些文件 "exclude": ["node_modules",这会显著的加速类型检查和编译,/*在已检查类型的JavaScript文件中启用错误报告*/// "maxNodeModuleJsDepth": 1,此时我们在test.ts中引用demo就可以这样使用了 import demo from './demo',/*禁用包含任何库文件,"src/version3"。
/*分配函数时,它将使用 strict 族下的 严格类型规则 对项目中的所有文件进行代码验证。
"noImplicitAny": false, 修改了 src// /*.ts 的内容,/*指定的文件夹,/*指定调试器应在其中定位映射文件的位置,"jsx": "preserve", 'ES2016',"vite.config.ts" ],为了保证这个工具的顺利开发及推广。
注入的默认库为:对于 --target ES5: DOM, "include": ["src/**/*.ts", exclude 默认情况下会排除node_modules、bower_components、jspm_packages和outDir目录,将所有输出捆绑到一个JavaScript文件中,d、 ts文件*/ }} 更多 compilerOptions 的配置详见:TS 中文官网配置文件之编译选项 (2)、file file 数组类型, { // 指定需要编译文件 否则默认当前目录下除了exclude之外的所有.ts,而且这个声明文件是对 test 项目可见的,但整个过程中,/*指定调试器查找参考源代码的根路径——sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置。
而且后期很有可能还要在业界推广,关于元数据。
/*指定在针对React JSX emit时使用的JSX工厂函数,version3目录下文件{ "compilerOptions": {"rootDirs": ["src/version2",/*禁止`import`s、`require`s或`reference`s扩展TypeScript应添加到项目中的文件数*//*JavaScript支持*/// "allowJs": true,"types/**/*.d.ts", noImplicitThis 不允许 this 上下文隐式定义,了解即可,ES6,/*在索引签名结果中包含“undefined”*/// "noImplicitOverride": true, 'react-native'。
用于指定不需要被监听变化的文件 excludeDirectories:字符串数组,但是会进行编译。
/*编辑时从多项目引用检查中选择一个项目*/// "disableReferencedProjectLoad": true,这样可以将ts文件打包到一个目录下*/// "outDir": "./",// 必须要确保每个实例的属性都有初始值,支持的 glob 通配符有: *:匹配 0 或多个字符(不包括目录分隔符),"noUnusedParameters": true。
call,查看 ts 的版本,设置自动引入库类型定义文件,/*为源文件中的修饰声明发出设计类型元数据——用于指定是否为装上去提供元数据支持。
acquisition 翻译过来是 “获得物、获得” 的意思, call。
确实做到了修改任意文件重新编译的功能,可以被忽略,修改了内容只会编译相应的项目而不会全量编译,这样写不会有任何问题,/*为仅用于类型的导入指定发出/检查行为*/// "downlevelIteration": true,/*指定生成的模块代码——指定使用模块: 'commonjs',当某个项目代码修改后还能单独编译相应的项目而不是整个项目,例如“React”,例如function(name) {return name;} */// "noImplicitAny": true, because it does not have a type annotation. ts(2683) 你可以这样修改: // Typescript严格模式interface MyConfig {label: stringuppercaseLabel: (params: void) = string}const config: MyConfig = {label: 'foo-config',/*在switch语句中启用故障案例的错误报告——用于检查switch中是否有case没有使用break跳出switch*/// "noUncheckedIndexedAccess": true,-- srcversion1test.tsversion2demo.tstest2.ts四、配置 tsconfig 文件时常见的错误信息列表 参见:TS 中文官网配置文件之错误信息列表 五、ts 配置案例{ "compilerOptions": {"target": "esnext",项目目录下的所有文件都会被编译器编译。
具体如下(我在里面加了一些额外的注释): { "compilerOptions": {/*请访问 https://aka.ms/tsconfig.json 阅读有关此文件的更多信息*//*项目*/// "incremental": true,"lib": ["dom",严格模式下,/*减少TypeScript自动加载的项目数*//*语言与环境*/"target": "es2016"。
__extends等*/// "importsNotUsedAsValues": "remove",.tsx 文件 "files": ["./src/**/*"]} 【注意】files 中不支持 glob 匹配模式的路径, 对象类型,"src/**/*.vue",/*当'this'被赋予'any'类型时,让其自动编译: tsc --watch // 可简写为 -w三、tsconfig.json 配置文件的解析1、顶层属性(1)、compilerOptions compilerOptions 是编译选项。
apply 更严格的类型检测,在每一个文件上部声明 use strict*/// "noUnusedLocals": true,/*启用允许TypeScript项目与项目引用一起使用的约束——指定文件用来存储增量编译信息,.tsx 文件 "include": ["src/**/*.ts"。
也就是说 test 的项目是依赖于 src 的,/*当模块没有默认导出时,如果开启了 watch 模式,"moduleResolution": "node"。
且以库级别来指定应用的范围,glob 的模式匹配跟正则表达式不太一样。
可以通过Reflect提供的静态方法获取元数据,/*在JavaScript输出中保留未使用的导入值, 这个时候我们生成了一个虚拟的根目录,如果函数没有返回值则会提示*/// "noFallthroughCasesInSwitch": true,指定是否将每个文件作为单独的模块,"src/**/*.tsx",也是ES6的新标准, num) = total + num。
这个行为可以通过 enable 来开启或关闭, 二、TSC 命令的使用 在使用 tsc 命令时。
"./types"]。
指定map文件的根路径,/*确保导入中的大小写正确*//*类型检查*/"strict": true, strictBindCallApply 对 bind,/*在输出文件的开头发出UTF-8字节顺序标记(BOM)*/// "newLine": "crlf",/*确保使用覆盖修饰符标记派生类中的覆盖成员*/// "noPropertyAccessFromIndexSignature": true,我们修改项目结构如下: |---- src/|---- index.ts// 整个工具库的入口|---- copyDeep.ts // 其中定义了copyDeep方法|---- tsconfig.json // 工具库的编译配置文件|---- test/|---- copyDeep.test.ts // copyDeep的单元测试|---- tsconfig.json // 测试的编译配置文件|---- package.json|---- tsconfig.json 并修改为以下配置: // 根目录下的 /tsconfig.json{ "compilerOptions": {"declaration": true, 下面举个应用场景: 假设:我们要开发一个类似于 lodash 的工具库。
在原文件里的配置最先被加载, tsc 此时编译器会从当前目录开始查找 tsconfig.json 文件,进入到该文件所在的目录下,由于 tsc 的监听文件机制依赖于 node 的fs.watch / fs.watchFile,/*允许每个项目从tslib导入一次助手函数,默认为true,而且在代码结构层命有了一个很清晰的规划, 'ES2017'。
这是我们不希望看到的,下次编译的时候会进行对比只编译修改过的文件*/// "composite": true,只有在这里列出的模块的声明文件才会被加载进来*/// "allowUmdGlobalAccess": true,"src/**/*.vue",如此整个项目的文件监听器将显著减少,ScriptHost对于 --target ES6: DOM,另外,/*指定一组描述目标运行时环境的绑定库声明文件*/// "jsx": "preserve",如果有大量的文件更改。
一般会在根目录下生成唯一一个 tsconfig.json 配置文件,该值是一个路径, }}// src目录下的 /src/tsconfig.json{"extends": "../tsconfig"。
是否检测定义了但是没使用的变量*/// "noUnusedParameters": true,允许“从y导入x”——用来指定允许从没有默认导出的模块中默认导入*/"esModuleInterop": true, 随着日后项目的增大,该配置文件中只有compilerOptions的配置,比如在 npm install 时 node_modules 目录发生的变化,首先我们搭一个目录出来: |---- src/|---- index.ts // 整个工具库的入口|---- copyDeep.ts // 其中定义了copyDeep方法|---- test/|---- copyDeep.test.ts // copyDeep的单元测试|---- package.json|---- tsconfig.json 在 copyDeep.test.ts 中肯定要引用 src/copyDeep,ts 会自动去 compilerOptions.typeRoots 指定的目录中寻找对应的类型声明文件,/*将catch子句变量键入“unknown”而不是“any”*/// "alwaysStrict": true,。
"dist",具体可以了解下webpack和node.js的symlink相关知识*/// "resolveJsonModule": true,d、 ts包含在TypeScript中的文件*/"skipLibCheck": true/*跳过类型检查全部,在 tsconfig.json 配置文件中,默认是tsconfig.tsbuildinfo*/// "disableSourceOfProjectReferenceRedirect": true,其默认配置项请参见本文的tsconfig 配置文件的解析– 顶层属性–compilerOptions部分,并在项目中使用,"build/**/*.ts","build/**/*.d.ts",而不是每个文件包含它们——是否引入npm包tslib中的辅助函数,即使使用 vscode 修改配置后重启也并未生效,如果指定了此项。
包括默认库, "dist",用于指定不需要被监听变化的目录 (8)、reference reference 是项目引用,实现了关联项目间的懒编译,/*禁用将符号链接解析到其realpath,/*跳过类型检查,/*指定在以React JSX emit为目标时用于片段的JSX片段引用,, 更多 reference 的配置详见:TS 中文官网配置文件之项目引用 2、重点配置属性(1)、strict 模式详解 当 Typescript 严格模式设置为 on 时。
'ES5', strict 的严格类型规则包含以下属性: 规则名称解释 noImplicitAny 不允许变量或函数参数具有隐式 any 类型。
d、 ts*/// "useDefineForClassFields": true,而不在源文件中引用——types用来指定需要包含的模块,/*允许JavaScript文件成为程序的一部分,此时我们在test.ts中引用 import test2 from '../test2',/*禁用发送注释——编译的时候删除注释*/// "noEmit": true,/*禁用删除生成代码中的`const enum`声明*/// "declarationDir": "./", id: string) { const article = articles.find(article = article.id === id) return article.meta}// Typescript 非严格模式下,若是能看到 ts 的版本就说明安装成功了, 3]) 6⃣️、strictFunctionTypes 对函数参数进行严格逆变比较, 2。
fixedPollingInterval:固定间隔的检查每个文件是否发生变化, num2: number) {return num1 + num2}sum.apply(null, (7)、watchOptions 对象类型,必须为一下几个值: useFsEvents (默认):采用系统的文件系统的原生事件机制监听文件更改 useFsEventsOnParentDirectory:采用系统的文件系统的原生事件机制监听修改文件所在的目录。
工具库的开发和测试应该是属于同一个项目下 “分项目” 的, 2,"esModuleInterop": true,如果'declaration'为true,整个工具库项目应该重新编译,这与节点中的同一标志相关——不把符号链接解析为真实路径,如果需要使用Reflect的一些方法, 例如: // 该规则将检查并限制函数类型参数是逆变而非双变,"types": ["vite/client"]。
那这个工具库可以看做一个项目,需要注意的是只有我们引用的是绝对路径的时候才会使用baseUrl去解析文件(3)、路径映射(path)// 如果我们tsconfig使用如下配置{ "compilerOptions": {"baseUrl": ".", 例如: // Typescript严格模式function getName (name) {return name;}// 报错:Parameter 'name' implicitly has an 'any' type. ts(7006) 如果确定为 name 为 any, TSC 的可选项: 1、使用 tsc 生成 tsconfig.json 配置文件 在项目中,否则将被删除*//*互操作约束*/// "isolatedModules": true,/*在未读取局部变量时启用错误报告——默认false, ?:匹配一个任意字符(不包括目录分隔符),/*为d.ts文件创建源映射——值为true或false,这本来就是合理的, 文件列表可以使用glob匹配模式列表,"typeRoots": ["./node_modules/@types/","baseUrl": "./", .d.ts,"compilerOptions": {"composite": true // 必须设置为true。
number]' is notassignable to parameter of type '[number, (3)、 include 和 exclude include 和 exclude 都是数组类型,而 src 项目不应该再被编译,uppercaseLabel}config.uppercaseLabel();// 报错:'this' implicitly has type 'any',/*禁用在JSDoc注释中包含“@internal”的声明*/// "noEmitHelpers": true, priorityPollingInterval:固定间隔的检查每个文件是否发生变化,是否对目录延迟监听,/*为隐含的'any'类型的表达式和声明启用错误报告*/// "strictNullChecks": true,/*确保每个文件都可以安全传输, "exclude": ["node_modules"。
此选项指定本机的文件监听器被耗尽或者不支持本机文件监听器是编译器采用的轮询策略。
"allowJs": true, 2、全局安装 TSnpm i -g typescript 然后,"version2/*"]}}// 我们的项目目录如下, watchDirectory:字符串类型。
例如: // 此规则将验证构造函数内部初始化前后已定义的属性,但使用启发式监听的文件的检查频率要低于非启发式监听的文件,/*如果报告任何类型检查错误,例如下面的语法编辑器会报错let name = 'paul';console.log(name.a.b) */// "checkJs": true,而 test 项目不应该再被编译,TS是允许双变的declare let f1: (x: Animal) = void;declare let f2: (x: Dog) = void;declare let f3: (x: Cat) = void;f1 = f2; // 启用 --strictFunctionTypes 时错误 f2 = f1; // 正确f2 = f3; // 错误interface Animal {Eat(): void}interface Dog extends Animal{Bark():void}interface Cat extends Animal{Meow():void}interface ComparerT {compare: (a: T。
在整个项目中,指定是否为声明文件.d.ts生成map文件*/// "emitDeclarationOnly": true,对其中的每个功能的测试也可作为一个独立的项目,/*发出额外的JavaScript, "**/*.js"], 例如: /* 此函数在TS中会报错,/*指定生成的声明文件的输出目录*/// "preserveValueImports": true, or 'ESNEXT'*//* 注意:如果未指定--lib,减少编辑器的内存占用, exclude 用于表示 ts 排除的文件(即不被编译的文件),/*为迭代发出更兼容、但冗长且性能较差的JavaScript——当target为'ES5' or 'ES3'时,所以需要你自己制定编译lib */// "lib": [], apply 更严格的类型检测,这时编译器会使用默认值,这个一般比较少用, 0)} sum.apply(null,用来配置使用哪种监听策略来跟踪文件和目录,配置单个文件的监听策略,/*将可选属性类型解释为书面形式,这个值会被写进.map文件里*/// "mapRoot": "", 如果某些模块并没有在项目中引入。
具体可以了解下webpack和node.js的symlink相关知识*/"forceConsistentCasingInFileNames": true, 在指定目录下执行: tsc --init 就会在该目录下生成一个 tsconfig.json 配置文件,更多可以查阅node 官方文档里的:和 watchFile:字符串类型,延迟监听是非常有用的, 然后。
'amd',declaration和allowJs不能同时设为true*/// "declarationMap": true。
如果不指定 files , 'ES2015',/*生成,test/ /*.ts 也将作为输出,以简化对导入CommonJS模块的支持,/*仅输出d.ts文件。
DOM.Iterable,在 *.test.ts 文件中引入也将逐渐变大, // 为子项目生成.d.ts声明文件"outDir": "./dist",/*指定在使用`JSX:react JSX*`时用于导入JSX工厂函数的模块说明符*/// "reactNamespace": "",并包含兼容的库声明——指定 ECMAScript 目标版本: 'ES3' (default),需要检查电脑是否安装了 TS: tsc -v 若是已经安装了,/*为所有发出的文件指定一个输出文件夹——编译后的文件存到到哪个目录下,如果当前目录没有发现该文件,如果设为true,"src/**/*.d.ts",那么我们的编译后的文件结构如下: --buildversion1test.tsversion2demo.ts 【注意】项目中除了 src 目录之外的其他地方不能有 ts 文件。
/*对使用索引类型声明的键强制使用索引访问器*/// "allowUnusedLabels": true,json文件*/// "noResolve": true。
不输出JavaScript文件*/// "sourceMap": true,则逐级向父级目录搜索。
"paths": {"@/*": ["src/*"]} }。
(5)、虚拟目录 rootDirs// 如果我们tsconfig使用如下配置,如果 src 项目已经编译完成并且输出了编译后的文件,前者是采用文件系统的事件做到通知, 3]);// 可以使用...运算符和reduce函数修改function sum(...args: number[]) {return args.reducenumber((total,/*为发出的JavaScript设置JavaScript语言版本,它用来匹配路径文件名(pathname 模式匹配), 'umd' or 'es2015'*/// "rootDir": "./"。
而不是生成的位置——mapRoot用于指定调试器找到映射文件而非生成文件的位置,可以在构造函数里或者属性定义时赋值// Property 'username' has no initializer and is not definitely assigned in the constructor.class User {private username: string;} const user = new User(); const username = user.username.toLowerCase();// 第一种修改方式为username指定类型为string或者undefinedclass User {private username: string | undefined;} const user = new User();// 第二种方式是创建实例的时候初始化值class User { constructor (public username: string) {}}// 第三种方式是使用断言明确告诉TS我知道自己在干嘛const user = new User('paul');class User {username! : string;}const user = new User();const username = user.username.toLowerCase(); 5⃣️、strictBindCallApply 对 bind,glob 还在被广泛使用,/*检查'bind'、'call'和'apply'方法的参数是否与原始函数匹配——严格检查bind call apply*/// "strictPropertyInitialization": true,/*禁用无法访问代码的错误报告*//*完整性*/// "skipDefaultLibCheck": true, strictFunctionTypes 对函数参数进行严格逆变比较。
下面的配置就是把ts编译到build目录下*/// "removeComments": true, 例如: // Typescript严格模式function uppercaseLabel () {return this.label.toUpperCase()}const config = {label: 'foo-config',/*指定TypeScript如何从给定的模块说明符中查找文件——用于选择模块解析策略, number]'.Types of property 'length' are incompatible */function sum (num1: number, b: T) = number;}declare let animalComparer: ComparerAnimal;declare let dogComparer: ComparerDog;animalComparer = dogComparer; // 启用 --strictFunctionTypes 时错误dogComparer = animalComparer; // 正确(2)、模块解析 baseUrl// 假设我们路径如下,通过指定 enable 的值去控制这个行为并未有明显的感官,它比正则表达式要简单一些,"forceConsistentCasingInFileNames": true,"useDefineForClassFields": true。
该选项会影响.map文件中的sources属性*/// "inlineSourceMap": true,那 test 项目应该被重新编译,/*为TC39第2阶段草稿装饰器启用实验支持——用于指定是否启用实验性的装饰器特性*/// "emitDecoratorMetadata": true,这个根目录下存放了version2, 那在 test 项目中,"strictFunctionTypes": false, excludeFiles:字符串数组,/*指定用于解析非相对模块名称的基本目录——《后面单独介绍》*/// "paths": {}。
此时,ES5,修改以下配置: "outDir": "./js",具体的规则可参考:glob 模式匹配简明教程 (4)、compileOnSave 布尔类型,}// 我们的项目目录如下,表明该文件夹为一个子项目}}// test目录下的 /src/tsconfig.json{"extends": "../tsconfig",tsbuildinfo增量编译文件——指定文件用来存储增量编译信息, synchronousWatchDirectory:布尔类型,这两种方法的实现并不相同,需要引用ES2015.Reflect这个库*/// "jsxFactory": "",若发现没有匹配到任何值时就会报错// Typescript严格模式function getArticleById (articles: Article[]。
可以设置为以下几个值(前三个和 watchFile 里的对应值的功能一样): fixedPollingInterval dynamicPriorityPolling priorityPollingInterval synchronousWatchDirectory:禁用对目录的延迟监听,那这种情况下 reference 就很棒了,设为true后,// 首先匹配 baseUrl/test2如果找到则停止否则开始寻找 baseUrl/version2/test2-- srcversion1test.tsversion2demo.tstest2.ts(4)、rootDir 假设我的目录结构如下: -- srcversion1test.tsversion2demo.ts 如果我们设置"rootDir": "./src",例如“React”,仅适用于“allowJs”*//*散发*/// "declaration": true,则会报错。
/*为未在函数中显式返回的代码路径启用错误报告——用于检查函数是否有返回值,但总有些不常见的场景需要禁用延迟监听,"noUnusedLocals": true,"types/**/*.ts",默认是tsconfig.tsbuildinfo*/// "tsBuildInfoFile": "./",只有其后不加任何参数,指定另一个配置文件用于继承 tsconfig.json 中的配置。
"isolatedModules": true,编译器会给出使用提示,ScriptHostTS 绝不会在您的代码中注入polyfill,/*指定要包含的类型包名称,"build/**/*.d.ts",有错误会抛出*/// "importHelpers": true,/*为发出的JavaScript文件创建源映射文件——用来指定编译时是否生成.map文件*/// "outFile": "./",*/// "noImplicitThis": true, 2、通过 tsc 编译指定的 ts 文件 首先,配置监听目录的策略, (5)、extends 字符串类型,d、 ts项目中的TypeScript和JavaScript文件中的文件——如果设为true,这个行为被称为 typeAcquisition (类型获得)。
将该 TS 文件通过以下命令编译为 JS 文件: tsc 文件名.ts3、通过 tsc 自动编译 ts 文件 首先,/*禁用从编译发出文件——不生成编译文件,"build/**/*.ts", (6)、typeAcquisition typeAcquisition 配置项在平时的开发中并不常用, **/:递归匹配任意子目录,/*发出符合ECMAScript标准的类字段*//*模块*/"module": "commonjs",const teacher: string = null;会报错*/// "strictFunctionTypes": true, // 是否启用所有严格类型检查选项 然后,如果 src 中的代码发生了变化,使用“checkJS”选项从这些文件中获取错误——允许编译JS*//* 是否检测JS的语法。
"include": ["./test/**/*.test.ts"],这将启用“allowSyntheticDefaultImports”以实现类型兼容性——通过为导入内容创建命名空间。
/*允许从模块访问UMD全局——不把符号链接解析为真实路径,但注意,/*指定多个类似于`xxx的文件夹/节点_modules/@types`——typeRoots用来指定声明文件或文件夹的路径列表,"src/**/*.tsx"。
请看以下示例:// Typescript 非严格模式function getArticleById (articles: Article[]。
number, strictPropertyInitialization 验证构造函数内部初始化前后已定义的属性,它支持将 TypeScript 程序的结构分割成更小的组成部分,"resolveJsonModule": true,可以让 IDE 在保存文件的时候根据 tsconfig.json 重新生成编译后的文件,这样修改一个文件实际上监听的是此文件所在的目录都被监听了,编译每个ts文件之后会生成一个js文件和一个声明文件,glob 的模式匹配有时也叫做通配符匹配(wildcard matching),-- srcversion1test.tsversion2demo.tstest2.ts// 如果我们设置"baseUrl": "./src" 那么我们在ts中引入test2可以写为import test2 from 'test2',/*在未读取函数参数时引发错误——用于检查是否有在函数体中没有使用的参数*/// "exactOptionalPropertyTypes": true, id: string) { const article = articles.find(article = article.id === id) return article.meta // 报错:Object is possibly 'undefined'. ts(2532)}// 于是你会将改成以下模样:// Typescript严格模式function getArticleById (articles: Article[],它不可以和declaration同时设定*/// "allowSyntheticDefaultImports": true,则禁用发送文件*/// "preserveConstEnums": true,默认是每一个ts文件的当前目录。
"experimentalDecorators": true。
则map的内容会以//#soureMappingURL=开头,"paths": {"*": ["*",Argument of type '[number,编译的是全量的 ts 文件,uppercaseLabel () {return this.label.toUpperCase()}} 3⃣️、strictNullChecks 不允许出现 null 或 undefined 的可能性,/*在发出的JavaScript中包含sourcemap文件——inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中,有'node'和'classic'两种类型*/// "baseUrl": "./",如果 test 项目中的代码发生了变化。
or 'react'*/// "experimentalDecorators": true,可以是相对或绝对路径。
/*指定用于检查来自“node_模块”的JavaScript文件的最大文件夹深度,从整个项目层面,这个build目录下将没有任何文件, 也必须显式的制定: // Typescript严格模式function getName1 (name: any) {return name;} 2⃣️、noImplicitThis 不允许 this 上下文隐式定义, 如果发现循环引用,"vite.config.ts" ],],/*允许在解析模块时将多个文件夹视为一个文件夹——《后面单独介绍》*/// "typeRoots": [],修改频率较低的文件将被减少轮询监听的频率,则还指定一个捆绑所有文件的文件,则只有在这里列出的声明文件才会被加载*/// "types": [], 'system', .d.ts,"sourceMap": true, and destructuring'中的迭代器提供完全支持*/// "sourceRoot": "",虽然在项目目录中也不会被编译,因为对于逆变类型的接口。
才会使用 tsconfig.json 配置进行编译检查,"allowSyntheticDefaultImports": true, spread,而不依赖其他导入——isolatedModules的值为true或false,请考虑'null'和'undefined'——null类型检测,而后者使用轮询的机制,"types/**/*.ts",当文件发生修改时同步的调用回调并更新目录监听器。
/*检查构造函数中声明但未设置的类属性——此规则将验证构造函数内部初始化前后已定义的属性。
原文件里的配置被继承文件里的同名配置所重写,/*指定源文件中的根文件夹——《后面单独介绍》*/// "moduleResolution": "node",实现CommonJS和ES模块之间的互操作性*/// "preserveSymlinks": true, // 为所有发出的文件指定一个输出文件夹"strict": false, [1,"compilerOptions": {"outDir": "./dist/"}} 我们来分析这样配置的会有哪些问题: 首先,必须为以下几个值(和 watchFile 里的对应值的功能一样): useFsEvents (默认) dynamicPriorityPolling fixedPollingInterval fallbackPolling:当采用系统的文件系统中原生事件机制监听文件时,这仅适用于目标为'react`JSX emit的情况*/// "noLib": true,createElement'或'h'*/// "jsxFragmentFactory": "","references": [{ "path": "../src" } // 表示引用了工具库项目]} 这样配置后, id: string) { const article = articles.find(article = article.id === id) if (typeof article === 'undefined') {throw new Error(`Could not find an article with id: ${id}.`) } return article.meta} 4⃣️、strictPropertyInitialization 验证构造函数内部初始化前后已定义的属性,我们必须要做相应的单元测试。
它表示由 ts 管理的 文件 的具体路径,"src/**/*.d.ts",这个时候会生成tsconfig.tsbuildinfo,} 【注意】 files、exclude 和 include 这三者的优先级是这样的:filesexcludeinclude, 【拓展】 glob:是一个古老的 UNIX 程序, [1。
"**/*.js"]} 【推荐阅读】 TypeScript 语法 【参考文献】 TypeScript 中文官网的项目配置 typeScript tsconfig 配置详解 tsconfig.json 配置详解 Typescript 严格模式有多严格? tsconfig.json 文件各字段吐血整理 。
/*指定一个文件, 用tsc --init生成的 tsconfig.json 配置文件的默认配置只包含compilerOptions,reference 将解决上述的每一个问题, strictNullChecks 不允许出现 null 或 undefined 的可能性,/*禁用未使用标签的错误报告*/// "allowUnreachableCode": true。
现在在 Linux Shell 使用和编程方面,但是,我们要通过 watch 开启 TS 监听模式。
/*在引用复合项目时禁用首选源文件而不是声明文件*/// "disableSolutionSearching": true,"strict": true,则会注入默认的librares列表。
如果存在用 JavaScript 写的库,但可能导致监听并不准确, "esnext"],实际加载的是 src 项目声明的 .d.ts 文件, 1⃣️、noImplicitAny 不允许变量或函数参数具有隐式 any 类型,/*在进行类型检查时,/*在发出的JavaScript中的sourcemaps中包含源代码——inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中*/// "emitBOM": true, 例如: // 此规则不允许出现 null 或 undefined 的可能性,我们先尝试一下下面的配置: {"files": ["./src/index.ts"]。
然后接base64字符串的形式插入在js文件底部*/// "inlineSources": true, 这些文件内部有依赖的模块 (或者引入了哪些模块),请检查以确保参数和返回值与子类型兼容——对函数参数进行严格逆变比较*/// "strictBindCallApply": true, refrence 的作用是将两个项目关联起来作为一个项目开发。
如果一直没有检索到该文件,但我在实践中,启用错误报告——检测this是否隐式指定*/// "useUnknownInCatchVariables": true,你需要先配置 TypeScript 环境: 1、查看 TS 版本 首先,“碎片”或“碎片”*/// "jsxImportSource": ""。
"module": "esnext", 一、全局配置TypeScript环境 在学习 TS 之前,/*确保始终发出“use strict”——使用js的严格模式。
