將變量鍵入為泛型類型的函數

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);