typescript - 检查函数的参数是否是类型参数中正确类型的键

Question

我正在尝试使用 TypeScript 在 React 中构建一个不错的、类似于 Rails 的表单生成器。我对可能的编译编译时检查很着迷，我很想看看是否有我可以实现的特定检查。我不确定如何抽象地表达这个问题，但我认为一个小例子会更好地说明它。

假设我有一个通用的 Input 类型，它是一个具有某些属性的对象。我想要一个函数 numericField，它接受一个输入对象和键 K，其中 Input[K] 是 类型>号码。如果我传递输入错误的键或字符串类型的键，我希望得到一个编译器错误。

例如:

interface Person {
  name: string
  age: number
}

我想得到以下信息:

decimalField<Person>({input: person, key: 'age'})  // works
decimalField<Person>({input: person, key: 'agge'}) // compiler error
decimalField<Person>({input: person, key: 'name'}) // compiler error

我已经成功地使用了以下类型:

export type PropertiesOfSubtype<T, P> = {
  [K in keyof T]-?: Exclude<T[K], undefined | null> extends P ? K : never
}[keyof T]

如果我将 decimalField 定义为:

function decimalField<Input>(props: {input: Input, key: PropertiesOfType<Input, number>})

..它有点管用。但是有一个问题。

我想让 typescript 知道 input[key] 返回一个数字。目前没有。我认为可能有一种方法可以重写它，因为它可以进行类型检查，因为 TS 知道它将返回一个字符串。

我想我的问题是:是否有更好的方法来做到这一点？

P.P.:这是一个playground对于这个例子，我的下一步是什么——一个可选/必需的参数，取决于字段是否有预定义的标签。

Answer 1

当你说你想要input[key]可以理解为 number ，你的意思是在 decimalField() 的实现中， 正确的？在实现内部，Input是未指定的泛型类型参数。当类型依赖于未指定的泛型类型参数时，编译器将更好地理解 input[key]类型为 number如果input的类型明确限制为 Record<typeof key, number> .从理论上讲，编译器可以自己解决这个问题，但实际上它不会对未指定的泛型执行此类高阶分析。

你可以这样写:

type PropertyHaver<T, P> = { [K in PropertiesOfSubtype<T, P>]: P };

然后 decimalField的泛型类型参数可以这样约束:

function decimalField<Input extends PropertyHaver<Input, number>>(
    props: { input: Input, key: PropertiesOfSubtype<Input, number> }) {
    const value: number = props.input[props.key]
    return "whatever"
}

执行理解input[key]是 number现在。 (注意，它真的是 props.input[props.number]。)

好的，希望对你有帮助；祝你好运!

Playground link to code