deno.com
本页内容

TypeScript 支持

TypeScript 是 Deno 中的一等公民语言,就像 JavaScript 或 WebAssembly 一样。您无需安装除 Deno CLI 之外的任何其他内容即可运行或导入 TypeScript。凭借其内置的 TypeScript 编译器,Deno 会将您的 TypeScript 代码编译为 JavaScript,而无需额外的配置。Deno 还可以对您的 TypeScript 代码进行类型检查,而无需像 tsc 这样的单独类型检查工具。

类型检查 跳转到标题

TypeScript 的主要优势之一是它可以使您的代码类型安全,在开发期间而不是运行时捕获错误。TypeScript 是 JavaScript 的超集,这意味着语法上有效的 JavaScript 会变成 TypeScript,并带有关于“不安全”的警告。

注意

Deno 默认以 strict mode 模式检查 TypeScript 类型,TypeScript 核心团队 建议将 strict mode 作为合理的默认设置

Deno 允许您使用 deno check 子命令来类型检查您的代码(而不执行它)

deno check module.ts
# or also type check remote modules and npm packages
deno check --all module.ts
# code snippets written in JSDoc can also be type checked
deno check --doc module.ts
# or type check code snippets in markdown files
deno check --doc-only markdown.md

注意

类型检查可能需要大量时间,尤其是在您处理的代码库中进行大量更改时。Deno 优化了类型检查,但仍然需要付出代价。因此, 默认情况下,TypeScript 模块在执行之前不会进行类型检查

当使用 deno run 命令时,Deno 将跳过类型检查并直接运行代码。为了在执行之前对模块执行类型检查,您可以使用带有 deno run--check 标志

deno run --check module.ts
# or also type check remote modules and npm packages
deno run --check=all module.ts

当 Deno 在使用此标志时遇到类型错误时,进程将在执行代码之前退出。

为了避免这种情况,您需要

  • 解决问题
  • 使用 // @ts-ignore// @ts-expect-error pragmas 忽略错误
  • 或完全跳过类型检查。

在测试您的代码时,默认情况下启用类型检查。如果需要,您可以使用 --no-check 标志跳过类型检查

deno test --no-check

与 JavaScript 一起使用 跳转到标题

Deno 运行 JavaScript 和 TypeScript 代码。在类型检查期间,Deno 默认情况下只会类型检查 TypeScript 文件。如果您也想类型检查 JavaScript 文件,您可以添加 // @ts-check pragma 到文件顶部,或者将 compilerOptions.checkJs 添加到您的 deno.json 文件中。

main.js
// @ts-check

let x = "hello";
x = 42; // Type 'number' is not assignable to type 'string'.
deno.json
{
  "compilerOptions": {
    "checkJs": true
  }
}

在 JavaScript 文件中,您不能使用 TypeScript 语法,例如类型注解或导入类型。但是,您可以使用 TSDoc 注释向 TypeScript 编译器提供类型信息。

main.js
// @ts-check

/**
 * @param a {number}
 * @param b {number}
 * @returns {number}
 */
function add(a, b) {
  return a + b;
}

提供声明文件 跳转到标题

当从 TypeScript 代码导入未类型化的 JavaScript 模块时,您可能需要为 JavaScript 模块提供类型信息。如果 JavaScript 使用 TSDoc 注释进行了注解,则这不是必需的。如果没有这种额外的类型信息(以 .d.ts 声明文件的形式),TypeScript 将假定从 JavaScript 模块导出的所有内容都是 any 类型。

tsc 会自动拾取与 js 文件同级且具有相同基本名称的 d.ts 文件。Deno 不会这样做。 您必须在 .js 文件(源)或 .ts 文件(导入器)中显式指定在哪里可以找到 .d.ts 文件。

在源代码中提供类型 跳转到标题

应该首选在 .js 文件中指定 .d.ts 文件,因为这使得从多个 TypeScript 模块中使用 JavaScript 模块更容易:您不必在每个导入 JavaScript 模块的 TypeScript 模块中都指定 .d.ts 文件。

add.js
// @ts-self-types="./add.d.ts"

export function add(a, b) {
  return a + b;
}
add.d.ts
export function add(a: number, b: number): number;

在导入器中提供类型 跳转到标题

如果您无法修改 JavaScript 源代码,则可以在导入 JavaScript 模块的 TypeScript 模块中指定 .d.ts 文件。

main.ts
// @ts-types="./add.d.ts"
import { add } from "./add.js";

