What are the difference between these type assertion or casting methods in TypeScript

Question

I'm fairly new with TypeScript, could you explain what are the difference between these methods of type assertion:

// 1. Using :
let myStr: string;

// 2. Using as
let strLength = (myStr as string).length;

// 3. Using <> on left side
let strLength = <string>myStr.length;

// 4. Using <> on right side
let myObs: Observable<number>

and when to use one over the others? Thanks

Answer 1

// 1. Using :
let myStr: string;  // declaring a variable with its type as string

// 2. Using as
let strLength = (myStr as string).length; // casting a variable's type to string type using `as` keyword,but here type of strLength is determine by type assertion as there is no explicit type defined.

// 3. Using <> on left side
let strLength = <string>myStr.length;  // same as 2 above but using <>

// 4. Using <> on right side
let myObs: Observable<number>  // Observable is a generic type you can specify its type(T) in  Observable<T>, here it is `number` type.

However there is an ambiguity in the language grammar when using <> style assertions in JSX, hence recommended to use as for consistency.

Typescript casting :

https://acdcjunior.github.io/typescript-cast-object-to-other-type-or-instanceof.html

https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html

Typescript generic type : https://www.typescriptlang.org/docs/handbook/2/generics.html

Answer 2

The first one, you're setting the type of the variable as a string, so if you try to set the variable with something else than a string it will throw an error

let myStr: string
myStr = 1 // not working
myStr = 'Hello' // Working

the second one is a cast, the variable has a type but you want to use it as another type. Example, a function return an object but you know it's a string and want to use it as a string:

let myStr = helloWorld() //return an object but you know it's a string
strLength = (myStr as string).length //get length of the string

The third one is the same than above

and last one, you're setting the type of the object contained in your Observable so in your example, myObs is waiting for string and if you had something else it won't work, it's generic you can put whatever you want

Observable<T>

Some links http://www.typescriptlang.org/docs/handbook/advanced-types.html