如何为TypeScript中StateManager的pick方法实现精确类型提示？

问题描述 #

我有一个可处理不同state对象的系统，示例state对象的接口如下：

interface MyState {
  name: string;
  age: number;
  things: string[];
}

还有一个用于与各种state实现交互的类：

class StateManager<T> {
  state: T;

  pick(field: keyof T) {
    return this.state[field];
  }
}

目前pick方法的返回值是所有可能类型的联合类型（比如string | number | string[]），我希望给它添加精确的类型提示，调用pick('name')时返回string类型，调用pick('age')时返回number类型。想知道能不能通过类似下面的泛型写法实现：

pick<K extends keyof T>(field: keyof T): typeof K

解决方案 #

可以实现，但你给出的泛型写法存在问题：typeof K获取的是键的字面量类型（比如"name"），而非对应字段的实际值类型。正确的方式是通过泛型K约束传入的字段名，然后将返回值类型指定为T[K]——也就是该字段在泛型T中对应的类型。

修正后的StateManager类代码如下：

class StateManager<T> {
  state: T;

  constructor(state: T) {
    this.state = state;
  }

  pick<K extends keyof T>(field: K): T[K] {
    return this.state[field];
  }
}

效果验证 #

使用你的MyState接口测试：

const myState: MyState = {
  name: "Alice",
  age: 25,
  things: ["book", "pen"]
};

const manager = new StateManager(myState);
const name = manager.pick('name'); // 类型推断为string
const age = manager.pick('age'); // 类型推断为number
const things = manager.pick('things'); // 类型推断为string[]

此时每个pick调用的返回值都会得到精确的类型提示，完全满足你的需求。

内容的提问来源于stack exchange，提问作者cloakedninjas