110

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?

BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
davejoem
  • 4,902
  • 4
  • 22
  • 31
  • 3
    I found this question looking for a more comprehensive understanding of angle brackets in Typescript, and this question provides information on more uses for angle brackets: https://stackoverflow.com/a/37369249/6691051 – Toivo Säwén Dec 19 '19 at 11:16

2 Answers2

134

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

Thinh NV
  • 3,182
  • 3
  • 18
  • 17
Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
  • Just out of curiosity, is possible to do this in interface definitions? For example:- `interface Person { name: string; age: number;} interface Call {(person as Person) : boolean;}` – davejoem Aug 08 '16 at 15:24
  • 3
    No, casting is done at runtime, and interface/class definitions are static. It should be: `interface Call { (person: Person) : boolean; }` – Nitzan Tomer Aug 08 '16 at 15:46
  • 1
    let a: Props = {}; is giving me error. "Type '{}' is not assignable to type 'Props'." , don't know why. – Md. Nahiduzzaman Rose Apr 02 '18 at 09:28
  • 1
    @Md.NahiduzzamanRose Yeah, you'll need to do: `let a = {} as Props;`. The compiler tells you that the value you used lacks the properties which are defined in `Props`. Using type assertion you can tell the compiler that you "know better". – Nitzan Tomer Apr 02 '18 at 09:40
  • 1
    It is not casting. – axiac Sep 29 '19 at 08:04
  • WOW what a nice explanation! – KTM Jan 14 '21 at 19:19
  • 1
    Typescript is a transpiled, not compiled, so essentially all that happens is a conversation to JavaScript. There is no casting at runtime and both {} as Type and {} have the same output which is {}. This is typecasting purely to let the transpiler know that you, as the developer, are confident in knowing the type that it can’t imply. – Dhunt Mar 18 '21 at 11:12
  • 1
    Maybe someone will ask about why there are `` and `as Props`, in .tsx when you use JSX syntax the angle bracket might be misinterpreted as component, so in jsx use `as Props`. – rickvian Aug 02 '21 at 01:22
  • will let a = {} work? – Frank Guo Jan 26 '22 at 05:04
  • it doesn't seem to work 'Props' only refers to a type, but is being used as a value here.(2693) – Frank Guo Jan 26 '22 at 05:10
13

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.

d2vid
  • 2,014
  • 1
  • 22
  • 25
James Monger
  • 10,181
  • 7
  • 62
  • 98