TypeScript Academy · 课时

TypeScript 5.1-5.2：改进的类型推断

Q: 「TypeScript 5.1-5.2：改进的类型推断」这节课中我会学到什么？

探索 setter/getter 类型独立性和 using 声明 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

探索 setter/getter 类型独立性和 using 声明

第 2 / 4 课13 个步骤

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

TypeScript 5.1 概览

TypeScript 5.1（于 2023 年 6 月发布）改进了设置器与获取器的类型独立性、JSX 元素类型的灵活性、编辑器中的链接光标，以及性能优化。

// npm install typescript@5.1

设置器与获取器的类型独立性

在 5.1 之前，设置器和获取器必须使用相同的类型。现在，获取器可以返回比设置器所接受类型更宽泛的类型，这对于强制转换模式很有用。

class Temperature {
  get celsius(): string { return this._c + "°C"; } // string
  set celsius(value: string | number) {             // string | number
    this._c = Number(value);
  }
  private _c = 0;
}

undefined 作为 JSX 子元素

TS 5.1 允许组件在其渲染函数中直接返回 undefined（除了 null 之外），与 React 18 的行为一致。

// TS 5.1+: OK
function Widget(): undefined { return undefined; }
// Before 5.1: had to return null or JSX element

JSX 元素类型的灵活性

新的 JSX.ElementType 约束为自定义 JSX 工厂提供了更大的灵活性，这对非 React 环境很有用。

// Custom JSX element types supported more naturally in 5.1

TypeScript 5.2 概览

TypeScript 5.2（于 2023 年 8 月发布）引入了 using 声明（显式资源管理）、装饰器元数据和数组复制方法。

// npm install typescript@5.2

using 声明

using 实现了显式资源管理提案——资源离开作用域时，会调用其 [Symbol.dispose]() 方法。

// Requires lib: ["es2022", "esnext.disposable"]
function getConnection(): Disposable {
  const conn = openDb();
  return { [Symbol.dispose]() { conn.close(); } };
}

{
  using conn = getConnection();
  // conn.close() called automatically at block end
}

用于异步处置的 await using

await using 的工作方式类似于 using，但它会调用异步的 [Symbol.asyncDispose]() 方法，从而支持异步清理。

async function run() {
  await using db = await connectDb();
  // db[Symbol.asyncDispose]() called on exit
}

装饰器元数据

TS 5.2 实现了 TC39 装饰器元数据提案，允许装饰器通过 Symbol.metadata 附加元数据。

function meta(value: string) {
  return (_: unknown, ctx: DecoratorContext) => {
    ctx.metadata[ctx.name] = value;
  };
}

@meta("service")
class MyService {}
console.log((MyService as any)[Symbol.metadata]); // { "MyService": "service" }

数组复制方法

TS 5.2 为 Array.prototype.toSorted、toReversed、toSpliced 和 with 添加了类型支持——这些是 ES2023 中的不可变数组操作。

const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3] — new array, arr unchanged
const reversed = arr.toReversed(); // [2, 1, 3]

5.2 中 tsconfig 的 using

要使用 using 声明，请在 tsconfig 中包含 esnext.disposable 库。

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "ESNext.Disposable"]
  }
}

回顾：TS 5.1–5.2

TS 5.1：独立的获取器和设置器类型、undefined JSX 返回值。TS 5.2：用于自动清理资源的 using 声明、装饰器元数据，以及不可变数组复制方法的类型。

快速检查

TypeScript 5.2 中的 using 声明有什么作用？

在交互式课程中回答

您学到的内容

TS 5.1 带来了独立的获取器和设置器类型，以及 undefined JSX 返回值。TS 5.2 提供了用于自动管理资源的 using 声明、装饰器元数据，以及 ES2023 不可变数组方法的类型。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程: 101
课程: 352

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

常见问题解答

「TypeScript 5.1-5.2：改进的类型推断」课时是免费的吗？

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

「TypeScript 5.1-5.2：改进的类型推断」这节课中我会学到什么？

探索 setter/getter 类型独立性和 using 声明你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「TypeScript 5.1-5.2：改进的类型推断」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy