TypeScript Academy · 课时

TypeScript 5.0：标准装饰器与 const 类型参数

Q: 「TypeScript 5.0：标准装饰器与 const 类型参数」这节课中我会学到什么？

使用新的装饰器提案和 const 泛型参数 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用新的装饰器提案和 const 泛型参数

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

TypeScript 5.0 概览

TypeScript 5.0 引入了标准化的 TC39 装饰器提案（第 3 阶段）、const 类型参数、新的逐字模块语法，以及显著的性能改进。

// TS 5.0 release: March 2023
// npm install typescript@5

第 3 阶段装饰器

TS 5.0 实现了官方的 TC39 第 3 阶段装饰器提案——这不同于旧版实验性装饰器。不再需要 experimentalDecorators: true。

// New standard decorator — no experimentalDecorators flag needed
function logged(target: Function, ctx: ClassDecoratorContext) {
  return class extends (target as any) {
    constructor(...args: any[]) {
      console.log("Creating", target.name);
      super(...args);
    }
  };
}

@logged
class User { constructor(public name: string) {} }

装饰器上下文对象

新的装饰器会接收一个带类型的 ClassDecoratorContext 或 MethodDecoratorContext 对象，其中包含有关被装饰元素的元数据。

function sealed(_: Function, ctx: ClassDecoratorContext) {
  ctx.addInitializer(function(this: any) {
    Object.seal(this);
  });
}

TS 5.0 中的方法装饰器

方法装饰器会接收该方法和一个 ClassMethodDecoratorContext，取代旧的 (target, key, descriptor) 签名。

function measure(_: Function, ctx: ClassMethodDecoratorContext) {
  return function(this: any, ...args: any[]) {
    const start = performance.now();
    const result = (_.apply as any)(this, args);
    console.log(ctx.name, performance.now() - start, "ms");
    return result;
  };
}

const 类型参数

在类型参数上使用 const，会让 TypeScript 为参数推断字面量类型，而不是将其扩大为基础类型。

function identity<const T>(val: T): T { return val; }
const a = identity("hello");      // type: "hello" (not string)
const b = identity([1, 2, 3]);    // type: readonly [1, 2, 3]

const 泛型与 as const

const 类型参数会自动应用缩窄效果——调用方无需在每个调用位置添加 as const。

// Without const param: callers need as const
function makeRoute<T extends string>(path: T) { return path; }
const r1 = makeRoute("/home" as const); // "/home"

// With const param: automatic
function makeRoute2<const T extends string>(path: T) { return path; }
const r2 = makeRoute2("/home"); // "/home" — no as const needed

打包器模块解析

TS 5.0 为使用 Vite、esbuild 或类似打包器的项目新增了 moduleResolution: "bundler"，这些打包器会自行处理模块解析。

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

verbatimModuleSyntax

verbatimModuleSyntax: true 强制类型专用导入使用 import type，从而避免运行时导入泄漏。

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

// Now this errors: must be import type
import { User } from "./types"; // Error if User is only a type
import type { User } from "./types"; // OK

性能改进

TS 5.0 改进了类型实例化缓存和缩窄性能，使大型项目无需修改代码就能运行得更快。

# TS 5.0 compile benchmarks: ~10-15% faster on large projects

从旧版装饰器迁移

旧版 experimentalDecorators 目前仍可使用，但最终会被弃用。请迁移到 TC39 装饰器，以确保未来的兼容性。

// Legacy: requires experimentalDecorators: true
@Component({ selector: "app-root" })
class AppComponent {}

// New TC39 decorator: no flag needed (but Angular/NestJS need updates)

回顾：TypeScript 5.0

TypeScript 5.0 带来了 TC39 标准装饰器、可自动推断字面量的 const 类型参数、moduleResolution: "bundler"、verbatimModuleSyntax，以及显著的性能提升。

快速检查

在类型参数上使用 const 有什么作用？

您学到的内容

TypeScript 5.0：标准 TC39 装饰器取代实验性装饰器；const 类型参数会自动将参数缩窄为字面量类型；moduleResolution: "bundler" 支持现代构建工具；verbatimModuleSyntax 强制使用 import type。

常见问题解答

「TypeScript 5.0：标准装饰器与 const 类型参数」课时是免费的吗？

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

「TypeScript 5.0：标准装饰器与 const 类型参数」这节课中我会学到什么？

使用新的装饰器提案和 const 泛型参数你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「TypeScript 5.0：标准装饰器与 const 类型参数」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy