對對象的TypeScript和點符號訪問

Question

如果TypeScript是JavaScript的嚴格超集，那么為什么任意對象上的點符號錯誤？ 我有一些JS代碼，我想將它們轉換為TS，以獲得更好的類型安全性，但是所有使用點表示法（例如myObj.thing ）的訪問都給我以下錯誤： Property 'thing' does not exist on type '{}'. 。 當我使用方括號表示法（例如， myObj['thing'] ）時，它可以正常工作。

Answer 1

我知道您說這很奇怪，但這是TypeScript存在的主要原因之一。 此錯誤有助於防止意外設置或獲取對象上不存在的屬性。

眼下，因為編譯器告訴你，屬性bar不上不存在x ，因為它已被隱式類型，以{}書寫時var x = {}; 。

通過顯式定義類型，可以告訴編譯器x具有不止零個屬性：

var x: { foo?: string; bar?: string; } = {};

現在，您可以獲取或設置x.foo和x.bar而無需編譯器抱怨。 在大多數情況下，您可以將其移動到如下所示的界面中：

interface IFooBar {
    foo?: string;
    bar?: string;
}

var x: IFooBar = {};

x.foo = "asdf";  // ok
x.test = "asdf"; // error, as it should be

有人建議您選擇any ，但不要偷懶。 您應該充分利用TypeScript提供的類型系統。 這樣做絕對可以在您維護應用程序時節省您的時間。

Answer 2

由於Typescript對象具有強類型化的性質，因此可以使用“ any”使其變為非類型化：

var x: any = {};
x.bar = "bar";   /// ok

如果您需要定義文字屬性的類型

var x: { [index: string]: TypeA } = {};

那么x["bar"]現在只能是TypeA的實例。

Answer 3

x不包含任何名為bar屬性，因此您需要在對象中創建它：

function foobar() {
    var x = {

        foo: 'foo',
        bar: 'bar'
    }

    return x;
}

alert(foobar().bar); //returns bar

Answer 4

麥威爾遜在我無法到達之前就到達了那里！ ;）

在上面的代碼中，Typescript無法確定對象x公開了名為bar的屬性，因此在顯示Intellisense時無法解析它。

而是將foo ， bar等添加為對象本身的屬性：

var x = {
    foo: "FOO",
    bar: "BAR"
};

然后，在使用Typescript Playground時 ，您將看到Intellisense的工作按預期進行：

高溫超導

Answer 5

我個人更願意在有機會時指定類型。

請注意，如果您使用?:運算符將字段定義為可選字段，則只能使用{}實例化此變量。

let x: {foo?: string, bar?: string} = {};
x.foo = 'foo';
x.bar = 'bar';

正如其他人所說，如果您打算多次使用此類型，最好為它創建一個顯式類。

PS：在打字稿中編程時，最好用let代替var 。 （例如，與一個let相比， var聲明的范圍有點古怪。