翻译:疯狂的技术宅
作者:Dr. Axel Rauschmayer
来源:2ality
本文概述了 TypeScript 的工作原理:典型的 TypeScript 项目的结构是什么?什么被编译以及怎样编译?我们如何使用 IDE 编写 TypeScript?
以下是 TypeScript 项目的一种可能的文件结构:
typescript-project/
dist/
ts/
src/
main.ts
util.ts
test/
util_test.ts
tsconfig.json
说明:
ts/
包含 TypeScript 文件:ts/src/
包含实际代码。ts/test/
包含代码测试。dist/
是编译器的输出位置。ts/src/main.ts
之类的 TypeScript 文件编译为 JavaScript 文件 dist/src/main.js
(可能还有其他文件)。tsconfig.json
用于配置 TypeScript 编译器。tsconfig.json
tsconfig.json的内容如下:
{
"compilerOptions": {
"rootDir": "ts",
"outDir": "dist",
"module": "commonjs",
···
}
}
我们已指定:
ts/
。dist/
。Visual Studio Code 是用于编写 TypeScript 代码的最受欢迎的 IDE 之一。为了更好地使用它,我们需要了解 TypeScript 源代码是以两种独立的方式处理的:
tsc
有 --watch
模式,该模式可以监视输入文件,并在更改文件时将其编译为输出文件。这样,每当我们在 IDE 中保存 TypeScript 文件时,都会立即获得相应的输出文件。tsc
。为此,必须将其安装在我们当前正在开发的项目内部或进行全局安装(通过 Node.js 包管理器 npm)。通过构建,我们可以获得完整的错误列表。有关在 Visual Studio Code 中编译 TypeScript 的更多信息,请参见该 IDE 的官方文档(https://code.visualstudio.com/docs/typescript/typescript-compiling)。
给定 TypeScript 文件 main.ts
,TypeScript 编译器可以产生几种工件。最常见的是:
main.js
main.d.ts
(包含类型信息)main.js.map
TypeScript 通常不是通过 .ts
文件提供的,而是通过 .js
文件和 .d.ts
文件提供:
源码映射为 main.js
中输出代码的每一部分指定在 main.ts
中的输入代码的哪一部分生成了它。除其他外,此信息使运行时环境能够执行 JavaScript 代码,同时在错误信息中显示 TypeScript 代码的行号。
npm 注册表是一个巨大的 JavaScript 代码库。如果要使用 TypeScript 中的 JavaScript包,则需要类型信息:
.d.ts
文件,甚至完整的 TypeScript 代码。DefinitelyTyped 的声明文件位于 @types
命名空间中。所以如果我们需要像 lodash
这样的包的声明文件,则必须安装 @types/lodash
包。
TypeScript 编译器还可以处理普通的 JavaScript 文件:
--allowJs
,TypeScript 编译器将输入目录中的 JavaScript 文件复制到输出目录中。好处:当从 JavaScript 迁移到 TypeScript 时,我们可以先使 JavaScript 和 TypeScript 文件混合存在,然后再慢慢把更多 JavaScript 文件转换为 TypeScript 。--checkJs
,编译器还会对 JavaScript 文件进行类型检查(必须启用 --allowJs
才能使该选项起作用)。鉴于可用信息有限,它会尽其所能。//@ts-nocheck
,则不会对其进行类型检查。--checkJs
,注释 //@ts-check
可用于对单个 JavaScript 文件进行类型检查。--noEmit
,编译器不会产生任何输出,它只会对文件进行类型检查。这是一个 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 (https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html)。
原文链接
https://2ality.com/2020/04/typescript-workflows.html