用接口破坏对象

时间:2018-04-05 17:30:58

标签: javascript reactjs typescript javascript-objects object-destructuring

我有这段代码:

const {items} = this.props;

但是,我需要将接口设置为items常量

我不想这样做:

const items: ItemsInterface = this.props.items

可能的?

1 个答案:

答案 0 :(得分:1)

正如Oblosys在他的评论中所说,首选的方法应该是对一个良好类型的源对象进行构造并依赖于类型推断。

类型注释语法与解构语法笨拙地交互并且不方便。

但是,如果你真的希望在解构表达式中归类一种类型,那么有几种方法。

  1. 最简单的方法是在表达式

    的右侧应用类型断言
    const {items} = <{items: ItemsInterface}>this.props;
    

    或等效

    const {items} = this.props as {items: ItemsInterface};
    

    当然这很冗长,但它清晰,正确,明显。

  2. 也许更接近你的直觉,你可以像使用任何其他类型一样,用类型注释指定解构表达式的类型。

    const {items}: {items: ItemsInterface} = this.props;
    

    我个人觉得这很尴尬,有点难以阅读。类型注释归因于未命名的表达式{items}

  3. 如果 偶然 在解构表达式中指定默认值,您实际上可以指定内联类型。

    const {items = <ItemsInterface>{}} = this.props;
    
  4. 或等效

        const {items = {} as ItemsInterface} = this.props;
    

    在任何情况下,除非您使用默认值初始化,否则无法避免重复名称items

    我更喜欢第一个选项,因为更改现有值的类型更简洁,这里this.props断言应用于该值而不是添加类型注释到接收声明,这里是items,因为后者没有直接向读者提供手动调整类型的信息。