8
class Hero {
  name: string = ''
}

const heroes: Hero[] = [];
const heroes2 = [] as Hero[];

I noticed there are these two separate ways of declaring an array in TypeScript. I wonder if this is just syntactical sugar, or is there some underlying logic I am missing?

noman tufail
  • 341
  • 2
  • 8
  • 2
    Does this answer your question? [What does "as" keyword do in JS?](https://stackoverflow.com/questions/55781559/what-does-as-keyword-do-in-js) – leopal Feb 25 '20 at 12:19
  • Thanks for the suggestion. I know that the word 'as' is used to guide the compiler that this particular data will be of type this. but my question is why we have two separate methods of telling such a thing? – noman tufail Feb 25 '20 at 12:34
  • In your case it doesn't matter. `heroes: Hero[] = []` is just an explicit type annotation for the variable. `[] as Hero[]` is a common way to type an empty array. The asserted type `Hero[]` will then be used to infer the type for `heroes2` variable. – ford04 Feb 25 '20 at 12:53

3 Answers3

4

In your example you are telling the compiler the type of a variable as you create it, and the two ways you demonstrate are interchangeable. However the as operator is more frequently used within a code block to cast a variable from one type to another, rather than during the definition of the variable where the :type format is more frequently used.

Some pseudo code using your Hero example:

function X() : any { 
    return <something> // where <something> is an object which we actually know to be a Hero object but for some external reason don't or can't declare the return type in the function definition
}

function doStuff() {
    if ((X() as Hero).name == 'Bilbo') {
        print('We found the hero from LOTR')
    }
}

x

Ian Ash
  • 1,087
  • 11
  • 23
3

To notice the difference, look at the following snippet:

class Hero {
  name: string = ''
}

// `hero` is defined to have type `Hero`. So we get an error on this line,
// because `extra` is not part of `Hero`.
const hero: Hero = {name: '', extra: ''};

// The following definition does not throw error.
// Here, we are casting the object to Hero.
// The object itself conforms to `Hero` type as it contains the necessary properties. 
const hero2 = {name: '', extra: ''} as Hero;

Playground Link

Also see https://basarat.gitbook.io/typescript/type-system/type-assertion#assertion-considered-harmful

Md Enzam Hossain
  • 1,246
  • 1
  • 11
  • 12
  • Hi, i see that your suggestion works, in terms of Typescript is not complaining. But the `extra` property is not added on the `hero2`. `hero2` has only one property the `name` , right ? I tried that in the `Playground of typescript`. – Theo Itzaris Mar 16 '23 at 11:52
  • The object `hero2` will contain both properties - `name` and `extra`. Typescript does not change the underlying object in any way. – Md Enzam Hossain May 24 '23 at 21:59
0

They are two ways of expressing the same thing. The as keyword is used to perform a type assertion, in this case

const heroes2 = [] as Hero[];

tells the compiler to create the heros2 array and interpret it as an array of type Hero. On the other hand 

const heroes: Hero[] = [];

is explicit declaration, the canonical way to do it. In the end it is syntactic sugar really so use whatever way you think reads best.

TheMachinist
  • 298
  • 2
  • 10