【问题标题】:using a interface to type a anonymous object in typescript使用接口在打字稿中键入匿名对象
【发布时间】:2014-08-07 12:24:41
【问题描述】:

我有一个接口 IBase 和一个包含一些其他对象的变量(在示例中我只是添加了基础以便更好地演示)

interface IBase {
    height?:number;
    width?:number;
}

var element = {
    base: {

    }
}

我怎么能说变量 element.base 的对象来自 IBase 类型?我知道我可以为包含基本类型等类型的元素变量创建一个类型,但这也有可能在不这样做的情况下键入该场景。

【问题讨论】:

    标签: typescript strong-typing


    【解决方案1】:

    Van den Brink 的回答很好。就像一个演示另一个选项:

    var element = {
        base: <IBase> {
    
        }
    }
    

    这也将提供所需的智能感知:

    【讨论】:

    • 在此处使用类型断言只会为您带来部分好处,因为它将允许您强制转换为您的对象文字实际上不符合规范的类型。也就是说,它可以让您获得智能感知,但不会让您获得良好的静态类型检查。 AFAICT 获得静态类型检查的唯一方法是将文字分配给没有类型断言的正确类型的变量。 Dick van den Brink 有更好的答案 IMO。
    【解决方案2】:

    如果您将 var 元素的声明更改为以下内容,它就会知道 base 是什么:

    var element: { base: IBase; } = {
        base: {
        }
    }
    

    注意:你也可以像这样为它创建一个新的接口,使它更易于重用: 接口 IElement { 基地:IBase; } 然后像这里一样使用它: var element: IElement = { base: {} }

    【讨论】:

      【解决方案3】:

      @basarat 的出色回答现在需要更新一下;现在使用尖括号会产生tslint 错误:

      [tslint] 禁止使用 '' 语法的类型断言。请改用“as”语法。 (无尖括号类型断言)

      解决方法很简单:

      const element = {
          base: {} as IBase
      }
      

      这也提供了您想要的智能感知(自动完成)。

      【讨论】:

      • 这对我帮助很大,因为我在通过潜在对象源进行空合并 (??) 时应用默认后备对象时正在寻找答案。例如: const someData : SomeDataInterface = source1 ??来源2 ?? { /* 默认值 */ } : SomeDataInterface
      • Tslint 表示禁止使用该语法。尖括号仍然是一种非常有效的投射方式
      【解决方案4】:

      您不小心导致自己的接口声明出现问题。这是一种微妙的语言,您会遇到结构类型的语言。

      interface IBase {
          height?:number;
          width?:number;
      }
      

      因为所有属性都是可选的,所以接口本质上是{}。即任何对象都满足这个接口。这太笼统了,在大多数情况下都没有用。

      例如,这样做是完全可以接受的:

      var x: IBase = {
          a: 'efsdsdf',
          v: 'sdfdsf' 
      };
      

      我想你会同意真的这个对象在我想使用 IBase 对象的任何地方都没有用。

      除此之外,您可能会发现最优雅的解决方案是创建一个与您的element 定义相匹配的界面。

      interface IElement {
          base: {
              height?:number;
              width?:number;
          }
      }
      
      var element: IElement = {
          base: {
              height: 4
          }
      }
      

      【讨论】:

        猜你喜欢
        • 2021-02-02
        • 1970-01-01
        • 2018-12-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-07-14
        • 2021-12-17
        • 2019-04-23
        相关资源
        最近更新 更多