This lecture explains how to work with arrays in TypeScript, highlighting how TypeScript's type system provides enhanced safety and predictability compared to JavaScript arrays by allowing explicit type definitions or inferring types based on array contents.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
in this lecture we are going to learn
about arrays in typescript and how it is
different from JavaScript arrays arrays
are basically a collection of values and
just like in JavaScript we can create an
array using square brackets in
typescript also so let's go to vs
code and here let's first create a
simple array so I'm going to use this
let keyword to create this array I'll
simply call it as person and to this I'm
going to assign an array for that we can
use a set of square brackets like this
and in there we can specify some values
for example let's say the name of the
person is John his age is 28 he is also a
a
male and then let's say his salary is
$1,000 okay so here we have created an
array which can store a value of
different types now if I hover over this
person array now you will notice that
its type is an array of string or number
that means in this person array we can
store a value of type either string or
number that's because the array which we
are currently assigning to this person
array it only contain values of type
string or number so here the typescript
has inferred the type of this person
array as an array of string or number
okay so if I try to push any other type
of value in this person array using this
push method for example if I try to push
true here you see we have an error and
the error says argument of type Boolean
is not assignable to parameter of type
string or number because the type of
this person array it has been inferred
as an array of string or number so we
cannot insert any Boolean value in it we
can only insert either a string value or
a number value if I try to insert 28 we
will not get any error because this
person array can store a value of number
typee also it can store a value of
either string type or number type now if
I create an array of a single type for
example let's say I'm creating this
names array and in this array I'm only
string so now if I hover over this names
array you will notice that it is an
array of type string so this is how we
specify the type for an array we specify
the data type and after that we specify
square brackets which means that that
variable is basically an array of this
data type if I create an array of
numbers let's say birth here and to this
if I only assign numeric
values like this so now this array only
contains numeric values and that's why
the typescript will infer its type as an
array of numbers if I go over this birth
array you will see that this birth array
it is basically an array of numbers and
if I try to insert any other type of
value to this birth year array by using
this push method let's say here I'm
trying to push a string value let's say
hello again we will get an error so this
hello cannot be inserted inside this
birth year array because this birth year
array it is of type number array it can
only store a numeric value all right so
this is how typescript infers the type
of an array when we are storing a single
type of value in that array then the
type of that array will be an array of
that type for example here when we are
storing only string values the data type
of this names variable is array of
string in case of birth here it is array
of numbers and here for this person
array when we are specifying value of
different types in this array in that
case based on what type of values we
have in that array its type has been
inferred in this case this array which
we assigning to this person variable it
has only string values and numeric
values so its type is inferred as string
or number that means this array can
store either string values or number
values all right now during
initialization if I also specify a
Boolean value in this array let's say
true now this array will be an array of
either string values number values or
Boolean values because during
initialization in this array we have
string values number values and Boolean
values I hope this point is
clear we can also set the type of an
array explicitly for example let's say
here I simply want to create this
variable names and what we want is in
this names variable it should be an
array and in that array we only want to
assign string values so we can specify
it like this we can specify the type of
this name variable explicitly like this
and let a we can go ahead and we can
push string values to it for example I
can say names. push and I want to push a
string value
John okay now here we have an error and
the error says variable names is used
before being assigned so what we can do
is initially we can assign an empty
array to it like this but if I try to
insert some other type of value inside
this names array for example let's say
if I try to insert a numeric value we
will get an error because this names it
is of type string array so we can only
insert string values inside this names
array we cannot insert any other type of
value inside this names
array then if we want to specify the
type for this birth here explicitly
again we can use colon and then in this
birth year array we want to store only
numeric values so we can say array of
number numbers so we will specify the
data type which is number and after that
we can use a set of square brackets like
this so in this birth here now we can
only insert values of number type and
for this person array let's say in this
person array we only want to store
values of string or number type we don't
want to store any other type of value
inside this person so for that we can
specify its type so again we will use
colon and there we will specify that
this person array is going to store a
value of either string type or number
type and since we want to specify two
data types here we will use parenthesis
like this there we will specify string
or number so this pipe here it is
basically used for a data type called
Union so in typescript we also have a
union type which we will talk about
letter in this course but for now just
understand that when we specify
something like this there we are telling
that this variable here it can store a
value of string or number and after that
if we specify square bracket like this
in that case we are saying that in this
person variable it should be an array
because we have used a set of square
brackets here and in that array we can
only store values of string type or
number type and here you see we also
have an error this error is because
since we have specified the type of this
person array explicitly to store string
or number values when we are storing a
Boolean value here we are getting this
error if I remove this Boolean value
from here now we only have string and
numeric values in this are so now we
don't have any error all
right finally if we try to access the
elements of an array just like in
JavaScript we can access the elements of
an array using its index so for example
from this names array if I want to
access its first element currently it is
going to have only one element which is
John so here if I say
console.log and if I want to access the
first element of this names array I can
say names and then I can specify an
index which is zero okay so it is going
to give us the first element from the
names array and initially this names
array is empty and after that at this
line we are pushing one element inside
this names array so if you save the
changes here and if we compile this app. TS
TS
file you see John is logged here but if
I say names of one in this names array
we don't have any second element let's
save the
changes and let's compile this app. TS
file again and you see it is logging
undefined because we don't have any
second element inside this names are so
in that case it is logging undefined in
the same way we can also access elements
from this birth year array so let's say
we want to access the second element
from this birth year array so for the
second element the index will be one if
we save the changes and if we compile
this .ts
file 1989 is logged here because the
second element of this birth year array
is 1989 so using its index using the
index of an element we can access its
value and we can also Loop over an array
so for looping over an array I'm going
to use for off Loop so here let's create
a variable let's call it maybe e off and
let's say we want to Loop over this
birth year
array and what do we want to do
so for each iteration inside this year
variable we are going to get the birth
year value for that element so for the
first iteration this e variable will
receive this first element for the
second iteration this ER variable will
receive this second element and for the
third iteration this ear variable will
receive this third element and let's say
we simply want to log it in the
console so here we are going to log e so
for each iteration we are going to log
the value stored in this e variable if I
save the changes and if we compile this
app. TS file
again here we should see all these three
elements logged in the console so 1998
1989 and 2007 and this 1989 this first
log is coming from this line let's
remove it let's see if the changes again
let's compile app.
TS and now we should see each element of
this birth here array logged here so
basically we are looping over each
element and for each iteration we
logging the value of that
element this is all about arrays in
typescript we are going to use arrays
and objects quite often in this course
so it's very important to understand how
an object and an array Works in
typescript this is all from this lecture
if you have any questions then feel free
to ask it thank you for listening and
have a great day
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
