十分钟了解 TypeScript 是怎样工做的

时间 2020-04-29

标签十分 10分了解 typescript 怎样繁體版

原文原文链接

做者：Dr. Axel Rauschmayer
翻译：疯狂的技术宅javascript

原文：https://2ality.com/2020/04/ty...html

未经容许严禁转载前端

本文概述了 TypeScript 的工做原理：典型的 TypeScript 项目的结构是什么？什么被编译以及怎样编译？咱们如何使用 IDE 编写 TypeScript？java

TypeScript项目的结构

如下是 TypeScript 项目的一种可能的文件结构：程序员

typescript-project/
  dist/
  ts/
    src/
      main.ts
      util.ts
    test/
      util_test.ts
  tsconfig.json

说明：面试

目录 ts/ 包含 TypeScript 文件：typescript
- 子目录 ts/src/ 包含实际代码。
- 子目录 ts/test/ 包含代码测试。
目录 dist/ 是编译器的输出位置。
TypeScript 编译器将诸如 ts/src/main.ts 之类的 TypeScript 文件编译为 JavaScript 文件 dist/src/main.js （可能还有其余文件）。
tsconfig.json 用于配置 TypeScript 编译器。

`tsconfig.json`

tsconfig.json tsconfig.json的内容以下：npm

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "module": "commonjs",
    ···
  }
}

咱们已指定：编程

TypeScript 代码的根目录是 ts/。
TypeScript 编译器保存其输出的目录为 dist/。
输出文件的模块格式为 CommonJS。

经过集成开发环境（IDE）编程 TypeScript

Visual Studio Code 是用于编写 TypeScript 代码的最受欢迎的 IDE 之一。为了更好地使用它，咱们须要了解 TypeScript 源代码是以两种独立的方式处理的：json

检查打开的编辑器是否存在错误：这是经过所谓的 language server 完成的。它们是与编辑器无关的方法，可为编辑器提供与语言相关的服务（检测错误、重构、自动完成等）。编辑器（例如IDE）经过特殊协议（JSON-RPC，即基于JSON的远程过程调用）与语言服务器进行通讯。这样一来，几乎能够用任何编程语言编写此类服务器。
- 要记住：language server 仅列出当前打开的编辑器的错误，且不编译 TypeScript，而是仅仅静态分析它。
Building（将 TypeScript 文件编译为 JavaScript 文件）：在这里，咱们有两个选择。
- 咱们能够经过命令行运行构建工具。例如，TypeScript 编译器 tsc 有 --watch 模式，该模式能够监视输入文件，并在更改文件时将其编译为输出文件。这样，每当咱们在 IDE 中保存 TypeScript 文件时，都会当即得到相应的输出文件。
- 咱们能够在 Visual Studio Code 中运行 tsc。为此，必须将其安装在咱们当前正在开发的项目内部或进行全局安装（经过 Node.js 包管理器 npm）。

经过构建，咱们能够得到完整的错误列表。有关在 Visual Studio Code 中编译 TypeScript 的更多信息，请参见该 IDE 的官方文档。

TypeScript 编译器生成的其余文件

给定 TypeScript 文件 main.ts，TypeScript 编译器能够产生几种工件。最多见的是：

JavaScript文件：main.js
声明文件：main.d.ts（包含类型信息）
源码映射文件：main.js.map

TypeScript 一般不是经过 .ts 文件提供的，而是经过 .js 文件和 .d.ts 文件提供：

JavaScript 代码包含实际的功能，能够经过普通 JavaScript 使用。
声明文件可帮助编程编辑者实现自动补全和相似的服务。此信息使普通 JavaScript 能够经过 TypeScript 使用。可是若是使用纯 JavaScript，咱们甚至会从中受益，由于它能够提供更好的自动完成以及更多功能。

源码映射为 main.js 中输出代码的每一部分指定在 main.ts 中的输入代码的哪一部分生成了它。除其余外，此信息使运行时环境可以执行 JavaScript 代码，同时在错误信息中显示 TypeScript 代码的行号。

为了使用 TypeScript 中的 npm 包，咱们须要类型信息

npm 注册表是一个巨大的 JavaScript 代码库。若是要使用 TypeScript 中的 JavaScript包，则须要类型信息：

软件包自己可能包含 .d.ts 文件，甚至完整的 TypeScript 代码。
若是没有，咱们仍然可使用它：DefinitelyTyped是人们为普通 JavaScript 包编写的声明文件的库。

DefinitelyTyped 的声明文件位于 @types 命名空间中。因此若是咱们须要像 lodash 这样的包的声明文件，则必须安装 @types/lodash 包。

将 TypeScript 编译器用于纯 JavaScript 文件

TypeScript 编译器还能够处理普通的 JavaScript 文件：

使用选项 --allowJs，TypeScript 编译器将输入目录中的 JavaScript 文件复制到输出目录中。好处：当从 JavaScript 迁移到 TypeScript 时，咱们能够先使 JavaScript 和 TypeScript 文件混合存在，而后再慢慢把更多 JavaScript 文件转换为 TypeScript 。
使用选项 --checkJs，编译器还会对 JavaScript 文件进行类型检查（必须启用 --allowJs 才能使该选项起做用）。鉴于可用信息有限，它会尽其所能。
若是 JavaScript 文件包含注释 //@ts-nocheck，则不会对其进行类型检查。
- 若是没有 --checkJs，注释 //@ts-check 可用于对单个 JavaScript 文件进行类型检查。
TypeScript 编译器使用经过 JSDoc 注释指定的静态类型信息（请参见下面的例子）。若是能够的话，咱们能够彻底静态类型化纯 JavaScript 文件，甚至能够派生它们的声明文件。
使用选项 --noEmit，编译器不会产生任何输出，它只会对文件进行类型检查。

This is an example of a JSDoc comment that provides static type information for a function add():
这是一个 JSDoc 注释的例子，它为函数 add() 提供静态类型信息：

/**
 * @param {number} x - A number param.
 * @param {number} y - A number param.
 * @returns {number} This is the result
 */
function add(x, y) {
  return x + y;
}

详细信息：《 TypeScript手册》中的 Type-Checking JavaScript Files。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...