使用接口在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
}

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