打字稿和嵌套解构

Posted

技术标签:

【中文标题】打字稿和嵌套解构【英文标题】:typescript together with nested destructuring 【发布时间】:2018-11-27 00:54:57 【问题描述】:

ES6 很棒,它减少了代码数量,但所有的 typescript 都不起作用。

如果我想对我的参数进行类型检查,它已经被破坏了不止一个级别,那不是一团糟吗?我觉得一开始用interface做一次check就够了,你觉得呢?或者您可以对所有内容进行类型检查,但不要过度使用 es6 以获得更好的可读性。

<div>
      response.results.map((id, name, stock: day: dayStock, month: monthStock) => 
        return(
          <div>
            <p>Item: name</p>
            <p>Day Stock: dayStock</p>
            <p>Month Stock: monthStock</p>
            <br />
          </div>
        )
      )
    </div>

打字稿游乐场:https://codesandbox.io/s/v06ml2y130

【问题讨论】:

你说的想要对我的参数进行类型检查是什么意思?它已经过类型检查 - dayStock 的类型为 number 【参考方案1】:

如果您键入results,则可以注释解构对象。

type Item = 
    id: number;
    name: string;
    stock: 
        month: number;
        week: number;
        day: number;
    ;


const response = 
    results: [
        id: 1,
        name: 'TV',
        stock: 
            month: 10,
            week: 5,
            day: 4
        
    ]
;

response.results.map(
    ( id, name, stock:  day: dayStock  : Item) => dayStock
);

【讨论】:

如果我使用接口有什么不同?这个答案很好。 一个接口可以扩展,或者有多个合并声明:github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.10

以上是关于打字稿和嵌套解构的主要内容,如果未能解决你的问题,请参考以下文章

嵌套对象类型解构

嵌套对象解构和重命名

ES6解构嵌套对象

ES6解构嵌套对象

javascript 使用解构分配从嵌套对象分配变量

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