打字稿和嵌套解构

3 javascript typescript ecmascript-6 react-tsx

ES6很棒,它减少了代码数量,但是打字稿无法正常工作。

如果我想为我的参数实现类型检查,而该参数已经被破坏了多个层次,那岂不是一团糟吗?我认为使用界面一开始就进行检查就足够了,您认为呢?或者,您可以对所有内容进行类型检查,但不要过度使用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>
Run Code Online (Sandbox Code Playgroud)

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

rob*_*obC 6

如果键入,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
);
Run Code Online (Sandbox Code Playgroud)