游戏的TypeScript(6)TypeScript的元编程-CSDN博客

本文链接：https://blog.csdn.net/wgc2k/article/details/147733204

TypeScript的元编程

TypeScript 的元编程是指在编译时对类型系统进行操作和扩展的编程技术。它允许开发者创建动态类型、自动生成类型定义，以及基于现有类型构建新类型。

1. 类型系统基础

TypeScript 的类型系统是其元编程的核心，包括：

基础类型：string、number、boolean、null、undefined 等。
复合类型：数组（string[]）、元组（[string, number]）。
接口与类：定义对象结构和行为。
泛型：创建可复用的类型模板。

2. 泛型（Generics）

泛型是元编程的基础工具，允许类型参数化：

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型类
class Box<T> {
  constructor(public value: T) {}
}

// 使用泛型
const num: number = identity(123);
const box = new Box("hello");

3. 类型工具

TypeScript 内置了多种类型工具用于元编程：

`Partial<T>`

将类型 T 的所有属性变为可选：

interface User {
  name: string;
  age: number;
}

type PartialUser = Partial<User>;
// 等价于:
// {
//   name?: string;
//   age?: number;
// }

`Required<T>`

与 Partial 相反，将所有属性变为必需：

type RequiredUser = Required<User>;

`Readonly<T>`

创建只读类型：

type ReadonlyUser = Readonly<User>;

`Pick<T, K>`

从类型 T 中选取部分属性：

type NameOnly = Pick<User, "name">;

`Omit<T, K>`

从类型 T 中排除部分属性：

type AgeOnly = Omit<User, "name">;

`Exclude<T, U>`

从类型 T 中排除可分配给 U 的类型：

type NonNumber = Exclude<string | number, number>; // string

`Extract<T, U>`

提取 T 中可分配给 U 的类型：

type OnlyNumber = Extract<string | number, number>; // number

4. 映射类型（Mapped Types）

基于现有类型创建新类型：

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Optional<T> = {
  [P in keyof T]?: T[P];
};

5. 条件类型（Conditional Types）

根据条件选择类型：

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

6. 模板字面量类型

基于字符串模板生成类型：

type HelloWorld = `Hello ${string}`;

type Greeting = HelloWorld; // "Hello ..."

7. 装饰器（Decorators）

在类、方法、属性等上添加元数据：

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${propertyKey} with args: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

8. 反射（Reflect Metadata）

通过装饰器添加和读取元数据：

import "reflect-metadata";

@Reflect.metadata("design:type", String)
class Person {
  @Reflect.metadata("format", "uppercase")
  name: string;
}

const format = Reflect.getMetadata("format", Person.prototype, "name");
console.log(format); // "uppercase"

9. 高级元编程技巧

递归类型

创建嵌套结构的类型：

type TreeNode<T> = {
  value: T;
  children?: TreeNode<T>[];
};

const tree: TreeNode<number> = {
  value: 1,
  children: [
    { value: 2 },
    { value: 3, children: [{ value: 4 }] }
  ]
};

类型守卫

在运行时检查类型：

function isString(value: any): value is string {
  return typeof value === "string";
}

function print(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase()); // 类型缩小为 string
  } else {
    console.log(value.toFixed(2)); // 类型缩小为 number
  }
}

注意事项

元编程会增加类型系统的复杂度，需权衡可读性和维护性。
过度使用条件类型和递归可能导致编译性能下降。
装饰器需要在 tsconfig.json 中启用 experimentalDecorators。

与JavaScrript的元编程比较

TypeScript（TS）和 JavaScript（JS）的元编程虽然都涉及运行时代码操作，但实现方式和应用场景有显著差异。

1. 元编程核心机制

JavaScript

反射 API：Object.keys、Object.getOwnPropertyDescriptor、Reflect 等内置方法。
原型链操作：Object.setPrototypeOf、__proto__。
装饰器（实验性）：通过 Babel 或 TypeScript 支持。
Proxy 和 Reflect：ES6 引入的强大元编程工具。

// JS 元编程示例：使用 Proxy 拦截对象属性访问
const person = { name: "Alice", age: 30 };

const proxy = new Proxy(person, {
  get(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
    return true;
  }
});

proxy.name = "Bob"; // 输出: Setting property "name" to "Bob"
console.log(proxy.age); // 输出: Getting property "age" → 30

TypeScript

类型系统操作：泛型、条件类型、映射类型、模板字面量类型等。
装饰器：通过 experimentalDecorators 选项支持（需配合运行时反射）。
类型守卫：在运行时缩小类型范围。
编译时元编程：类型在编译后被移除，仅保留运行时代码。

// TS 元编程示例：使用条件类型和映射类型
type IsString<T> = T extends string ? true : false;

type ToString<T> = {
  [K in keyof T]: T[K] extends string ? T[K] : string;
};

interface User {
  name: string;
  age: number;
}

type StringifiedUser = ToString<User>;
// 等价于:
// {
//   name: string;
//   age: string;
// }

2. 类型操作 vs 运行时操作

特性	JavaScript	TypeScript
操作对象	运行时对象、函数、原型等	编译时类型（类型系统）
反射能力	完全动态，可修改对象结构和行为	类型信息在编译后丢失，需借助额外机制（如装饰器）
类型安全	无类型检查，运行时可能出错	编译时强制类型安全
元数据存储	通过 `Symbol`、闭包或第三方库（如 `reflect-metadata`）	通过装饰器和 `reflect-metadata` 存储元数据

3. 装饰器对比

JavaScript

运行时装饰器：直接修改目标对象的属性或方法。
依赖 Babel/TypeScript 编译：原生 JS 不支持，需通过转译实现。

// JS 装饰器示例：记录方法调用
function log(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

TypeScript

编译时 + 运行时：既可以操作类型（如类型装饰器），也可以修改运行时代码。
需启用 experimentalDecorators：在 tsconfig.json 中配置。

// TS 装饰器示例：添加类型元数据
import "reflect-metadata";

@Reflect.metadata("classType", "entity")
class User {
  @Reflect.metadata("type", "string")
  name: string;
}

// 获取元数据
const classType = Reflect.getMetadata("classType", User);
const propertyType = Reflect.getMetadata("type", User.prototype, "name");

4. 优缺点对比

维度	JavaScript	TypeScript
灵活性	高（完全动态）	中等（受限于类型系统）
学习成本	较低（仅需理解运行时概念）	较高（需掌握类型系统和编译时概念）
性能	可能影响运行时性能（如 Proxy 开销）	编译后无额外性能开销（类型被移除）
调试难度	运行时错误更难追踪	编译时错误更易定位
类型安全	无	强类型保证