使用 TypeScript 響應 prop 類型 - 如何擁有函數類型？

Question

是否有使用 TypeScript 的 React prop 類型的函數類型的最佳實踐？

我認為這會起作用，但實際上它出錯了：

type Props = {
  onClick: Function
};

const Submit = ({ onClick }: Props) => {
  return (
    <button type="button" onClick={onClick}>
      click me
    </button>
  );

按照這個線程我讓它工作了，但它似乎不必要地冗長： https : //github.com/Microsoft/TypeScript/issues/20007

type Props = {
  onClick: (...args: any[]) => any;
};

const Submit = ({ onClick }: Props) => {
  return (
    <button type="button" onClick={onClick}>
      click me
    </button>
  );

Answer 1

關於Function和最佳實踐

Function在實踐中沒有足夠的類型安全性，是所有函數的超類型。 您最好用函數類型替換它 - 請參閱下面的“解決方案”部分。

在上面的示例中， Function不能分配給更窄的onClick函數類型，這會導致手頭的錯誤（ Playground 示例）。

除了提到的問題，這里是TypeScript 文檔對Function ：

這是一個無類型的函數調用，通常最好避免，因為任何返回類型都是不安全的。 如果需要接受任意函數但不打算調用它，則類型() => void通常更安全。

typescript-eslint已經丟棄了帶有ban-types規則的Function ，使用默認配置發出以下消息（另請參見此處）：

Function類型接受任何類似函數的值。 它在調用函數時不提供類型安全，這可能是錯誤的常見來源。 如果您希望函數接受某些參數，則應明確定義函數形狀。

更好的解決方案

React 已經帶有內置的事件處理程序類型來處理常見事件。

例如click （ 游樂場）：

type Props = {
  onClick: React.MouseEventHandler<HTMLButtonElement>
};

const Submit = ({ onClick }: Props) => <button onClick={onClick}> click </button>

更通用的替代方法是使用函數類型，如下所示：

 type Props = { onClick: (event: React.MouseEvent<HTMLElement>) => void };

void比any更具限制性。 沒有機會在回調中意外返回一個值，這對於any是可能的。

總之，我們采用 TypeScript 的打字功能，而不是使用Function或any . 現在已知參數是MouseEvent和返回類型void ，將其標識為回調。

有關的

打字稿：如何為方法參數中使用的函數回調定義類型（作為任何函數類型，而不是通用類型）

Answer 2

你可以簡單地這樣寫，這樣可以防止任何事情並且更有說服力。 特別是對於自定義函數：

界面道具 { onClick: (e: Event) => void; }

這將告訴調用組件，onClick 期望什么以及參數是什么。

希望這可以幫助。 快樂編碼。