TypeScript Academy · 课时

用于类型断言的 as 关键字

Q: 「用于类型断言的 as 关键字」这节课中我会学到什么？

使用 as 有意覆盖推断出的类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 as 有意覆盖推断出的类型。

用于类型断言的 as 关键字 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

什么是类型断言

类型断言会告诉编译器：“请相信我，我知道这个值的类型是 T。”您可以使用as关键字：value as Type。它改变的是类型检查器对值的看法，而不是值本身。

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

类型断言语法

先写表达式，再写as，最后写目标类型。还有一种较旧的尖括号语法，但更推荐使用as，因为它在所有地方都适用，包括 JSX/TSX 文件。

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

断言不会改变运行时行为

这一点非常关键：断言是仅在编译时生效的指令。代码运行时会将它们擦除。不会发生转换或验证——如果断言错误，运行时值不会改变，并且可能导致异常行为。

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

断言何时有效

TypeScript 只允许在存在重叠的类型之间直接断言，也就是其中一种类型可以赋值给另一种类型。您可以将unknown断言为string，也可以在相关类型之间进行拓宽或缩窄。

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

无效的直接断言

如果两种类型完全没有重叠，TypeScript 会拒绝直接断言，因为这很可能是错误。例如，直接将string断言为number就会被阻止。

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

使用类型断言缩窄联合类型

一种常见且有效的用法是：当您掌握了编译器不知道的信息时，将联合类型的值断言为其中一个成员。请谨慎使用，因为运行时检查通常更安全。

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

断言 DOM 元素类型

一个经典的实际用例是：DOM 查询会返回 broad 类型，例如HTMLElement | null。当您知道具体元素是什么时，可以将其断言为相应类型，以访问该元素特有的属性。

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

为何需要 DOM 断言

DOM API 无法知道您将获得哪种具体元素，因此会返回通用类型。断言为具体的子类型（例如HTMLInputElement）后，就可以使用value或checked等属性。

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

常量断言是特殊情况

您已经见过as const。这是一种特殊断言，会使值深度只读，并使用字面量类型。它是唯一始终安全的断言，因为它只会进行缩窄。

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

断言会绕过安全检查

由于断言会告诉编译器停止检查，因此责任转移到了您身上。错误的断言可能隐藏真正的类型错误，直到运行时发生崩溃。只有在您确实比编译器掌握更多信息时，才应使用断言。

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

优先使用缩窄而不是断言

可以使用运行时缩窄（类型守卫）时，请优先选择它，而不是断言。缩窄能够证明类型，断言只能声称类型。请将as保留给缩窄无法表达的情况，例如 DOM 特化。

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

快速检查

检验您对类型断言的理解。

回顾：类型断言

您已学会：

value as Type会告诉编译器将某个值视为给定类型。
断言仅在编译时生效——不会进行运行时转换或检查。
断言只允许用于存在重叠的类型之间。
常见的有效用法包括缩窄unknown以及特化 DOM 元素类型。可以缩窄时，请优先使用缩窄。

接下来介绍非空断言运算符。

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

常见问题解答

「用于类型断言的 as 关键字」课时是免费的吗？

是的 — 「用于类型断言的 as 关键字」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「用于类型断言的 as 关键字」这节课中我会学到什么？

使用 as 有意覆盖推断出的类型。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「用于类型断言的 as 关键字」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy