在 TypeScript 中使用解構和休息的類型化函數參數

Question

我有一個功能：

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  ...
);

鑒於 'name' 是一個字符串，'onChange' 是一個函數，'value' 是一個字符串，'meta' 是一個對象，我如何為這些參數添加類型？ 我最好的猜測是這樣的：

export default ({
  input: { (name: String), (onChange: function), (value: String), ...restInput },
  (meta: Object),
  ...rest
}) => (
  ...
);

但它似乎有語法錯誤。 更何況我不知道如何將類型添加到其余參數。

Answer 1

要將類型聲明添加到解構參數，您需要聲明包含對象的類型。

從打字稿文檔：

...令人困惑的是，這里的冒號並不表示類型。 類型，如果指定了，還是需要在整個解構之后寫...

 let { a, b }: { a: string, b: number } = o;

關於深度嵌套解構的 PSA ：

小心使用解構。 正如前面的例子所展示的，除了最簡單的解構表達式之外，任何東西都是令人困惑的。 對於深度嵌套的解構尤其如此，即使沒有堆積重命名、默認值和類型注釋，也很難理解。 盡量保持解構表達式小而簡單。 你總是可以自己編寫解構會生成的作業。

解構函數參數

在函數中，這是為解構參數聲明類型的方式：

export default ({ a, b }: {a: string, b: number}) => (
  ...
);

不過，在更長的示例中，這看起來很糟糕：

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: {
  input: { 
    name: string, onChange: ()=>void, value:string, ...restInput 
  }, meta: object
}) => (
  ...
);

看起來很糟糕，所以在這里你能做的最好的事情就是為你的參數聲明一個接口並使用它而不是內聯類型：

interface Params {
  input: { 
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;
}

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: Params) => {};

操場

文章更多

休息參數

對於其余參數，根據您對這些類型的期望，您可以使用索引簽名：

interface Params {
  // This needs to match the other declared keys and values
  [key: string]: object;
  input: { 
    [key: string]: string | (() => void);
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;

}

export default ({
    input: { name, onChange, value, ...restInput },
    meta,
    ...rest
}: Params) => { };

例如，這將給...rest一種{[key: string]: object} 。

休息參數游樂場