What does enclosing a class in angle brackets "<>" mean in TypeScript?

Question

I am very new to TypeScript and I am loving it a lot, especially how easy it is to do OOP in Javascript. I am however stuck on trying to figure out the semantics when it comes to using angle brackets.

From their docs, I have seen several examples like

interface Counter {   (start: number): string;   interval: number;   reset(): void; }  function getCounter(): Counter {   let counter = <Counter>function (start: number) { };   counter.interval = 123;   counter.reset = function () { };   return counter; } 

and

interface Square extends Shape, PenStroke {   sideLength: number; }    let square = <Square>{}; 

I am having trouble understanding what this exactly means or the way to think of/understand it.

Could someone please explain it to me?

Answer 1

That's called Type Assertion or casting.

These are the same:

let square = <Square>{}; let square = {} as Square; 

Example:

interface Props {     x: number;     y: number;     name: string; }  let a = {}; a.x = 3; // error: Property 'x' does not exist on type `{}` 

So you can do:

let a = {} as Props; a.x = 3; 

Or:

let a = <Props> {}; 

Which will do the same

Answer 2

This is called Type Assertion.

You can read about it in Basarat's "TypeScript Deep Dive", or in the official TypeScript handbook.

You can also watch this YouTube video for a nice introduction.