Question

我有一个通用的函数类型：

type TestType<T extends HTMLElement> = (input: T) => React.Ref<T>;

我有一个变量，我希望使用该类型进行键入，以便为返回类型提供强大的类型保证：

const Test = (input) => {
  return React.useRef(input);
}

我不知道将此类型应用于此变量（Test）

我尝试过的事情：

要尽可能明确：

export const Test: TestType<T extends HTMLElement> = <K extends HTMLElement>(input: K) => {
  return React.useRef<K>(input);
}

除其他错误消息外，它无法编译，"Cannot find name 'T'."
1. 试图让类型推断帮助我

export const Test: TestType = (input: K) => {
  return React.useRef(input);
}

这毫不奇怪，因为TestType需要类型参数而失败

当我查看TS文档时，我能找到的最接近的片段是该片段：

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity

但是我找不到任何将类型信息传递给变量声明并让TS推断函数参数（input）或返回类型（尽管在这种情况下，对于TS来说足够简单）的方法从实现中推断出来。

这可能吗？

Answer 1

所以您的方向正确。首先使用call signature定义接口：

interface TestType {
    <T extends HTMLElement>(input: T): React.Ref<T>
}

现在您可以使用它来键入变量：

const Test: TestType = <K>(input: K) => React.useRef<K>(input);

Playground

不确定用例是什么，但是您也可以显式指定返回类型，而无需为整个函数定义类型：

const Test = <T extends HTMLElement>(input: T): React.Ref<T> => React.useRef<T>(input);

键入变量作为泛型类型的函数

1 个答案: