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

Question

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

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

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

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

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

我知道它涉及使用keyof。

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

typeof(values[propName].includes) === 'function'

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

我知道按照 this answer 的方式做一些事情也行，但仍然感觉非常 JavaScript。

Answer 1

查看您提供的示例代码，您想针对 filterString 过滤 values 参数，您将其应用到指定的 propName 中，该 propName 应该存在于泛型 T，但要求值是一个数组。

所以我们可以强调我们应该实现的几点：

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

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

iii) 在 T 约束下，我们需要将参数 propName 定义为 T 的键，其值是数组。即 string 类型。

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

我们将首先定义一个类型，它可以从 T 中挑选出以下属性特定类型的。请参考定义此类接口的解决方案。

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，因此您可以在需要测试特定案例时进行修补。

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

How can I have TypeScript guarantee that a generic type has a property that implements a specific method?

typescript

typescript-generics

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

How can I have TypeScript guarantee that a generic type has a property that implements a specific method?

typescript

typescript-generics

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