如何使用tskeyof进行类型安全的属性访问？

VTQA • 2024-10-26 11:53 • 编程

一、tskeyof的介绍

tskeyof是TypeScript的一个Type Operator，用于获取一个类型中所有属性名的联合类型。使用该操作符可以使属性访问时具有类型约束和类型推导功能。


type Person = {
  name: string;
  age: number;
};

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

如上代码所示，PersonKeys的类型就是Person中所有属性名的联合类型。

二、tskeyof的作用

1. 使用tskeyof进行类型安全的属性访问

使用tskeyof获取一个对象的所有属性名后，可以使用该类型进行类型安全的属性访问。


type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: '张三',
  age: 20,
};

function getProperty(obj: object, key: string) {
  return obj[key]; // 潜在的类型错误
}

getProperty(person, 'name'); // '张三'
getProperty(person, 'gender'); // undefined（潜在的类型错误）

function getProperty2(obj: T, key: K) {
  return obj[key]; // 类型安全的访问
}

getProperty2(person, 'name'); // '张三'
getProperty2(person, 'gender'); // 编译时错误：Argument of type '"gender"' is not assignable to parameter of type '"name" | "age"'.

如上代码所示，getProperty函数在访问对象属性时没有对属性名进行任何类型检查，可能会导致潜在的类型错误。而使用tskeyof后，getProperty2函数会在编译时对属性名进行类型检查，从而避免属于类型错误的产生。

2. 使用tskeyof进行动态属性访问

如果需要动态地访问对象中的属性，可以使用泛型类型和tskeyof组合实现动态属性访问。


function getProperty3(obj: T, key: K) {
  return obj[key];
}

const person = {
  name: '张三',
  age: 20,
};

getProperty3(person, 'name'); // '张三'
getProperty3(person, 'age'); // 20

三、tskeyof的高级用法

1. 使用tskeyof实现类型推导

使用tskeyof可以实现类型推导，从而避免重复定义类型。


type State = {
  name: string;
  age: number;
};

type Action = {
  type: string;
  payload: any;
};

type UpdateAction = Action & {
  payload: {
    key: K;
    value: State[K];
  }
};

// 使用
const updateNameAction: UpdateAction = {
  type: 'update',
  payload: {
    key: 'name',
    value: '张三'
  }
};

const updateAgeAction: UpdateAction = {
  type: 'update',
  payload: {
    key: 'age',
    value: 20
  }
};

如上代码所示，UpdateAction使用了tskeyof，从而实现了类型推导，避免了重复定义类型。

2. 使用tskeyof实现类型衍生

使用tskeyof可以实现类型衍生，从而扩展类型。


type Person = {
  name: string;
  age: number;
};

type PersonWithGender = Person & {
  gender: 'male' | 'female';
};

type Identify = {
  [K in keyof T]: { id: number };
};

// 使用
const person: Person = {
  name: '张三',
  age: 20,
};

const personWithGender: PersonWithGender = {
  name: '张三',
  age: 20,
  gender: 'male',
};

const identifiedPerson = <Identify>{
  name: '张三',
  age: 20,
  id: { id: 1 },
};

const identifiedPersonWithGender = <Identify>{
  name: '张三',
  age: 20,
  gender: 'male',
  id: { id: 1 },
};

如上代码所示，使用tskeyof可以扩展已有的类型，实现类型衍生。

小结

本文介绍了如何使用tskeyof进行类型安全的属性访问，并对tskeyof的作用和高级用法进行了介绍。使用tskeyof可以在类型层面进行属性访问的类型检查，避免了潜在的类型错误。此外，tskeyof还能够实现类型推导和类型衍生，从而简化代码。

原创文章，作者：VTQA，如若转载，请注明出处：https://www.506064.com/n/144974.html