TS工具类型的使用示例

用通用示例展示 TypeScript 工具类型和索引访问类型的常见组合方式。

#tech / dev #resource / typescript #type / snippet #status / growing

[!info] related notes

所属 MOC: TypeScript MOC

面试页: TS 常用工具类型有哪些，怎么用

总览页: TypeScript

TS工具类型的使用示例

type User = {
  id: string;
  name: string;
  email: string;
  role: "admin" | "user";
  profile: {
    city: string;
    bio?: string;
  };
};

// 选择字段
type UserPreview = Pick<User, "id" | "name">;

// 排除字段
type UserWithoutProfile = Omit<User, "profile">;

// 全部变可选
type PatchUser = Partial<User>;

// 全部变必选
type StrictUser = Required<User>;

// 键到值映射
type RoleLabelMap = Record<User["role"], string>;

// 索引访问类型：提取嵌套字段
type UserProfile = User["profile"];
type UserRole = User["role"];

// 参数与返回值推导
function fetchUser(id: string) {
  return Promise.resolve({ id, name: "A" });
}

type FetchUserParams = Parameters<typeof fetchUser>;
type FetchUserResult = Awaited<ReturnType<typeof fetchUser>>;