TypeScript Academy · 课时

类型扩展与收窄机制

Q: 「类型扩展与收窄机制」这节课中我会学到什么？

了解 TypeScript 如何扩展类型，以及何时阻止这种扩展 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 TypeScript 如何扩展类型，以及何时阻止这种扩展

第 1 / 4 课13 个步骤

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

什么是类型拓宽

类型拓宽是指 TypeScript 推断出的类型比您编写的类型更宽泛。例如，将 let x = "hello" 赋值后，类型会拓宽为 string，而不是字面量 "hello"。

let x = "hello"; // inferred: string, not "hello"
let y = 42;       // inferred: number, not 42

let 与 const 的拓宽差异

使用 const 声明的变量无法重新赋值，因此会保留其字面量类型。let 则会拓宽为基础类型。

const a = "world"; // type: "world"
let   b = "world"; // type: string

使用类型注解防止拓宽

为 let 变量显式添加类型注解，可以防止类型拓宽并锁定字面量类型。

let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignable

使用 typeof 进行收窄

TypeScript 会在 typeof 检查内部收窄联合类型，使您在该分支中获得精确的类型。

function format(val: string | number) {
  if (typeof val === "string") {
    return val.toUpperCase(); // val: string here
  }
  return val.toFixed(2);     // val: number here
}

使用相等性检查进行收窄

与字面量值进行相等性检查，也会在分支内部收窄类型。

type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
  if (dir === "left") {
    console.log("Going left"); // dir: "left"
  }
}

控制流分析

TypeScript 会通过控制流跟踪赋值，并在每个分支之后收窄类型。

function process(x: string | null) {
  if (x === null) return;
  // x is string here — TypeScript knows null is ruled out
  console.log(x.length);
}

对象字面量中的拓宽

对象字面量的属性值也会被拓宽，除非您使用 as const。

const config = { mode: "dark" };
// config.mode: string (widened)

const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)

新鲜性与拓宽

将对象字面量直接赋值给具有类型的变量时，TypeScript 会执行多余属性检查；但一旦拓宽为具名变量，该检查就不再适用。

interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;

使用 in 运算符进行收窄

in 运算符通过检查属性是否存在来收窄对象联合类型。

type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
  if ("meow" in animal) animal.meow();
  else animal.bark();
}

使用断言函数进行收窄

断言函数使用返回类型 asserts condition，以便在调用后收窄类型。

function assertString(val: unknown): asserts val is string {
  if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to string

回顾：拓宽与收窄

拓宽会扩大推断出的类型以提高灵活性；收窄则会在条件分支内部，将宽泛类型细化为精确类型。理解这两个概念有助于您编写更安全的 TypeScript。

快速检查

哪个声明可以防止类型拓宽为基础类型？

在交互式课程中回答

您学到的内容

现在您已经理解了类型拓宽（TypeScript 如何扩大推断出的类型）和类型收窄（条件检查如何产生精确类型）。请使用 as const 防止拓宽，并使用控制流检查安全地收窄联合类型。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「类型扩展与收窄机制」课时是免费的吗？

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

「类型扩展与收窄机制」这节课中我会学到什么？

了解 TypeScript 如何扩展类型，以及何时阻止这种扩展你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「类型扩展与收窄机制」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy