使用接口在typescript中键入匿名对象

Question

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

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

var element = {
    base: {

    }
}

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

Answer 1

Van den Brink的答案很好。 就像演示另一种选择：

var element = {
    base: <IBase> {

    }
}

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

Answer 2

如果将var元素的声明更改为以下内容，则它知道基数是什么：

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

注意：您也可以像这样为它创建一个新的接口，使其更具可重用性：interface IElement {base：IBase; 然后像这里一样使用它：var element：IElement = {base：{}}

Answer 3

您不小心导致自己的界面声明出现问题。 这是一个微妙的结构类型语言。

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

因为所有属性都是可选的，所以接口基本上是{} 。 即任何对象都满足此接口。 在大多数情况下，这种做法太普遍了。

例如，这样做是完全可以接受的：

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

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

有了这个，您可能会发现最优雅的解决方案是创建一个与您的element定义匹配的接口。

interface IElement {
    base: {
        height?:number;
        width?:number;
    }
}

var element: IElement = {
    base: {
        height: 4
    }
}

Answer 4

@basarat的优秀答案现在需要一点点更新; 使用尖括号现在会产生一个tslint错误：

[tslint]禁止使用“<>”语法键入断言。 请改用“as”语法。 （无尖括号型断言）

解决方案很简单：

const element = {
    base: {} as IBase
}

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