第二章、TS 的编译调试

kkty2008

已于 2024-08-23 16:33:55 修改

阅读量978

点赞数 9

分类专栏：前端开发之-TypeScirpt 文章标签： typescript

于 2024-08-23 16:30:56 首次发布

本文链接：https://blog.csdn.net/kkty2008/article/details/141468848

版权

前端开发之-TypeScirpt 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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.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 代码

target: String
- 默认值: 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版本之间并不意味着相同的东西，并且会使升级变得更不可预测。
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语法检查

kkty2008

关注

9
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
第二章、TS 的编译调试

JavaScript 的运行环境（浏览器和 Node.js）不认识 TypeScript 代码。所以，TypeScript 项目要想运行，必须先转为 JavaScript 代码，这个代码转换的过程就叫做“编译”（compile）。TypeScript 官方没有做运行环境，只提供编译器。编译时，会将类型声明和类型相关的代码全部删除，只留下能运行的 JavaScript 代码，并且不会改变 JavaScript 的运行结果。因此，TypeScript 的类型检查只是编译时的类型检查，而不是运行时的类型检查。
复制链接

扫一扫