typescript - 我如何让 TypeScript 保证泛型类型具有实现特定方法的属性？

Question

我提出这个问题的最佳方式是举个例子。

假设我想实现一个采用三个参数的方法，如下所示:

customFilter<T>(values: T[], filterString: string, propName: string) any[] {
    return values.filter((value) => value[propName].includes(filterString));
}

在这种情况下，我想确保 T 是一种具有属性 propName 的类型，该属性的计算结果为 string(或者，至少，实现 includes 方法的东西)。

我考虑过编写一个接口(interface)用作第一个参数类型，但我觉得这只是我的 C# 背景知识。由于界面要求我对属性名称进行硬编码，因此我认为这不是正确的方法。

我知道它涉及到 keyof 的使用。

我通过快速检查方法解决了这个问题:

typeof(values[propName].includes) === '函数'

不过，感觉太“JavaScript”了，而且，我再次觉得 TypeScript 中可能有一些东西可以为我做这件事。

我知道按照 this answer 做一些事情也可以，但仍然感觉非常 JavaScript。

Answer 1

查看您提供的示例代码，您想过滤 values反对 filterString 的论点其中你申请到指定的propName应该存在于通用T , 但要求值是一个数组。

因此我们可以强调我们应该实现的几点:

i) 我们需要约束 T拥有扩展 Array 的属性.这将是一个小问题，因为 ts没有直接的方法来定义至少具有某种类型的一个属性的接口(interface)。我们将提供作弊虽然会保持间接约束。

ii) 所以现在我们转到 args。首先，我们想要 filterString扩展您正在过滤的数组的通用类型。例如，假设您要过滤 propName其值为 Array<string> ，那么我们应该期待 filterString参数类型为 string对。

iii) 与 T约束我们然后需要定义参数 propName成为 T 的 key 其值是数组。即 string类型。

您的函数定义的实现应该保持不变，但是我们可能会为了定义的顺序重新排列参数。因此，让我们开始编码:

我们将首先定义一个类型，它可以从 T 中挑选出属性。那是特定类型的。请引用@jcalz定义此类接口(interface)的解决方案。

type Match<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];

所以我们按照上面的步骤定义函数

// we define these types that will filter keys whose values are arrays
type HasIncludes<T> = Match<T, { includes: (x: any) => boolean }>;
// and a type that will extract the generic type of the array value
type IncludeType<T, K extends keyof T> =  T[K] extends { includes: (value: infer U) => boolean } ? U : never;

// we then apply then apply them to the args
function customFilter<T, K extends HasIncludes<T>>(values: T[], propName: K, filterString: IncludeType<T, K>) {
    // so here we have to type cast to any as the first cheat because ts
    // is unable to infer the types of T[K] which should be of type array

    return values.filter((value) => (value[propName] as any)
      .includes(filterString))
}

定义完成后我们定义一些测试

const a = [{ age: 4, surname: 'something' }];
const b = [{
    person: [{ name: 'hello' }, { name: 'world' }]
}];

// so in this case you get the indirect error discussed in that any key
// you refer will not meet the requirement of the argument constraint
const c = [{ foo: 3 }]

// note the generic is implicity inferred by its usage
const result = customFilter(b, 'person', { name: 'type' }); // works as expected
const result = customFilter(a, 'age', 2); // ts error because age is not array

这是我的 playground因此，如果您想测试特定案例，您可以进行修补。