1.简介
JavaScript 的运行环境(浏览器和 Node.js)不认识 TypeScript 代码。所以,TypeScript 项目要想运行,必须先转为 JavaScript 代码,这个代码转换的过程就叫做“编译”(compile)。
TypeScript 官方没有做运行环境,只提供编译器。编译时,会将类型声明和类型相关的代码全部删除,只留下能运行的 JavaScript 代码,并且不会改变 JavaScript 的运行结果。
因此,TypeScript 的类型检查只是编译时的类型检查,而不是运行时的类型检查。一旦代码编译为 JavaScript,运行时就不再检查类型了。
TypeScript 通过 delete 键变成 JavaScript。
2.检查安装TypeScript
-
查看当前项目的ts版本:
tsc --version
-
查看全局的ts版本:
npm view typescript version
-
安装TS
# 全局安装 npm install -g typescript # 或者在项目目录下安装局部版本 npm install --save-dev typescript
3.tsconfig.json
初始化 TypeScript 项目,通过初始化命令这将生成一个 tsconfig.json
文件,包含了 TypeScript 编译器的各种配置说明,该文件存在的目录是TypeScript项目的根目录。 tsconfig.json
文件指定了编译项目所需的根文件和编译器选项,可以以下官网找到详细配置说明
# 通过命令生成一个默认tsconfig.json文档
tsc --init
3.1.extends
extends
的值是一个字符串,其中包含要继承的另一个配置文件的路径。 路径可以使用Node.js风格的解析。你可以根据自己的node版本引用github.com/tsconfig/bases上针对各种版本写好的tsconfig.json基础文件(推荐、建议)配置来进行扩展。
"extends": "@tsconfig/node22/tsconfig.json"
# 具体的配置文件
{
"$schema": "https://json.schemastore.org/tsconfig",
"_version": "22.0.0",
"compilerOptions": {
"lib": ["es2023"],
"module": "node16",
"target": "es2022",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"moduleResolution": "node16"
}
}
3.2. include
and exclude
"include": ["src/**/*"],
"exclude": ["**/*.spec.ts"]
- include:该规则应用到的脚本范围
- exclude:排除的文件范围
include
和exclude
支持通配符来创建全局模式:*
matches zero or more characters (excluding directory separators)*
匹配零个或多个字符(不包括目录分隔符)?
matches any one character (excluding directory separators)?
匹配任何一个字符(不包括目录分隔符)**/
matches any directory nested to any level**/
匹配嵌套到任何级别的任何目录
3.3.references
references 选项用于定义 TypeScript 项目之间的依赖关系。这使得一个 TypeScript 项目可以引用另一个项目,并且在编译时会考虑被引用项目的输出,目前微服务大行其道,比如我们按功能模块化我们的项目,通过将一个大的项目拆分成多个较小的项目,每个子项目有自己的 tsconfig.json,那些共享的类型定义或工具库,可以将其放在单独的项目中,然后其他项目通过 references 引用它,当一个被引用的项目发生变化时,只需要重新编译那个项目,实现**增量编译
,而不是整个引用它的项目,看微服务
**这种高大上是不是前端也用上了,加载我们的项目结构:
client-workspace:这是工作区的根目录,包含全局的 tsconfig.json 和 angular.json 文件,这个和后端maven一模一样的玩法。
client-workspace/
├── tsconfig.json
├── angular.json
├── bee-components/
│ ├── src/
│ │ └── app/
│ │ └── app.component.ts
│ ├── tsconfig.app.json
│ └── …
├──prj-605-app/
│ ├── src/
│ │ └── lib/
│ │ └── shared.service.ts
│ ├── tsconfig.lib.json
│ └── …
└── …
root项目:client-workspace
// client-workspace/tsconfig.json
{
"extends": "@tsconfig/node22/tsconfig.json"
"compilerOptions": {
"composite": true,
"outDir": "./dist"
},
"references": [
{ "path": "./bee-components" },
{ "path": "./prj-605-app" }
]
}
共享组件库:bee-components(里面各种前端通用组件,树、表格、搜索框…)
// bee-components/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./dist",
"declaration": true,
"declarationMap": true
},
"include": ["src/**/*"]
}
具体项目A:某个具体的终端项目
// prj-605-app/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./dist",
"composite": true,
"module": "commonjs"
},
"references": [
{ "path": "../bee-components" }
],
"include": ["src/**/*"]
}
在这个例子中,prj-605-app项目通过 references 选项引用了 bee-components 项目。这意味着当 prj-605-app被编译时,TypeScript 编译器也会考虑 bee-components 的输出。
注意事项:
-
当使用 references 时,通常需要在主项目(prj-605-app)的 tsconfig.json 中设置 “composite”: true,这告诉 TypeScript 编译器这个项目是复合项目的一部分。
-
被引用的项目也需要有 tsconfig.json 文件,并且通常也需要设置 “declaration”: true 和 “declarationMap”: true,以便生成 .d.ts 文件和映射文件。
-
如果 prj-605-app 和 bee-components 在**
同一工作区
**中,那么它们可以通过相对路径来引用彼此,我们例子就属于同一个namespace -
如果它们位于不同的仓库中,你可能需要通过 npm 或 yarn 将 bee-components 安装到 prj-605-app 的 node_modules 目录下,并在 references 中使用正确的路径。
3.4.compilerOptions
compilerOptions该属性如果被省略,则直接使用extends引用的基础配置,如果设置了,则覆盖extends引用的基础配置,ts制定很多编译规则,可以大概看看,需要的时候去官网查询下资料
3.4.1.Projects
项目构建相关的选项
:该系列配置项都是 tsconfig.json 文件中与项目构建相关的选项,用于优化 TypeScript 项目的构建过程,特别是在涉及多个项目和增量编译的情况下。通过合理设置这些选项,可以显著提高构建效率。
incremental: Boolean
- 默认值: false
- 作用: 启用增量编译。当设置为 true 时,TypeScript 编译器会在第一次编译后生成一个 .tsbuildinfo 文件,该文件包含了上次编译的信息。在后续的编译过程中,编译器会利用这个文件来跳过那些没有更改过的文件的重新编译,从而加速构建过程。
- composite: Boolean
-
默认值: false
-
作用: 允许 TypeScript 项目与其他项目进行组合。当设置为 true 时,TypeScript 项目可以被其他项目引用,从而实现跨项目依赖管理。通常与 projectReferences 配合使用。
- tsBuildInfoFile: String
-
默认值: undefined
-
作用: 指定 .tsbuildinfo 文件的路径。这个文件用于存储增量编译的信息。如果未指定,则默认保存在项目的根目录下。
- disableSourceOfProjectReferenceRedirect: Boolean
-
默认值: false
-
作用: 当设置为 true 时,TypeScript 不再优先使用源文件(.ts 文件)来代替声明文件(.d.ts 文件)在项目引用中。这在某些情况下可以减少编译时间,尤其是在大型项目中。
- disableSolutionSearching: Boolean
-
默认值: false
-
作用: 当设置为 true 时,TypeScript 会禁用解决方案搜索。这意味着 TypeScript 不会在当前项目的父目录中查找其他 tsconfig.json 文件。这可以减少加载项目的时间,特别是在包含多个项目的大型解决方案中。
- disableReferencedProjectLoad: Boolean
-
默认值: false
-
作用: 当设置为 true 时,TypeScript 会减少自动加载的项目数量。这可以加快编译速度,尤其是在大型项目中。需要注意的是,这可能会导致某些项目依赖没有被正确加载。
3.4.2.Language and Environment
**
TypeScript 语言特性和环境相关的选项:
**TypeScript 语言特性和环境相关的选项,主要用于控制 TypeScript 代码的生成方式,包括目标 JavaScript 版本、JSX 处理方式、装饰器支持以及模块检测行为。通过合理设置这些选项,可以确保 TypeScript 代码能够正确地生成目标平台兼容的 JavaScript 代码
-
- 默认值: es5,可选值有 ‘es3’, ‘es5’, ‘es6’/ ‘es2015’, ‘es2016’, ‘es2017’, ‘es2018’, ‘es2019’, ‘es2020’, ‘es2021’, ‘esnext’,配置项的名称是大小写敏感的,必须严格按照官方标准来
- 作用: 设置生成的 JavaScript 代码的目标版本。例如,设置为 “es2016” 表示生成的 JavaScript 代码将兼容 ES2016 (es7)标准。这包括了 ES2016 中引入的新特性,现代浏览器支持所有ES6特性,所以
es6
是一个不错的选择。 如果您的代码部署到较旧的环境中,则可以选择设置较低的目标,如果代码保证在较新的环境中运行,则可以选择设置较高的目标.target
设置改变了哪些JS特性被降级,哪些保持不变。 例如,如果target
小于等于ES5,则箭头函数() => this
将转换为等效的function
表达式。特殊的ESNext
值指的是你的TypeScript版本所支持的最高版本。 这个设置应该谨慎使用,因为它在不同的TypeScript版本之间并不意味着相同的东西,并且会使升级变得更不可预测。
- 作用: 设置生成的 JavaScript 代码的目标版本。例如,设置为 “es2016” 表示生成的 JavaScript 代码将兼容 ES2016 (es7)标准。这包括了 ES2016 中引入的新特性,现代浏览器支持所有ES6特性,所以
- 默认值: es5,可选值有 ‘es3’, ‘es5’, ‘es6’/ ‘es2015’, ‘es2016’, ‘es2017’, ‘es2018’, ‘es2019’, ‘es2020’, ‘es2021’, ‘esnext’,配置项的名称是大小写敏感的,必须严格按照官方标准来
-
lib: Array<String>
-
默认值: 默认包含适用于目标版本的库文件。
- 作用: 指定一组捆绑的库声明文件,这些文件描述了目标运行时环境。例如,[“es2016”] 或 [“dom”, “scripthost”]。
-
-
experimentalDecorators: Boolean
-
默认值: false
- 作用: 启用对实验性装饰器的支持。装饰器是 TypeScript 的一个实验性特性,用于在类或类成员上添加元数据。
-
-
emitDecoratorMetadata: Boolean
-
默认值: false
- 作用: 发射设计类型的元数据,用于装饰的声明。这通常与 experimentalDecorators 配合使用。
-
3.4.3 module
这些配置项主要用于控制 TypeScript 项目中的模块解析行为,包括模块系统的类型、模块解析策略、路径映射、类型包的包含方式以及对特定文件类型的处理。通过合理设置这些选项,可以确保 TypeScript 代码能够正确地解析和生成目标平台兼容的 JavaScript 代码。
- module: String
- 默认值: commonjs
- 作用: 该选项用于指定模块解析方式。这决定了 TypeScript 如何处理模块导入和导出语句,并影响编译后的 JavaScript 代码的模块格式
- “commonjs”:指定使用 CommonJS 模块格式,适用于 Node.js 环境。
- “amd”:指定使用 AMD (Asynchronous Module Definition) 模块格式,适用于浏览器环境,尤其是在使用 RequireJS 之类的脚本加载器时。
- “system”:指定使用 SystemJS 模块格式,适用于浏览器环境,尤其是在使用 SystemJS 之类的脚本加载器时。
- “umd”:指定使用 UMD (Universal Module Definition) 模块格式,适用于需要同时支持 CommonJS 和 AMD 的环境。
- “esnext”:指定使用 ES Next (即最新的 ECMAScript) 模块格式,适用于现代浏览器和 Node.js 环境。
- “es2015”:指定使用 ES2015 (即 ES6) 模块格式,适用于现代浏览器和 Node.js 环境。
- “esnext.asynciterable”:指定使用带有异步迭代器的 ES Next 模块格式,适用于需要异步迭代器支持的现代浏览器和 Node.js 环境。
- 选择指南
- 对于 Node.js 环境:推荐使用 “commonjs” 或 “esnext”。
- 对于现代浏览器环境:推荐使用 “esnext” 或 “es2015”。
- 对于需要兼容多种环境:可以考虑使用 “umd”。
3.4.4.Emit
这些配置选项都是 tsconfig.json 文件中用来控制 TypeScript 编译器的输出行为的设置
-
declaration
-
作用:生成 .d.ts 文件。
-
描述:当设置为 true 时,TypeScript 编译器会为项目中的每个 TypeScript 文件生成相应的 .d.ts 文件,这些文件包含了类型信息,可以供其他项目引用。
-
-
declarationMap
- 作用:为 .d.ts 文件生成源映射。
- 描述:当设置为 true 时,TypeScript 编译器会为生成的 .d.ts 文件创建源映射文件,以便在调试时能够准确地定位到源代码。
-
importHelpers
-
作用:importHelpers 是一个 TypeScript 编译器的配置选项,用于控制是否允许从 tslib 库中一次性导入所有辅助函数。
-
用途: 当设置为 true 时,可以在整个项目中只从 tslib 库导入一次所有的辅助函数,而不是在每个需要这些辅助函数的文件中单独导入。
-
减少重复代码: 避免在多个文件中重复导入相同的辅助函数。
-
优化构建: 在大型项目中,这可以减少每个文件的导入语句数量,从而可能加速构建过程。
-
简化代码: 使得代码更加简洁,减少每个文件的顶部导入语句。
-
-
示例
假设你的项目中有多个文件使用了 tslib 中的 __extends 函数,通常你需要在每个文件中导入这个函数:// file1.ts import { __extends } from "tslib"; class BaseClass {} class DerivedClass extends BaseClass { constructor() { super(); } } // file2.ts import { __extends } from "tslib"; class AnotherBaseClass {} class AnotherDerivedClass extends AnotherBaseClass { constructor() { super(); } }
那么我们就可以在比如项目入口main.ts导入一次,全项目都可以用
// main.ts import "tslib"; // ... 其他代码
-
3.4.5.JavaScript Support
这些配置选项都是 tsconfig.json 文件中用来控制 TypeScript 编译器如何处理 JavaScript 文件的设置
- allowJs
- 作用:允许 JavaScript 文件被 TypeScript 编译器处理。
- 描述:默认情况下,TypeScript 编译器只处理 .ts 文件。如果你希望 .js 文件也能被编译器处理,可以将 allowJs 设置为 true。这样,.js 文件会被包含在编译过程中,但不会进行类型检查,除非另外配置。这对应迁移老项目非常有用。编译时,也会将 JS 文件,一起拷贝到输出目录。
- checkJs
- 作用:启用 JavaScript 文件的类型检查。
- 描述:当 allowJs 设置为 true 时,你可以进一步设置 checkJs 为 true 来启用 JavaScript 文件的类型检查。这会使得 TypeScript 编译器根据类型推断和其他类型检查规则来检查 JavaScript 文件中的错误。
4.编译单独ts文件
# 编译ts文件
tsc TestTreeNode.ts
# 运行编译后的js文件
node TestTreeNode.js
5.第三方编译ts
你还可以使用 nodemon 或 ts-node 等工具来自动编译和运行 TypeScript 文件。
# 安装ts-node 包
npm install -g nodemon ts-node
# 编译ts
nodemon --exec ts-node index.ts
6.玩TS工具
- vscode:纯前端,这个是主流,各种插件丰富。
- IDEA:适合后端人员玩,快捷键熟悉,IDE使用熟悉,VSCODE有的功能都有,而且避免工作的适合两个工具切换,妥妥的神器,俺最爱
- 设置可以写注释的JSON文件,绕过JSON语法检查