对对象的TypeScript和点符号访问

Question

If TypeScript is a strict superset of JavaScript, why is dot notation on an arbitrary object erroneous? I have JS code that I want to convert over to TS for better type safety, but all access using dot notation (eg, myObj.thing ) gives me the error Property 'thing' does not exist on type '{}'. . It works properly when I use bracket notation (eg, myObj['thing'] ).

Answer 1

I know you say this is odd, but this is one of the main reasons TypeScript exists. This error helps prevent accidentally setting or getting non-existent properties on an object.

Right now, as the compiler is telling you, the property bar does not exist on x because it has been implicitly typed to {} when writing var x = {}; .

You can tell the compiler that x has more than zero properties by explicitly defining the type:

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

Now you can get or set x.foo and x.bar without the compiler complaining. In most cases, you would move this into an interface like so:

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

var x: IFooBar = {};

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

Some people are recommending you cast to any , but don't get lazy. You should make full use of the type system TypeScript provides. Doing so will most definitely save you time down the road as you maintain an application.

Answer 2

Because of the strongly-typed nature of Typescript Object, you can use "any" to make it untyped:

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

If what's you need is to define type of literal properties

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

then x["bar"] can now only be instance of TypeA.

Answer 3

x does not hold any property named bar so you need create it within the object:

function foobar() {
    var x = {

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

    return x;
}

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

Answer 4

mwilson got there before I could! ;)

In the code above, Typescript is unable to determine that the object x exposes a property called bar so cannot resolve it when displaying Intellisense.

Instead, add foo , bar , etc. as properties of the object itself:

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

Then, when using the Typescript Playground , you'll be see the Intellisense work as expected:

HTH

Answer 5

I personally prefer to specify types whenever I have the chance.

Note, that you can only instantiate this variable with {} if you define the fields as optional with the ?: operator.

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

As others have said, if you plan to use this type multiple times, it's probably better to make an explicit class for it.

PS: it's better to use let instead of var when programming in typescript. (eg the scope of a var declaration is a bit quirky, compared to a let which does what you expect it to do.)