返回首页

TypeScript 高级类型体操实战

2024年3月10日10 分钟阅读前端开发
TypeScript编程思考
TypeScript 高级类型体操实战

TypeScript 高级类型体操实战

TypeScript 的类型系统非常强大,通过组合各种类型操作符,我们可以实现复杂的类型逻辑。

条件类型

条件类型允许我们根据类型关系选择不同的类型:

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

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

映射类型实战

映射类型可以基于现有类型创建新类型:

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

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

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

type ReadonlyUser = Readonly<User>;
// { readonly name: string; readonly age: number; }

模板字面量类型

type EventName<T extends string> = `on${Capitalize<T>}`;

type ClickEvent = EventName<'click'>;  // "onClick"
type SubmitEvent = EventName<'submit'>;  // "onSubmit"

实用工具类型组合

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

interface Config {
  database: {
    host: string;
    port: number;
  };
  cache: {
    ttl: number;
  };
}

type PartialConfig = DeepPartial<Config>;
// 所有嵌套属性都变为可选

掌握这些高级类型技巧,可以让你的 TypeScript 代码更加健壮和可维护。