TypeScript中使用keyof,typeof或IndexedAccessTypes创建类型及其应用场景

2024-02-07 15:14:53

在TypeScript中，我们可以通过keyof,typeof和IndexedAccessTypes创建类型。这些类型可以帮助我们提高代码的可读性和可维护性，并防止出现运行时错误。

keyof

keyof操作符用于获取对象的键名。它返回一个字符串或符号类型的联合类型。例如：

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

type PersonKeys = keyof Person; // "name" | "age" | "gender"

我们可以使用keyof来创建接口或类型别名，其中包含对象的键名。例如：

interface PersonKeysInterface {
  [key in keyof Person]: string;
}

type PersonKeysTypeAlias = Record<keyof Person, string>;

typeof

typeof操作符用于获取变量或表达式的类型。例如：

let name: string = "John";

type NameType = typeof name; // string

我们可以使用typeof来创建接口或类型别名，其中包含变量或表达式的类型。例如：

interface NameInterface {
  name: typeof name;
}

type NameTypeAlias = {
  name: typeof name;
};

IndexedAccessTypes

IndexedAccessTypes允许我们通过索引来访问对象的属性。例如：

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

type PersonAgeType = Person["age"]; // number

我们可以使用IndexedAccessTypes来创建接口或类型别名，其中包含对象的属性类型。例如：

interface PersonAgeInterface {
  age: Person["age"];
}

type PersonAgeTypeAlias = {
  age: Person["age"];
};

应用场景

接口和类型别名

我们可以使用keyof,typeof和IndexedAccessTypes来创建接口和类型别名。这可以帮助我们提高代码的可读性和可维护性，并防止出现运行时错误。例如：

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

type PersonKeys = keyof Person; // "name" | "age" | "gender"

interface PersonKeysInterface {
  [key in keyof Person]: string;
}

type PersonKeysTypeAlias = Record<keyof Person, string>;

type PersonAgeType = Person["age"]; // number

interface PersonAgeInterface {
  age: Person["age"];
}

type PersonAgeTypeAlias = {
  age: Person["age"];
};

泛型

我们可以使用keyof,typeof和IndexedAccessTypes来创建泛型类型。这可以帮助我们编写更灵活、更可重用的代码。例如：

interface Map<K, V> {
  [key: K]: V;
}

function mapValues<K, V>(map: Map<K, V>, callback: (value: V) => V): Map<K, V> {
  const newMap: Map<K, V> = {};

  for (const key in map) {
    newMap[key] = callback(map[key]);
  }

  return newMap;
}

const numbers = {
  one: 1,
  two: 2,
  three: 3,
};

const doubledNumbers = mapValues(numbers, (value) => value * 2);

映射类型

我们可以使用keyof,typeof和IndexedAccessTypes来创建映射类型。这可以帮助我们对对象的属性类型进行转换。例如：

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

type PersonOptionalProperties = {
  [K in keyof Person]?: Person[K];
};

const person: Person = {
  name: "John",
  age: 30,
  gender: "male",
};

const optionalPerson: PersonOptionalProperties = {
  name: "Jane",
  age: undefined,
  gender: "female",
};

类型推断

我们可以使用keyof,typeof和IndexedAccessTypes来帮助TypeScript进行类型推断。这可以帮助我们编写更简洁、更易读的代码。例如：

function getPropertyValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = {
  name: "John",
  age: 30,
  gender: "male",
};

const name = getPropertyValue(person, "name"); // string
const age = getPropertyValue(person, "age"); // number
const gender = getPropertyValue(person, "gender"); // "male" | "female"