typescript object strange type syntax

Question

When reading TypeScript handbook, I came across following example:

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

var square = <Square>{};
square.color = "blue";
square.sideLength = 10;

The question is - what is actually <Square>{}? Seems like a bizarre syntax to me. From Java/C# point of view, it's like a generic of an anonymous object. What exactly is it and what are the limitations of such creation?

That looks like a cast

SLaks
– SLaks

2016-02-04 22:13:48 +00:00
Commented Feb 4, 2016 at 22:13 — SLaks
– SLaks, Commented Feb 4, 2016 at 22:13

Szabolcs Dézsi · Accepted Answer · 2016-02-04 22:14:13Z

4

It's "casting". Interpret the following thing ({}, an object literal with no fields) as a Square basically. So because of the usage of that the square will be inferred to be of type Square by the TypeScript compiler and Intellisense will show the correct members.

Of course it's not real "casting", as we know types are just an illusion in TypeScript. It's all for the compiler.

answered Feb 4, 2016 at 22:14

Szabolcs Dézsi

8,84323 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

basarat · Accepted Answer · 2016-02-04 22:31:51Z

3

Its called a Type Assertion https://basarat.gitbooks.io/typescript/content/docs/types/type-assertion.html

And the pattern you are looking at:

var square = <Square>{};
square.color = "blue";
square.sideLength = 10;

Is common (but not recommended) for JS -> TS Migration for lazy object initialization : https://basarat.gitbooks.io/typescript/content/docs/tips/lazyObjectLiteralInitialization.html

answered Feb 4, 2016 at 22:31

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

ducin Over a year ago

omg, even such thing is covered in your book! Is it worth to read official TS handbook or shall I just skip to your book :)?

Collectives™ on Stack Overflow

typescript object strange type syntax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related