TypeScript Tutorial #4 - Objects & Arrays

Sharing buttons:

or rather than gang so now let's look at

two more types arrays and objects so

first of all let's create a new array

and we'll call this names and set it

equal to an array just like we would in

JavaScript and I'll store some different

strings inside this array so Luigi and

we'll do Mario and then Yoshi all right

so we now have an array of strings which

are names right now if I wanted to for

example push a new item on to this array

which is a string that's absolutely fine

to do I could say names push and then

push on a new name for example toad and

that's absolutely fine it works but if I

try to push on to the array a value

which is a different type like a number

or a boolean it's not gonna let me do

this so for example names dot push and

then add on a number then I'm gonna get

a little arrow right here and if I hover

over that it says argument of type 3 is

not assignable to parameter of type

string so it's only letting me put in

strings because that's what we initially

defined in this array so we can't do

this thing right here we can only add on

strings and likewise if I try to

override one of these with a different

type for example names and then say

position 0 and try to set that equal to

a boolean or a number again then it's

also going to error and it won't let me

do this and whenever we get one of these

areas it's not going to compile the type

script into JavaScript so we can't do

this stuff right here when we declare a

new array the types that we assign into

that array cannot then be changed later

on let's do another example I'm gonna

say let numbers equal to an array of

numbers and in here I'll just do 10 20

30 and 40 and then underneath I'm gonna

say numbers dot push and add on 25 and

that's absolutely fine

but if I tried to say numbers dot push

and then add on a string for example

Shawn that doesn't work likewise if I

say numbers and then position 1 or

whatever and set that equal to a string

like Shawn this is not gonna work ok so

that's a raise now if we wanted to have

a mixed array with different types in it

we can do we just have to declare that

when we

initialize our array so I could say for

example let mixed equal to an array and

then inside here we could have Ken and

we'll also have a number four and we'll

have another string chun-li and then

maybe another two numbers 8 and 9 so now

this is an array which has two different

types in and it could have a third type

in if you want you could have a billion

in as long as we're declaring this at

the start when we first make the array

that's absolutely fine

typescript will look at this and say

okay well this is an array now which can

contain strings or numbers right and if

I now try to say mixed push and then add

on a string so I could say Ryu

right here it's gonna let me do that it

does an error but I could also say mixed

push and then add on a number as well

that's absolutely fine and also I could

change any position inside the array to

a number or a string it doesn't matter

if it was a string before and I want to

change it to a number I can do that so I

could say mixed 0 which is currently a

string is now equal to a number and I

could say that is 3 and this is

absolutely fine to do so that's how we

have mixed arrays but if we declare our

array at the start to just contain one

type it can only then have that one type

in it all right so that's arrays in a

nutshell now let's move on to objects so

likewise with objects they're exactly

the same as in JavaScript if I want to

create one I can say let's and we'll

call this ninja and set it equal to an

object and inside this object we can

declare different properties so I could

say that the name is going to be Mario

and under that I could say we have a

belt which is going to be a string and

that is black and then also I could say

age is 30 now I'm creating an object

right here with these three different

properties now these three properties

work the same way as variables if I

declare a variable as a specific type I

can't change that type oh and by the way

just quickly if I create an array I then

can't say down here names is then equal

to something else like a string you know

I can't change the type of the array


so not only are we fixed typing the

values inside the array but also the

type of the variable as well forgot to

mention that but that brings me on to

this down here these things right here

behave the same way as variables if we

declare a variable to be a specific type

we then can't change that type if we

declare a property to be a specific type

then we can't change that type these

will always have to be strings and

likewise this always has to be an object

right so let me come down here and I'm

going to say that ninja age is now equal

to 40 well that's absolutely fine

because age is currently a number and

we're just updating a number if I say

that the ninja dot name is equal to

something like Rio then again that's

absolutely fine because we're just

updating the string but if I say now

that the ninja age is equal to a string

30 then we get an error because age has

to be a number not a string and it can't

change once we've defined this as a

certain type so we can't do this right

here likewise we can't then just add on

extra properties once we've defined the

variable or the object to begin with so

I can't say ninja and then make up a new

property called skills and set that

equal to an array of some kind of skills

like fighting or maybe sneaking I can't

do this because this property skills did

not exist on the ninja object to begin

with and once we've defined the object

we then can't add additional properties

to it ok so what if I wants you override

the whole thing the whole object well I

can do that I can't override it with a

different type I can't set it to equal

an array or a string it doesn't work

like that we can't change the type of

this it has to be an object but I could

update it to be a new object and I could

say well ok the name this time is going

to be Yoshi and then the belt is going

to be orange and then the age is going

to be 40 it allows me to do that but

notice this if I take off one of the

properties I get an error because it

doesn't match the initial strut

of this object that we initially

declared once we initially declare

something like this it has to have the

same structure the exact same type of

object with the same properties the

values can be different of these

properties but they still have to be the

same type I couldn't say name is now you

know a number that doesn't work but

there can be different values and they

have to have exactly the same names so

age has to be there like that now

likewise I couldn't then add on another

property either I couldn't say okay well

I want skills to be added on to this

ninja object as well because again it

doesn't then match the structure of the

initial object that we created so

typescript is quite strict with these

different types but it's not a bad thing

it's a good thing because it leads to

less errors down the line and it gives

you cleaner more predictable code