0Pricing
TypeScript Academy · 课时

上下文类型：从上下文推断

理解 TypeScript 如何根据周围上下文推断类型

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

什么是上下文类型推断

上下文类型推断是指 TypeScript 根据表达式所在的位置来推断其类型——类型由上下文提供，而不是由值本身提供。

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

回调中的上下文类型推断

将回调传递给具有类型的函数时，TypeScript 会根据预期的回调签名推断参数类型。

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

对象字面量与上下文类型推断

将对象字面量赋值给具有类型的变量时，其属性类型会从该类型中推断出来，从而实现精确检查。

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

JSX 中的上下文类型推断

在 React 中，事件处理器属性会根据上下文确定类型，因此事件参数类型可以自动推断。

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

上下文类型推断与显式注解

上下文类型推断功能强大，但可以被显式注解覆盖。当两者同时存在时，显式注解优先于上下文类型推断。

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

解构中的上下文类型推断

上下文类型推断函数中的解构参数也会从上下文继承类型。

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

上下文类型推断与返回类型

将函数赋值给具有类型的变量时，返回类型也会根据上下文推断出来。

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

条件表达式中的上下文类型推断

TypeScript 可以将上下文类型传递到三元表达式和逻辑运算符中。

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

上下文类型推断的限制

当表达式处于非上下文位置时，不会应用上下文类型推断，例如没有注解的独立变量。

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

双向推断

TypeScript 会执行双向类型推断：既从上到下进行推断（上下文推断），也从下到上进行推断（根据表达式推断）。两者协同工作，为您提供最准确的类型。

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

回顾：上下文类型推断

上下文类型推断让 TypeScript 根据表达式的使用位置推断类型——回调、赋值、JSX 属性和解构都可以从这种推断机制中受益。

快速检查

上下文类型推断何时会应用于回调参数？

您学到的内容

上下文类型推断是 TypeScript 根据位置而不是值来推断类型。它让回调、事件处理器和具有类型的赋值保持简洁，同时仍然具有类型安全性。

常见问题解答

「上下文类型：从上下文推断」课时是免费的吗？

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

「上下文类型：从上下文推断」这节课中我会学到什么？

理解 TypeScript 如何根据周围上下文推断类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「上下文类型：从上下文推断」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 类型扩展与收窄机制
  2. 上下文类型：从上下文推断
  3. 新鲜度与多余属性检查
  4. const 断言与 as const
← 返回 TypeScript Academy