在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}例子.

休息参数游乐场