TypeScript配置、tsconfig.json配置文件，TypeScript使用详解 |
您所在的位置：网站首页 › 初始化配置文件 › TypeScript配置、tsconfig.json配置文件，TypeScript使用详解 |
TypeScript配置、tsconfig.json配置文件，TypeScript使用详解
|
关于TypeScript
TypeScript 中文官网：https://www.tslang.cn TypeScript 英文官网：https://www.typescriptlang.org 2、TypeScript的安装 可用命令行的TypeScript编译器可以使用Node.js包来安装。 全局安装 如：npm install -g typescript 局部安装 如：npm i typescript 3、文件编译(生成对应的.js文件)在TypeScript安装成功后，会得到两个可执行文件（命令） tsc //TypeScript编译器tsserver //TypeScript独立服务器（用于提供语言服务，如：自动补全，导航，检查，重构等） 在要编译ts文件的目录中打开DOS命令行工具，输入 tsc ts文件名 回车 如：tsc xxx.ts 注：回车后系统会在当前目录，自动编译并生成一个对应文件名的js文件，也可以在后面指定要输出的目录。 4、监听ts文件(更新对应的js文件)注：如果我们每修编写或修改一次ts文件，就要去执行一次编译命令的话，这可是一件很繁琐的事情，此时我们可以通过监听到ts文件有变化时，自动编译并生成、更新js文件） (1)、以前的做法：1、在生成的tsconfig.json文件中，把 “outDir”: “./js”, 的注释取消，并指定输出js文件在当前路径下的js目录中 2、【注：这是在项目第一次的时候要操作的】在vsCode中选择终端菜单 -> 配置任务 -> 在弹出的列表中向下滑动选择 -> tsc:构建 - xx项目名/tsconfig.json 3、在vsCode中选择终端菜单 -> 运行任务 -> 在弹出的列表中选择 -> tsc:监视 - xx项目名/tsconfig.json 4、运行后系统会自动生成一个js目录，编译并生成一个对应的js文件，这个文件就是标准的、浏览器能识别的、能解析的js文件啦! 5、现在你修改ts文件时，系统会自动同步到对应的js文件中 (2)、现在的做法： * 监听单个ts文件 如：tsc xxx.ts -w * 监听xxx目录下所有的ts文件 如：tsc 注：直接在xxx目录下执行tsc命令【前提是：xxx目录下要有tsconfig.json 配置文件才行！！！】 5、创建TpyeScript配置文件（初始化tsconfig.json 文件）配置tsconfig.json是在项目开发中是必须要做的一件事情，尤其是在项目是由多人协同开发时，这将起到很好的规范作用！在tsconfig.json配置文件中，许多配置选项控制着从哪里寻找ts源文件、监测、输出等控制着语言本身的核心方面。 当然在编译时再添加关相的配置也行：(但不建议这样做) 如：tsc – onImplicitAny xxx.ts 在项目根目录中（在前端工程中，就是在src/目录，和package.js同级），打开Dos命令工具 执行如下命令： 如：tsc -init 命令执行后会自动生成一个tsconfig.json 的配置文件。 6、tsconfig.json 配置文件明说 { "compilerOptions": { /* 访问 https://aka.ms/tsconfig.json 以阅读有关此文件的更多信息 */ /* 基本选项 */ "incremental": true, /* 启用增量编译 */ "target": "ESNEXT", /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 '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'。 */ "declaration": true, /* 生成相应的“.d.ts”文件。 */ "declarationMap": true, /* 为每个对应的“.d.ts”文件生成一个源映射。 */ "sourceMap": true, /* 生成相应的“.map”文件。 */ "outFile": "./", /* 连接输出到单个文件。 */ "outDir": "./", /* 将输出结构重定向到目录。 */ "rootDir": "./", /* 指定输入文件的根目录。用于通过 --outDir 控制输出目录结构。 */ "composite": true, /* 启用项目编译 */ "tsBuildInfoFile": "./", /* 指定文件存放增量编译信息 */ "removeComments": true, /* 不要向输出发出注释（删除除代码注释）。 */ "noEmit": true, /* 不发出输出（不生成编译后的文件）。 */ "noEmitOnError": true, /* 在输出js代码时，如果有错将不编译文件。 */ "importHelpers": true, /* 从 'tslib' 导入发射助手。 */ "downlevelIteration": true, /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解构中的迭代提供全面支持。 */ "isolatedModules": true, /* 将每个文件转换为一个单独的模块（类似于 'ts.transpileModule'）。 */ /* 严格的类型检查选项 */ "strict": true, /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */ "strictNullChecks": true, /* 启用严格的空（undefined、null）检查，可以防止“未定义不是对象”。 建议开启*/ "strictFunctionTypes": true, /* 启用函数类型的严格检查。 */ "strictBindCallApply": true, /* 在函数上启用严格的“绑定”、“调用”、应用”方法。 */ "strictPropertyInitialization": true, /* 启用对类中属性初始化的严格检查。 */ "noImplicitThis": true, /* 使用隐含的“any”类型在“this”表达式上引发错误。 */ "noImplicitAny": true, /* 使用隐含的“any”类型在表达式和声明上引发错误（主要用于控制变量、参数是否必须知道它们的类型【类型检查】），如果是将JavaScript迁移到TypeScript时，可以关闭此项，但不建议这样做。 */ "alwaysStrict": true, /* 以严格模式解析并为每个源文件发出“使用严格”。 */ /* 额外检查 */ "noUnusedLocals": true, /* 报告未使用的本地人的错误。 */ "noUnusedParameters": true, /* 报告未使用参数的错误。 */ "noImplicitReturns": true, /* 不是函数中的所有代码路径都返回值时报告错误。 */ "noFallthroughCasesInSwitch": true, /* 在 switch 语句中报告失败情况的错误。 */ /* 模块分辨率选项 */ "moduleResolution": "node", /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */ "baseUrl": "./", /* 解析非绝对模块名称的基目录。 */ "paths": {}, /* 一系列将导入重新映射到相对于“baseUrl”的查找位置的条目。 */ "rootDirs": [], /* 根文件夹列表，其组合内容代表运行时项目的结构。 */ "typeRoots": [], /* 包含类型定义的文件夹列表。 */ "types": [], /* 类型声明文件要包含在编译中。 */ "allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */ "esModuleInterop": true, /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */ "preserveSymlinks": true, /* 不解析符号链接的真实路径。 */ "allowUmdGlobalAccess": true, /* 允许从模块访问 UMD 全局变量。 */ /* 源映射选项 */ "sourceRoot": "", /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置。 */ "mapRoot": "", /* 指定调试器应该定位映射文件而不是生成位置的位置。 */ "inlineSourceMap": true, /* 发出带有源映射的单个文件而不是单独的文件。 */ "inlineSources": true, /* 在单个文件中与源映射一起发出源； 需要设置“--inlineSourceMap”或“--sourceMap”。 */ /* 实验选项 */ "experimentalDecorators": true, /* 启用对 ES7 装饰器的实验性支持。 */ "emitDecoratorMetadata": true, /* 为装饰器的发射类型元数据启用实验性支持。 */ /* 高级选项 */ "skipLibCheck": true, /* 跳过声明文件的类型检查。 */ "forceConsistentCasingInFileNames": true /* 禁止对同一文件的大小写不一致的引用。 */ } } 7、TypeScript中的数据类型在TS中为使编写的代码更加规范、更有利于维护，故增加了数据类型校验！！ 类型名称实例描述string字符串‘xxx’，“xxx”任意字符number数字1，-6，28.3任意数字object对象{ key: value }js对象boolean布尔true，false真、假array数组[1, 2, 3]js 数组tuple元组[123, ‘666’, false]Tuple 它属性于 数组类型中的一种enum枚举enum { A, B=‘123’}从0开始，如果没有给标识符赋值时，那标识符的值为对应所以的下标！any任意类型*任意类型（注：如果都用any，那TS的类型系统就失去意义了）unknown顶级类型*类型安全的any，每当想使用 any 时，应该先试着用 unknownnever没有值其他类型它包括 null 和 undefined 两种类型，代表从来都不会出现的值void空值undefined在ts中void表示没有任何类型，一般在定义方法的时候，而方法没有返回值时用null是一个数nullnull值的类型可能是：null 或 number 或 undefinedundefined不明确的var xxx; let xx; const: xxx常、变量已声明，但没赋任何值not defined未定义xxx连常、变量都没声明字面量字面量其本身定义常、变量时，不加类型限制（TS会隐式的加上）注：当把类型看作是值的集合时，any 和 unknown 是包含所有值的集合，因为 any 和 unknown 在 TypeScript 中是所谓的“顶部类型”。 而：unknown 类型是 any 的类型安全版本。每当你想使用 any 时，应该先试着用 unknown。 在：any 允许我们做任何事的地方，unknown 的限制则大得多。 8、TypeScript的错误处理在TypeScript项目开发中，遇到有报错时，不用害怕（尤其是刚接触TypeScript的小伙伴们，可能还会对使用TypeScript产生抵触心理）当逐渐上手之后，就会体会到就是因为TypeScript提前告知我们在开发时的不足而带来的好处。 所以当遇到有报错时，首先要区分是什么错，再根据不同的错误信息来做对应的处理，从大范围可分为以下3种错误形式： 业务逻辑错误（与代码无关）。TypeScript类型检查没有通过。TypeScript编译没有通过。 |
【本文地址】
今日新闻 |
推荐新闻 |