javascript - typescript 和嵌套解构

标签 javascript typescript ecmascript-6 react-tsx

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>

typescript 操场:https://codesandbox.io/s/v06ml2y130

最佳答案

如果您键入 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
);

关于javascript - typescript 和嵌套解构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50905037/

相关文章:

javascript - jquery 库知道新的一天何时到来

TypeScript:从接口(interface)方法返回类的实例

javascript - 从 JavaScript 中的函数参数中解构未知名称值

javascript - 如何导入命名空间?

PHP 使用 json_encode 传递 Javascript 时间戳

javascript - 如何使用 jQuery 将焦点移至下一个输入?

javascript - 垫自动完成功能未正确过滤 Angular

angular - 如何使 ngIf 指令在所有项目中全局可见?

reactjs - 如何使用 react 测试库测试流畅的 ui 下拉菜单?

javascript - 发电机真的有侵入性吗