javascript - 在 TypeScript 中使用解构和休息的类型化函数参数
问题描述
我有一个功能:
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
}) => (
...
);
但它似乎有语法错误。甚至更多我不知道如何将类型添加到其余参数。
解决方案
要将类型声明添加到解构参数,您需要声明包含对象的类型。
从打字稿文档:
...令人困惑的是,这里的冒号并不表示类型。类型,如果你指定它,仍然需要在整个解构之后编写......
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}
例如类型。
推荐阅读
- java - 如何解决:当我尝试打印 double 的值时,它会输出向下舍入的值
- visual-studio-code - VSCode Junit输出不显示
- vb.net - VB.Net GZip 压缩产生太多数据,无法解码
- python - 使用 HyperlinkedModelSerializer 我们可以制作一些没有 url 的字段(ForeignKey 字段),只有 id(如果没有详细视图)
- javascript - kendo ui grid - 如何在保持编辑对话框打开的同时取消更改
- python - 将字符串列表转换为熊猫中的行
- javascript - 笔记本电脑到手机(Twilio 可编程视频)显示黑屏
- julia - 在 Julia 中调用“MKL pardiso”的问题
- mongodb - 客户端 JavaScript 中 mongo shell 中的 NumberInt() 等价物是什么?
- python - 是否可以像这样抓取 javascript 图表?