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

Question

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

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

我有一个变量，我想用该类型输入它，以便我对返回类型有强类型保证：

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

我无法弄清楚将此类型应用于此变量（ Test ）

我尝试过的事情：

1. 尽可能明确：

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

• 这无法编译，其中包括"Cannot find name 'T'."等错误消息"Cannot find name 'T'."

  2. 试图让类型推断帮助我

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

• TestType ，这失败了，因为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

所以你的方向是正确的。 首先定义具有调用签名的接口：

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

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

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

操场

---

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

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