typescript - 对键及其类型使用通用 keyof 进行设置操作

Question

发现很难清楚地解释这一点。

在下面的 Setter 界面中，我将“field”键的类型限制为 keyof Store(在本例中为“name”|“age”)。

然后对于“值”键，我想获取给定“字段”键的值的类型。

• 因此，如果“字段”是“名称”，则“值”必须是字符串。
• 并且，如果“字段”是“年龄”，则“值”必须是数字。

这是我目前所拥有的:

interface Store {
  name: string,
  age: number
}
interface Setter<T = Store, K extends keyof T> {
  type: 'SET_VALUE',
  field: K
  // for key: 'name', want type value: string
  // for key: 'age', want type value: number
  value: T[K]
}

// Should error
const invalidName: Setter = {
  type: 'SET_VALUE',
  field: 'name',
  value: 30,
}

// Should work
const validName: Setter = {
  type: 'SET_VALUE',
  field: 'name',
  value: 'hello',
}

// Should work
const validAge: Setter = {
  type: 'SET_VALUE',
  field: 'age',
  value: 30,
}

Answer 1

通用 T 不会为您做任何事情，因为您总是希望它是 Store。因此，您应该做的第一件事是删除 T 泛型并将 T 的实例替换为 Store:

interface Store {
  name: string,
  age: number
}

interface Setter<K extends keyof Store> {
  type: 'SET_VALUE',
  field: K
  value: Store[K]
}

接下来，您似乎希望 Setter 成为 existential type ，这意味着您只需将某些东西声明为没有类型参数的 Setter，TypeScript 将其解释为意味着 some K 的值满足类型参数，而无需指定它。好吧，TypeScript 没有存在类型(没有疯狂的解决方法)所以你不能那样做。

你可以做的是制作一个辅助函数，它接受一个对象字面量并推断你的K类型，这样你就不用必须写出来:

function asSetter<K extends keyof Store>(setter: Setter<K>): Setter<K> {
  return setter;
}

让我们看看它的实际效果:

// error as desired
const invalidName = asSetter({
  type: 'SET_VALUE',
  field: 'name',
  value: 30,
});

// works, inferred as Setter<'name'>
const validName = asSetter({
  type: 'SET_VALUE',
  field: 'name',
  value: 'hello',
});

// works, inferred as Setter<'age'>
const validAge = asSetter({
  type: 'SET_VALUE',
  field: 'age',
  value: 30,
});

希望对您有所帮助!