指定具有未知参数的函数数组会引发类型错误

Question

我设置了一个名为useField.ts 的相当简单的钩子，它的定义方式如下：

type CheckFunction = <T>(input: T, ...args: unknown[]) => unknown

export const useField = <T>(
   input: T,
   ...checkFunctions: CheckFunction[]
) => {
  // .... and the code goes here, but irrelevant for the question
} 

之后我开始在useField.test.tsx 中通过以下方式编写测试：

import { renderHook } from '@testing-library/react-hooks'
import { useField } from '../useField'

describe('useField error functions', () => {
 
  const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/gi
  const isValidEmail = (input: string): boolean => !!input.match(emailRegex)

  test('Basic checkFunction', () => {
     const { result } = renderHook(() => useField('valid@email.com', isValidEmail)
     // ^ I get a type-error here
  })
})

我尝试通过isValidEmail 函数的行有以下typescript 错误：

Argument of type '(input: string) => boolean' is not assignable to parameter of type 'CheckFunction'.
  Types of parameters 'input' and 'value' are incompatible.
    Type 'T' is not assignable to type 'string'.

现在可以通过将checkFunctions 的定义分配给any 从技术上解决这个问题，但我要提防这件事，因为它有点违背了类型检查的目的。

我也考虑过使用泛型，但问题是，参数可以是各种类型，并且不能用单个泛型的数组来表达

知道我在这里做错了什么吗？因为从逻辑的角度来看，unknown 的用法在这里似乎是正确的。

Answer 1

假设你的检查函数只接受一个参数，你为什么将它定义为接受多个值？例如。 ...args: unknown[]。您还可以指定它返回 boolean 而不仅仅是 unknown。

你可以做这样的事情，它实际上使用了一个泛型，但据我所知，它似乎适用于你的用例：

export const useField = <T>(
    input: T,
    ...checkFunctions: Array<(value: T) => boolean>
) => {
    // .... and the code goes here, but irrelevant for the question
}

const result = useField('someString', validator1, validator2);
// ^ It would know T is a string here, since the input is a string
// Therefore it'll check that `validator1` is of the type `(value: string) => boolean`
const result = useField('someString', str => {
    // TypeScript knows the type of `str` is string
    return str.includes('something');
});
// This would error:
const result = useField<string>(123, validator1);
// As well as this due to the validator accepting the wrong value:
const result = useField('string', (value: number) => true);

这是假设 useField 需要实际输入的值，而不是 <input> 元素的 ID/名称。否则没有理由让input 是通用的（毕竟，名称/id 始终是一个字符串）并且你不会命名<input> valid@email.com 而是email。

---

对于问题中的更新代码。

您错误地定义了“通用”CheckFunction 类型。改用这个：

type CheckFunction<T> = (input: T, ...args: unknown[]) => unknown

export const useField = <T>(
    input: T,
    ...checkFunctions: CheckFunction<T>[]
) => {
    // .... and the code goes here, but irrelevant for the question
}

您使用type Type = <T>(... 的版本基本上告诉TypeScript“此函数具有a 泛型类型，但在Type 之外无关紧要”。如果你使用type Type<T>，你告诉 TypeScript 该类型很重要，例如它应该由该类型的用户指定。

简而言之，通过使用type Type<T>，您可以让您的useField 指定Type 中的T 代表什么，例如与useField的T同类型。