这也适用于不提供类型信息的 NPM 包

main.ts
// @ts-types="npm:@types/lodash"
import * as _ from "npm:lodash";

为 HTTP 模块提供类型 跳转到标题

通过 HTTP 托管 JavaScript 模块的服务器也可以在 HTTP 标头中为这些模块提供类型信息。Deno 将在类型检查模块时使用此信息。

HTTP/1.1 200 OK
Content-Type: application/javascript; charset=UTF-8
Content-Length: 648
X-TypeScript-Types: ./add.d.ts

X-TypeScript-Types 标头指定 .d.ts 文件的位置,该文件为 JavaScript 模块提供类型信息。它相对于 JavaScript 模块的 URL 解析,就像 Location 标头一样。

浏览器和 Web Worker 的类型检查 跳转到标题

默认情况下,Deno 类型检查 TypeScript 模块,就好像它们在 Deno 运行时的主线程中运行一样。但是,Deno 还支持浏览器类型检查、Web Worker 类型检查以及组合浏览器-Deno 环境的类型检查,例如在使用 Deno 进行 SSR(服务器端渲染)时。

这些环境具有不同的全局对象和可用的 API。Deno 以库文件的形式为这些环境提供类型定义。TypeScript 编译器使用这些库文件为这些环境中可用的全局对象和 API 提供类型信息。

可以使用 deno.json 配置文件中的 compilerOptions.lib 选项,或者通过 TypeScript 文件中的 /// <reference lib="..." /> 注释来更改加载的库文件。建议在 deno.json 配置文件中使用 compilerOptions.lib 选项来指定要使用的库文件。

要为 浏览器环境 启用类型检查,您可以在 deno.json 配置文件中的 compilerOptions.lib 选项中指定 dom 库文件

deno.json
{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

这将为浏览器环境启用类型检查,为 document 等全局对象提供类型信息。但这将禁用 Deno 特定的 API(如 Deno.readFile)的类型信息。

要为组合的 浏览器和 Deno 环境 启用类型检查,例如使用 Deno 进行 SSR,您可以在 deno.json 配置文件中的 compilerOptions.lib 选项中同时指定 domdeno.ns(Deno 命名空间)库文件

deno.json
{
  "compilerOptions": {
    "lib": ["dom", "deno.ns"]
  }
}

这将为浏览器和 Deno 环境启用类型检查,为 document 等全局对象和 Deno 特定的 API(如 Deno.readFile)提供类型信息。

要为 Deno 中的 Web Worker 环境 启用类型检查(即使用 new Worker 运行的代码),您可以在 deno.jsoncompilerOptions.lib 选项中指定 deno.worker 库文件。

deno.json
{
  "compilerOptions": {
    "lib": ["deno.worker"]
  }
}

要在 TypeScript 文件中指定要使用的库文件,您可以使用 /// <reference lib="..." /> 注释

/// <reference no-default-lib="true" />
/// <reference lib="dom" />

增强全局类型 跳转到标题

Deno 在 TypeScript 中支持环境或全局类型。这在填充全局对象或使用其他属性增强全局作用域时很有用。您应尽可能避免使用环境或全局类型,因为它们可能导致命名冲突,并使代码更难以理解。将代码发布到 JSR 时也不支持它们。

要在 Deno 中使用环境或全局类型,您可以使用 declare global 语法,或加载增强全局作用域的 .d.ts 文件。

使用 declare global 增强全局作用域 跳转到标题

您可以在项目中导入的任何 TypeScript 文件中使用 declare global 语法,以使用其他属性增强全局作用域。例如

declare global {
  interface Window {
    polyfilledAPI(): string;
  }
}

这使得 polyfilledAPI 函数在导入类型定义时全局可用。

使用 .d.ts 文件增强全局作用域 跳转到标题

您还可以使用 .d.ts 文件来增强全局作用域。例如,您可以创建一个包含以下内容的 global.d.ts 文件

interface Window {
  polyfilledAPI(): string;
}

然后,您可以使用 /// <reference types="./global.d.ts" /> 在 TypeScript 中加载此 .d.ts 文件。这将使用 polyfilledAPI 函数增强全局作用域。

或者,您可以在 deno.json 配置文件的 compilerOptions.types 数组中指定 .d.ts 文件

{
  "compilerOptions": {
    "types": ["./global.d.ts"]
  }
}

这也将使用 polyfilledAPI 函数增强全局作用域。

您找到所需的信息了吗?

隐私政策