对象解构中的类型

Posted

技术标签:

【中文标题】对象解构中的类型【英文标题】:Types in object destructuring 【发布时间】:2019-03-06 01:05:32 【问题描述】:

这个

const  foo: IFoo[]  = bar;

还有这个

const  foo: Array<IFoo>  = bar;

会合理地导致错误。

还有这个

const  foo: TFoo  = bar;

只会解构TFoo 属性。

如何为解构对象属性指定类型?

【问题讨论】:

问得好,但它不是能够从bar 的定义中推断出类型吗? 这方面的内容很好here。 @user663031 评论应该被删除,因为它具有误导性。 @SasukeUchiha 文章不可用,但大多数文章都可以通过文章标题搜索。它已移至 mariusschulz.com/blog/… 。它确实揭示了一些亮点。 【参考方案1】:

事实证明,可以在: 之后为整个解构模式指定类型:

const foo: foo: IFoo[] = bar;

实际上并不比普通的旧更好

const foo: IFoo[] = bar.foo;

【讨论】:

但是foo 不是一个值。这就是通常所说的“解构分配模式”。您在这里看到的实际上是一个特殊的 TypeScript 功能,它允许将类型与此类模式相关联。 确实,它更像是一种特殊情况,尤其是与显然只为z 指定类型的let x, y, z: string 相比。我更新了答案。 如果需要多次解构,第一个会更好。但是这条线会变得如此丑陋,以至于单独的线可能会更好。【参考方案2】:

我参加聚会显然有点晚了,但是:

interface User 
  name: string;
  age: number;


const obj: any =  name: 'Johnny', age: 25 ;
const  name, age : User = obj;

nameage 的属性类型应分别正确推断为 stringnumber

【讨论】:

极少数情况下,您希望每次销毁都使用一个接口。【参考方案3】:

NextJS Typescript 示例

我有这样的场景:

const  _id  = req.query
if (_id.substr(2))  ?
 ...

req.query 的输入类似于

type ParsedUrlQuery =  [key: string]: string | string[] 

这样做很有效:

const  _id  = req.query as  _id: string 
if (_id.substr(2))  ?
 ...

讽刺的是,Typescript 是正确的,我应该这样做:

const _id = (req.query._id || '').toString() ✅ 

或者做一些这样的辅助方法:

const qs = (
  (q: ParsedUrlQuery) => (k: string) => (q[k] || '').toString()
)(req.query) ?

我可以像这样重复使用:

const _id = qs('_id') ?

【讨论】:

【参考方案4】:

我自己的问题的后续行动。

不需要为对象属性指定类型,因为它们是从解构对象中推断出来的。

考虑到bar 输入正确,foo 类型将被推断:

const bar =  foo: [fooValue], ... ; // bar type is  foo: IFoo[], ... 
...
const  foo  = bar; // foo type is IFoo[]

即使bar 没有正确键入(anyunknown),也可以断言其类型:

const  foo  = bar as  foo: IFoo[] ; // foo type is IFoo[]

【讨论】:

只有在解构类型对象时才适用。如果要破坏以any 形式出现的东西,那么您需要输入那个或被破坏的变量。 @SamuelNeff 没错,这就是第二个 sn-p 显示的内容。这里的想法是尽快从无类型代码切换到有类型代码是有益的,在这种情况下,它是在解构之前完成的。 完全同意;正确输入的内容越多,TS 自动获取类型信息的效果就越好,开发人员也会更快乐。

以上是关于对象解构中的类型的主要内容,如果未能解决你的问题,请参考以下文章

如何为解构对象中的嵌套函数编写类型?

C#中的解构

解构赋值中的打字稿松散类型

ES6 中的解构数组和对象

ES6中的展开运算符和解构对象

ES6 中的解构赋值与对象属性访问