在 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} 。

休息参数游乐场