YouTube Transcript:
TypeScript Tutorial for Beginners

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

Video Transcript

Video Summary

Summary

Core Theme

This content is an introductory course on TypeScript, designed to take learners from basic concepts to building large-scale applications. It emphasizes TypeScript's role in improving code robustness, maintainability, and developer productivity through static typing and modern JavaScript features.

Mind Map

Click to expand

Click to explore the full interactive mind map • Zoom, pan, and navigate

welcome to the ultimate typescript

course in this course i'm going to teach

you everything you need to know about

typescript from the basics to more

advanced concepts so by the end of this

course you'll be able to use typescript

to build large-scale applications if

you're looking for a comprehensive easy

to follow well organized and practical

course that takes you from zero to hero

this is the right typescript course for

you everything you need to know about

typescript is in one place so you don't

need to jump back and forth between

random tutorials i'm mush hamidani and

i've taught millions of people how to

advance their software engineering

skills through my youtube channel and

online school codewoodmosh.com if you're

new here be sure to subscribe as we

upload new videos all the time now let's

jump in and get started [Music]

to take this course you need to know

typescript now that was a joke you don't

need any familiarity with typescript as

i'm going to cover everything from

scratch but because typescript is built

on top of javascript you need basic

familiarity with javascript concepts

such as variables and constants arrays

objects functions arrow functions

destructuring and so on if you need to

refresh the basics i have a bunch of

tutorials and comprehensive courses you

can take i've put the links down below

[Music]

so assuming that you're the right

student for this course now let's talk

about how you should take this course

first and foremost i want you to watch

this entire course all the way from the

beginning to the end because every

lesson teaches you something new if you

have taken any of my other courses

before you know that i don't waste your

time with repetitive or useless stuff so

make sure to watch every lesson now

while watching each lesson i want you to

take notes you can just write down some

keywords on a piece of paper if you

don't want to write a lot of notes i

strongly believe that the act of writing

things down will help you remember new

things that you learn now when you get

to the end of each section make sure to

do all the exercises i've carefully

designed these exercises to help you

better understand and remember the

materials remember the more you practice

the better you'll be at typescript or

welcome to the first section of the

ultimate typescript course

we're going to start this section with a

quick introduction about typescript

we're going to talk about what it is why

we use it and when then we're going to

set up our development environment and

create our first typescript program next

we'll talk about configuring the

typescript compiler and we'll finish

this section by talking about debugging

typescript applications so let's jump in

and get started [Music]

let's start by talking about the top

three questions people ask about

typescript what is typescript why do we

need it and how is it different from

plain or vanilla javascript well

typescript is a programming language

created at microsoft to address some of

the shortcomings of javascript you can

think of it like the brother or sister

of javascript javascript is like a kid

without any discipline who does whatever

he or she wants typescript on the other

hand is like a kid with some discipline

now technically speaking typescript is a

programming language built on top of

javascript so every javascript file is a

valid typescript file but typescript

adds some really cool features to

javascript that help us build more

robust and maintainable applications in

less time the most important feature

typescript offers is static typing what

does that mean well we have two types of

programming languages statically typed

and dynamically typed languages

in statically typed languages like c

plus plus c sharp and java we know the

type of variables at compile time or

while coding for example we can declare

a variable of type integer and this

variable can only hold integer values

nothing else so we cannot set it to a

string or another type of object

in dynamically typed languages like

javascript python and ruby the type of

variables is dynamic so it's determined

at runtime and it can also change so we

can declare a variable

set it to a number and then later on

change it to a string

so this variable does not have a fixed

or a static type the type is determined

and may change at runtime now this is

great and gives us a lot of flexibility

but it can also lead to problems what if

we pass this variable to a function that

expects a number then our application

might misbehave or crash now the problem

is that we will not know about these

issues until we run our application or

our unit tests well assuming that we

have them in place

so we have to test every function with

various edge cases to cache these bugs

and this is the problem that typescript

tries to solve

typescript is essentially javascript

with type checking with typescript we

explicitly set the type of our variables

upon declaration just like how we code

in statically typed languages

then we pass our code to the typescript

compiler and the compiler will tell us

if we are doing something wrong so we

can catch a lot of our mistakes at

compile time so if we declare a variable

as a number we cannot set it to a string

the typescript compiler is going to stop

us right there and this happens at

compile time so we don't have to run our

application or our unit tests and test

every piece of code to cache these

errors we can catch a lot of them simply

by compiling our application okay but

typescript is more than just type

checking most code editors these days

have great support for typescript so

they can detect the type of our

variables and offer productivity

boosting features like code completion

and refactoring also typescript includes

additional features that help us write

cleaner and more concise code now over

time these features get added to

javascript but because we have various

browsers and runtime environments for

executing javascript code it takes some

time until these features are

implemented in various browsers so by

coding in typescript we can use the

features of future javascript

so in a nutshell typescript is built on

top of javascript and we can use it

wherever we use javascript on the front

end or the back end so anything we can

do with javascript we can also do with

typescript now all these great benefits

aside let's talk about the drawbacks of

typescript first with typescript there

is always a compilation step involved

because at this time browsers don't

understand typescript code

so we have to give our code to the

typescript compiler to compile and

translate into javascript this process

is called transpilation

second with typescript we have to be a

bit more disciplined when writing code

so if you're a lazy programmer like our

famous old john smith and want to get

things done quickly you may feel

typescript is getting in the way and

that's true but if you're working on a

large project with multiple developers

you would end up wasting more time

coding in vanilla javascript and

catching those nasty bugs so then you

really want to use typescript for simple

applications you can totally get back to

old vanilla javascript if that's what

you prefer

alright that's all about typescript next

we're going to set up our development environment

all right the first thing we need is

node because we're going to use node

package manager or npm to install the

typescript compiler i believe as a

student of this course you should have

node on your machine but if not head

over to nodejs.org and download the

latest version over here

once you do that then open a terminal

window and run npm that is short for

note package manager which we're going

to use for installing third-party

packages in this case typescript then we

type i that is short for install

dash g for installing this globally so

we can access the typescript compiler in

every folder and then we type the name

of the package typescript

now if you're on mac or linux and you

get a permission error while running

this command you have to prefix it with

sudo or sudo well more accurately this

is sudo because it's short for super

user do but that aside let's go ahead

okay great now to verify our

installation we type tsc that is

shortboard typescript compiler dash v to

get the version

so here i'm running typescript version 4.6.3

4.6.3

you might install a newer version but

don't worry because everything i'm going

to teach you here will apply to newer

typescript compilers now in this course

just like my other courses i'm going to

use visual studio code or vs code as my

code editor you're welcome to use any

editor you prefer but if you want to

follow along and use some of the

shortcuts i'm going to teach you i

highly encourage you to use vs code in

case you don't have it you can get it from

from

code.visualstudio.com alright so go

ahead and set up your development

environment because in the next lesson

we're going to write our first

all right now i'm going to go to my

desktop folder

and create a new folder for our project

called hello dash world you can call it

anything you want and you can put it

anywhere on your machine

now let's go into this folder

and open it with vs code so we type code period

period

now if this doesn't work on your machine

you can simply drag and drop this folder

onto vs code

okay so here's our project now let's add

a new file here called index.ts

so every typescript file should have the

ts extension

now earlier i told you that typescript

is built on top of javascript so we say

typescript is a supersort of javascript

which means it has everything in

javascript plus some additional features

so here we can write any javascript code

and that is valid typescript code so we

can write console.log

and print hello world

now we can go back to our terminal

window here

or we can use the embedded terminal

window in vs code so back in vs code

under the view menu look we have

terminal the shortcut on mac is control

and backtick so

we can open

the terminal window right here

and using typescript compiler we can

compile index.ts okay

okay

now let's open our project folder

look we have index.js

which is the result of compilation so we

have the exact same code here because in

index.ts we haven't used any typescript

features so let's write a bit of

typescript code so

here in index.ts i'm going to declare a

variable using the let keyword i'm going

to call it h

and annotate it with number so by typing

a colon followed by the type of variable

we can annotate or explain a variable

now we can initialize it to let's say

20. now here's the beautiful part

because we have declared age as a number

we cannot set it to a string

or another type of object look

we get this error right here

it's saying type string is not

assignable to type number this is the

beauty of using typescript with

typescript we can catch a lot of our

mistakes at compile time we don't have

to run our application or our unit tests

to find that we accidentally set a

number to a string so let's remove this

bad line and recompile our file

so back to the terminal tsc index.js good

good

now take a look over here

look at the javascript code that the

typescript compiler generated

so instead of the let keyword here we

have var because by default the

typescript compiler uses an older

version of javascript called es5 which

is short for ecmascript 5. so ecmoscript

is a standard or a specification while

javascript is an implementation of that specification

specification

so es5 is an old specification it's been

around for a long time and all these

features have been implemented in our

browsers for a very very long time i

think more than a decade now in the next

lesson i'm going to show you how to

configure the typescript compiler to

target a newer javascript version so the

code that will be generated would be

more modern

so here's the interesting part instead

of let we're using var and we don't have

our type annotation this is purely for

the typescript compiler

the actual javascript code doesn't

specify the type of this variable okay

so that's it for now starting from the

next section we're going to explore

typescript features in detail

next i'm going to show you how to

all right let's talk about creating a

configuration file for the typescript compiler

compiler

so here in the terminal we run tsc

double hyphen in it

so this created a configuration file called

called

tsconfig.json with these settings

so let's close the terminal window and

open ts config right here so in this

file we have a number of settings and as

you can see most of these are commented

out by default we're only going to use a

handful of them so don't be intimidated

by all these settings you don't have to

learn all of them in fact nobody knows

all of them i don't know all of them

either now in case you're curious in

front of each setting you can see a

description of what that setting is for

so let's talk about a few of them in

this lesson the first one is target

which specifies the version of

javascript that the typescript compiler

is going to generate so this is set to

es 2016 which is an old standard and

it's been implemented in all browsers

out there now depending on where you

want to deploy your application you can

use a higher target and that often

results in shorter and less concise code

so if we remove this value and press

ctrl and space we can see all valid

values so we have yes 2015 16 17 18 and

so on now in this lesson i'm going to

leave this at yes 2016 because this is

the safest option for all browser

applications out there but again

depending on where you want to deploy

your application and how much of older

browsers you want to support you can use

a higher target

now the next setting we have here is

module which is set to common js we'll

talk about this setting later in the

course where we talk about modules now

in this section in the module section we

have a setting called there which

specifies the directory that contains

our source files so let's remove the

comment by pressing command and slash on

mac or ctrl n slash on windows

so this is set to period slash which

represents the current folder now by

convention we often put our source code

into a separate folder

so back to our project panel let's

create a new folder here called src

and then move index.ts right here okay

now i'm going to delete index.js we

don't need it for now okay

so now we're going to change router to

period slash source

now we have a similar setting here

under the emit section that setting is

called outer

and this specifies the directory that

will contain our javascript files

so let's enable this and change it to

dist so when we compile our code using

the typescript compiler our javascript

files are going to be stored in this or

distributable folder okay

now here we have another useful setting

called remove comments so

if we enable this the typescript

compiler is going to remove all the

comments that we add in our typescript

code so the generated javascript code is

going to be shorter okay

now another useful setting in this

section is no emit on error so by

default when we compile our code even if

you have errors in our code the

typescript compiler will still generate

javascript files this is probably not

what we want so the best option is to

always enable this setting so if you

have any mistakes in our code the

typescript compiler is not going to

generate any javascript files okay

now with this configuration file in place

place

now we can go back to the terminal and

compile our code simply by running tsc

without any arguments so we don't have

to type index.ts

we just run tse and this will compile

all typescript files in this project

take a look all right

now we have a new folder called disk

that contains our javascript file

so this was the basics of ts config as

we go through the course we'll explore

all right now let's see how we can debug

our typescript applications in vs code

this is very useful when things go wrong

and our code doesn't work as expected so

we can run our code line by line and see

what exactly happens under the hood

there are a few steps we need to follow

first we go to tsconfig.json

and here in the emit section we enable

the source map feature so a source map

is a file that specifies how each line

of our typescript code maps to the

generated javascript code let me show you

you

so back to the terminal let's recompile

our code

good now

look into this folder we have a new file called

called

index.js.map this is our source map

so if you look over here

you see some code that specifies how our

typescript code maps to our javascript

code now this is not for us to

understand this is for debuggers it's

for machines okay

so let's close this file now

now

to make debugging more interesting let's

go to index.ts and write some logic we

can say if age

is less than 50

we're going to add 10 to it okay

now we're going to click on the first

line to insert a breakpoint so when we

start debugging the execution stops

right at this line at this breakpoint

from this point forward we can execute

our code line by line okay now

now

we go to the debug panel

and click on create and launch the json file

file

now from this drop down we select

node.js and this creates a new file

called launch.json in our project i'll

show you that in a second

so this is a json file with some

configuration that tells vs code how to

debug this application

so we're going to use node to launch

this program and here we have a label

called launch program which you will see

in a second

and we can see our program starts here

so in the source folder we have index.ts

and our output files are stored

in our workspace on our project in files

with the js extension

now here we need to add one more setting

it's called pre-launch task

we're going to set this to a string with

this value tsc

tsc

colon space build space hyphen space tsconfig.json

tsconfig.json

make sure to type this out exactly as i

have shown you here all these spaces

matter okay

so with this setting we are telling vs

code to use the typescript compiler to

build our application using this

configuration file okay now

now

we go back to index.es and to start

debugging we can go to the debug panel

and click on launch program this is the

label that i just showed you now look at

the shortcut it's f5 i always prefer to

use shortcuts so let's start debugging

good now our program started and the

execution stopped right on this line at

this breakpoint now on the top we have a

bunch of tools for executing our code we

have step over for executing one line

we have step into we're stepping into a

function currently we don't have any

functions so it's not useful

we also have step out this is useful for

stepping out to the function we have

restart and stop

so in the tooltip that you see

in front of each tool you can see the

shortcut so the shortcut for stepping

over a line is f10 let's press that

so this line was executed

now on the left side

under variables

you can see all the variables that are

detected in this debugging session so

under local we have age that is set to

20. as we execute each line you'll see

the value of this variable getting updated

updated

now if there's something that you don't

see in the variables window you can go

to the watch window

and insert a watch so we're going to

watch the age variable current is 20. so

let's step over this line

now we're on this line so let's step

over this as well

now hcode updated but because our

program terminated we don't see its

value anymore but if you add one extra

line here

let's say console.log h

let's start the debugging session one

more time by pressing f5

now step over f10 f10 f10 and now h is

30. so this is debugging in via score

it's very useful when things go wrong we

can start our program and execute it

line by line

all right now that we're done with

debugging we can stop the debugging

session right here

so that brings us to the end of this

section starting from the next section

we're going to explore typescript in detail

detail

hey guys mosh here i just wanted to let

you know that this tutorial you have

been watching is actually the first hour

of my complete typescript course the

complete course is about 5 hours long

and goes way beyond this tutorial it

also comes with exercises and solutions

summary notes and cheat sheets a 30-day

money-back guarantee and a certificate

of completion you can add to your resume

so if you're serious about learning

typescript and are looking for a job as

a front-end or a back-end developer i

highly encourage you to enroll in the

course in case you're interested i'll

put the link in the description box and

if not that's totally fine let's move on

welcome back to another section of the

ultimate typescript course in this

section we're going to explore the

fundamentals of typescript so you will

learn about the built-in types like the

any type arrays tuples enums functions

and objects the concepts you'll learn in

this section will be the foundation for

future sections so don't skip any

lessons now let's jump in and get started

started [Music]

so javascript has built-in types like

number string boolean null undefined an

object now typescript extends this list

and introduces new types like any

unknown never enum and tuple as we go

through this section you will learn

about all these steps in detail but

before we get started let's see how we

can play with primitive types in

typescript so back in index.ts i'm going

to delete all this code and declare a

variable called sales of type number

and set it to a value like one two three

four five six seven eight nine

so once again we're annotating or

explaining the type of the sales

variable using this syntax okay now in

typescript if you have a large number

we can separate its digits using an

underscore that makes our code more

readable okay

now let's also declare a variable called

course of type string and set it to typescript

typescript

and one boolean called is published

now let me show you something really

cool in typescript we don't always have

to annotate our variables because the

typescript compiler can infer or detect

the type of our variables based on their

value for example because we have

initialized this variable to a number

the typescript compiler knows that this

variable is a number so we don't have to

annotate it so if we remove the annotation

annotation

and hover our mouse over this variable

look we can see that sales is a number

similarly because we have initialized

course to a string we can remove the

annotation and once again

we can see that course is a string and

one more time

now what if we declare a variable like

level and don't initialize it

typescript assumes that this variable is

of type any we'll talk about that in the

in timescript we have a new type called

any which can represent any kind of values

values

so if we declare a variable and don't

initialize it the typescript compiler

assumes this variable is of type any so

we can set it to a number and then later

on we can set it to a string

but this is against the whole idea of

using typescript because we use

typescript for type safety so we get

type checking so if we use the any type

we essentially lose that feature and the

major benefit of using typescript so as

a best practice you should avoid using

the any type as much as possible let's

look at another example let's say we

have a function called render

that takes a document and simply renders

it on the console

now look we have a compilation error

and the error is saying parameter

document implicitly has on any type

implicitly means we haven't explicitly

or clearly set the type of this

parameter so the compiler is inferring

or guessing the type of this parameter

and that's why we have this error now

let's say this is part of a javascript

project we're trying to convert to

typescript and at this point it's

impossible for us to explicitly annotate

this with a particular type so we have

to use the any type here now here we

have two options to turn off this error

one option is to annotate this with any

so we're telling the compiler hey i know

what i'm doing the document is of any

type but what if we have tons of errors

of this kind we don't want to go to

every function and explicitly annotate

various parameters with any

well there is a nuclear option for that

but i don't personally recommend that

but let me show you how that works

so let's remove the annotation

now if you're on mac press command and p

if you're on windows press ctrl and p to

bring up the search box and go to tsconfig.json

tsconfig.json

now look in the type checking section

strict is turned on and this is

equivalent to turning on some of the

basic type checking features you will

learn about these settings as we go

through the course

now the first setting you see here is no

implicit any so let's remove the comment

so if this feature is turned on the

compiler will complain about implicit

any types

now let's turn this off and see what

happens so back in index.ts

the error is gone so use this with

caution only if you know what you're

doing otherwise there's really no point

using typescript because you will lose

the major benefits of typescript okay

so back to ts config i'm going to revert

this code

good so that's all about the any type

all right let's talk about arrays

in javascript we can declare an array

now the thing about javascript arrays is

that each element can be of different

type so here we can have two numbers

followed by a string

and this is totally valid javascript

code because javascript arrays are

dynamic so each element can be of

different type

but what if we pass this array to a

function that expects a list of numbers

then the third element is going to cause

some issue right this is where we use

typescript so we can explicitly apply a

type annotation here

and say numbers is a number array

now we see the error immediately at

compile time so let's fix it good

good

now in this particular case we don't

even have to apply the type annotation

because every element in this list is a

number so if you remove the type annotation

annotation

the compiler

can still infer or guess the type of

this variable great

but what if we had an empty array here look

look

now the type of this variable is any

array which is something we should avoid

with any arrays again we can have a mix

of different types so the first element

can be a number

the second element can be of a different

type like a string or a boolean so if

you want to use an empty array you have

to explicitly apply a type annotation

here let's say number array

now the third line is invalid so let's

delete it

now let me show you another cool benefit

of using typescript and that is code

completion or intellisense so if we type

numbers that for each

and pass an arrow function here like n

goes to

and then type n period

over here we can see all the properties

and methods of number objects because

our editor knows the type of n it offers

code completion so we can see all the

methods of number objects this is very

useful it's a great productivity

boosting feature we don't get this with

plain javascript right

so that's another benefit of using

typescript that's all about the arrays

typescript has a new type called topple

which is a fixed length array where each

element has a particular type we often

use them when working with a pair of

values for example let's say for each

user we want to represent two values an id

and an a

so we declare a variable

and annotate it using a special syntax

like this first we add square brackets

and then tell the compiler that the

first element is going to be a number

whereas the second element is going to

be a string

and then we initialize our variable like this

this

so we have a fixed length array with

exactly two elements nothing more

nothing less so if we add a third

element here we get a compilation error

saying type number string number is not

assignable to type number string okay so

exactly two elements and these elements

should have these types the first one

has to be a number so if we pass a

string again we get a compilation error

now just like before here we get

intellisense or code completion

so if we access the first element

we see all the methods of number objects

and if you access the second element we

see all the properties and methods of

string objects again one of the reasons

i love typescript

now one thing you need to know about

tuples is that internally they're

represented using plain javascript

arrays so if we compile our code we're

just going to see a regular javascript

array let me show you so in the terminal

let's run tsc good

good

now back in our project here in this

folder let's open index.js look we just

have a regular javascript array so that

means back in our typescript code

if we type user period

over here we can see all the methods of

array objects

now one of this method is a little bit

troublesome and that is the push method

so we can call this method and store a

third value in this array and the

compiler is not going to complain here i

believe this is one of the gaps in

typescript at the time of recording this

hopefully this will be solved in the future

future

so a tuple is a fixed length array where

each element has a particular type now

as a best practice i would say restrict

your tuples to only two values because

anything more than that is going to make

your code a bit hard to understand for

example if you add

a boolean

and another number here

what do these values really represent

it's really hard to tell

so tuples are useful when we have only

two values like key value pairs

typescript has another built-in type

called enum which represents a list of

related constants if you know c sharp or

java you have seen enums before we have

the exact same concept here in typescript

typescript

so let's say we want to represent the

size of t-shirts as constants one way is

to define three constants like this small

small medium

medium

and large

that's one way and then throughout our

code we can reference this constant

another way is to group this constant

inside an enum so we use the enum keyword

keyword

then give our enum a name

now note that here i'm using pascal

naming convention so the first letter of

every word should be uppercase okay

then we add curly braces and inside the

braces we add our members small

medium and large once again i'm using

the pascal naming convention for the members

members

now when we define an enum we don't need

to define these three constants anymore

and by default

the typescript compiler assigned the

first member the value of 0

and other members values like 1 2 and so

on now if you don't want to use these

values we can explicitly set values so

we can set small to 1 and then medium

becomes 2 and large becomes three we can

also use string values like

like s

if we do this then we have to explicitly

set a value for each member so

medium and

large like this now i'm going to revert

this code and just rely

on numbers so i'm going to initialize

small to 1 and rely on the compiler to

set the value for other members

so now that we have this new type we can

declare a variable like my size of type size

size

and set it to size dot

medium okay

so this is how we can use enops now

let's see what happens

if we log

my size on the console so back to the

terminal let's run the typescript compiler

compiler

good and then use node to execute our

javascript code so we go to the disk

folder and pick index.js

so look we see the numeric value

associated with our enum member okay

now let's look at the generated

javascript code in this file

so back to the project here's our index

file take a look

so the generated javascript code is

pretty verbose it's pretty lengthy now

you don't need to worry about

understanding this but let me show you a trick

trick

back to our typescript file

if we define this enum as constant the

compiler will generate a more optimized

code so let's recompile our code

and then look at index.js

index.js

one more time

now we don't see all that code anymore

we only have one line for setting my

size to 2. again you don't have to worry

about the generated javascript code all

i want you to take away here is that

using an enum we can represent a list of

related constants and if we define our

in-apps using the constant keyword the

compiler will generate more optimized code

code

let's talk about how typescript helps us

prevent common problems when working

with functions

so let's define a function

called calculate tags

and give it an income parameter of type number

number

now let's hover our mouse over the

function name look at the type of the

return value it's void meaning this

function does not return a value

if you return a value here like a number now

now

the type of the return value is number

so the typescript compiler has inferred

the type of the return value for us and

that's great but as a best practice we

should always properly annotate our

functions so all the parameters as well

as the return type should be properly

annotated especially if you're building

an api for other people to use

so in this case to annotate the return type

type

we go after the list of parameters

add a colon and specify the return type

like number or void if we are not going

to return a value

so let's add number

now this has an extra benefit

if you forget to return a value or if

you return a different kind of value

like your string we get a compilation

error immediately so as best practice

always properly annotate your functions

now let's temporarily return zero okay

okay

look at the income parameter this is an

unused parameter now we have a compiler

option for detecting these unused parameters

parameters

so let's go back to our ts config file

in the type checking section

we have a compiler option called no

unused parameters we have to explicitly

turn this on because this setting is not

part of strict setting now back to index.ts

index.ts look

look

we have a warning saying

income is declared but its value is

never read so let's change this code and

say if

income is less than 50 000

then we're going to return income times 1.2

1.2

now here we have another compilation error

error

saying function lags ending return

statement and return type does not

include undefined it sounds a bit

cryptic but what this error is saying is

that if this condition is true we're

going to return a number otherwise as

you know javascript by default always

returns undefined from our functions and

undefined is not a number

now let me temporarily

remove the annotation for the return type

look we have no compilation error but

this function has a problem

if the income is greater than 50 000

we're gonna get undefined from this

function and this may cause a bug in our

application the good news is that we

have another compiler option for

detecting these kind of issues where we

forget to return a value

so back to our ts config file again in

the type checking section

we have a setting called no implicit returns

returns

again we have to explicitly turn this on

because this is not part of the strict

setting okay now

now

to factor code

we have a warning saying not all code

paths return a value so now we can fix

this problem

and say otherwise if income is greater

than 50 000 we're going to return income

times 1.3 but again it's best to always

annotate our functions properly to

prevent all these issues so we should

always return a number from this function

function

now we have another useful compiler

setting for detecting unused variables

so if we declare a variable like x and

don't use it in this function this is

unused now using the typescript compiler

we can find these issues in our code so

back to ts config

here is the setting no

unused locals with this feature enabled now

now

back to our code we have a yellow

warning saying

x is declared but its value is never

read so

now we can delete this and make our code cleaner

cleaner

so this is the basics of functions now

let's add a second parameter here called

tax here of type number

number

now we have a warning here saying

texture is declared but its value is

never read so let's change

our condition to

if tax year

is less than 2022 then return income

times 1.2

so now with these two parameters if you

want to call this function

we have to supply exactly two arguments

nothing more nothing less

so i'm going to pass 10 000 for the

income and 2022 for the tax year if you

add an extra argument here

we get a compilation error saying

expected two arguments but got three if

you have been coding in javascript for a

while you know that this is valid

javascript code so javascript doesn't

really care how many arguments we pass

to a function we can pass more or fewer

arguments than the number of parameters

but typescript is very strict about this

so here we should pass exactly two

arguments so let's remove that

but what if you want to make this

optional let's say in some places we

want to call this function without

supplying the tax year well we can make

this parameter optional by adding a

question mark right here

now we have a compilation error on this

line saying

object is possibly undefined

so if we don't supply the tax year by

default undefined will be used and we

cannot compare undefined with 2022.

so here we have two options one option

is to use the old javascript trick so we

wrap this in parenthesis

and then using the or operator we give

it a default value like 2022

so if we don't supply the tax year

this value will be used otherwise the

argument that we pass will be used here

okay now i don't like this approach

there is a better way we can give this a

default value so instead of making it optional

optional

we give it a default value

like this

now we can call this function with or

without a tax year if we don't supply an

argument for the tax year this value

will be used otherwise what we pass here

will overwrite

the default value okay now

now

with this default value we no longer

need to use

this ugly expression we can simply compare

compare

tax year with 2022

so let's quickly recap what you learned

in this lesson as a best practice always

properly annotate your functions all the

parameters and return types and enable

these three compiler options

no unused locals no unused parameters

all right the last thing we're going to

cover in this section is objects so

let's declare an employee object

with an id property

now you know that in javascript objects

are dynamic so their shape can change

throughout the lifetime of our programs

so once we have an employee object then

later we can give it a new property like

name and this is totally valid in

javascript but as you can see this is

not valid in typescript the compiler is

saying property name does not exist on

this type so this type is an object with

an id property which is a number

so just like all the variables we have

declared so far the typescript compiler

has inferred the shape of this employee object

object

so if you hover our mouse over employee

we can see its shape it's an object with

an id that is a number

now just like all the variables we have

declared so far we can explicitly apply

a type annotation here

so after employee

we add a colon followed by braces and

inside the braces we define the

properties of an employee object so

every employee should have an id that is

a number

and a name that is a string

now the previous error on this line is gone

gone

but we have a new kind of error let's

find out

the compiler is saying property name is

missing so the reason we're seeing this

is because every employee should have

these two properties but while

initializing this object we haven't

supplied the name property now here we

have two options one option

is to set the name to an empty string we

cannot set it to null or undefined we'll

talk about this in the next section so

we should either set it to an empty string

string

or we can make this property

optional and then we don't have to

supply the name property while

initializing an employee now even though

typescript allows us to do something

like this this is something we should

avoid because conceptually it doesn't

make sense to have an employee without a

name every employee should have a name

it would make sense to make the fax

property optional because not everyone

has a fax machine right so always make

sure the code you write conceptually

makes sense don't blindly use features

of typescript or any other programming

languages okay so in this case we're not

going to use an optional property and

that means we should either set the name

to an empty string or initialize it

right here okay now we have an error

because i used a period okay

so now we don't need this last line anymore

anymore okay

okay

now sometimes we want to make certain

properties read only so we don't

accidentally change them later on so

with our current implementation we can

change the idea of an employee anytime

and this is not valid this is where we

use the read-only modifier so we applied

before the name of the property and now

the typescript compiler prevents us from

accidentally modifying the value of this

property okay

good now how can we define a function or

more accurately a method in this object

let's say every employee object should

have a retirement method so

in our type annotation we need to define

the signature of this method we need to

specify how many parameters it's going

to have what is the type of each

parameter and what is the type of the

return value

so we're going to have a retire method

with one parameter that is date now here

we use the arrow function syntax so

first we add parenthesis and inside

parenthesis we specify the parameters so

we're going to have a date parameter of

type date

this is just a built-in data object in

javascript and typescript so we only

have one parameter then we use a fat

arrow and here we specify the type of

the return value we don't want to return

any value so we're going to use weight

now we have a compilation error

saying property retire is missing

because when initializing this object we

haven't supplied

the retired method so let's do that real quick

all right retirement is going to be a

method with one parameter and

and

over here i just want to lock the date

on the console pretty simple

so this is how we can work with objects

now i know this syntax this type

annotation is a little bit messy it's

making our code a bit verbose or noisy

so in the next section i'll show you a

welcome back to another section of the

ultimate typescript course in this

section we're going to explore more

advanced types in typescript

so you will learn how to use type

aliases to reuse types and simplify your

code how to use unions and intersections

to combine types how to narrow types how

to work with nullables as well as the

unknown and never types so let's jump in

and get started [Music]

alright so this is the employee object

that we created at the end of the

previous section now there are three

problems in this implementation the

first problem is that if you want to

create another employee object we have

to repeat this structure we have to

repeat this shape so we'll end up

duplicating our code which is bad we

always want to confirm to the dry

principle don't repeat yourself

now the second problem is that the other

employee object might have other

properties so these two employee objects

might not have a consistent shape

because we don't have a single place to

define the shape of an employee object

now the third problem is that overall

this structure is making our code a

little bit hard to read and understand

this is where we use a type alias using

a type alias we can define a custom type

let me show you

so on the top we start with the type

keyword then give our new type and name

and once again here we use the pascal

case so employee

with a capital e

then we set it to braces and inside the

braces we define all the properties and

methods an employee object should have

so i'm going to go in this annotation

select these three lines and by pressing

alt and up we can move these lines up okay

okay

now when defining this employee object

we annotate it with our new type

employee okay so now we have a single

place where we define the shape of an

employee object and we can reuse this in

multiple places this is the benefit of

all right let's talk about union types

with union types we can give a variable

or a function parameter more than one

type so let's define a function for

converting weight from kilogram to pounds

pounds

now we give it a parameter called weight

now let's assume that this parameter can

be either a number or a string so we

annotate it with number or string

so using a vertical bar we can create a

union type now

now

we can call this function in two ways we

can give it a number or

a string like 10 kilograms okay

now let's finish up this example so

we're going to annotate the return type

and return a number

now in this function at this point we

don't know if the weight is a number or

a string so if we type weight period we

only see the properties and methods that

are common between numbers and strings

so both numbers and strings have these

three methods to locale string to string

and value of so here we are not seeing

methods that are specific to numbers or

strings and this is where we use a

technique called narrowing so we're

going to narrow down this union type

into a more specific type so here we can

say if type of weight equals

equals number

number

now in this block the compiler knows

that the weight is a number so if we

type weight period we see all the

methods that are available in number objects

objects

and by the way we don't necessarily need

the code blocks here in this line if you

have a one-liner and type weight period

we still see all the methods available

in numbers okay

so what are we going to do here we're

going to return weight times 2.2 otherwise

otherwise

if you end up here that means weight as

a string so now we see all the

properties and methods of string objects okay

okay

so to finish this example

here we're going to return

first we need to convert the weight to

an integer so we call

parsend pass the weight

and then multiply it by 2.2 okay

okay

now back to the terminal let's compile

our code and see what we get

all right we're going to go to index.js

take a look our union type is not part

of the generated javascript code it's

purely for the compiler to do is type checking

so in the previous lesson you learned

that using a union type we can say a

variable or a function parameter can be

one of many types right now we have

another technique for combining types

called intersection

so instead of a vertical bar

use an ampersand

and now this type represents an object

that is both a number and a string at

the same time now technically this is

impossible we cannot have an object that

is both a number and a string at the

same time so let's look at a more

realistic example

i'm going to use our type alias to

define a new custom type called

draggable so this represents an object

that can be dragged on the screen now

what properties or methods do we need in

a draggable object

well at least we need a method called

drag which takes no arguments and

returns void

now similarly we're going to define

another type called resizable

and here we need a resize method that

should take two parameters like the new

width and the new height but for

simplicity let's get rid of all that

noise and just add no parameters and say

this method returns void okay

so now we have two separate types and

using an intersection type we can

combine them into a new type so we can

define a new type called ui widget which

is draggable and resizable so this is an

intersection type

now with this type in place we can

declare a variable

called textbox

which is a ui widget

now to initialize this object we need to

implement all members of draggable and

resizable objects so we need to

implement the drag and resize methods so

drag as a simple method

and so is the resize method

sometimes we want to limit the values we

can assign to a variable this is where

we use literal types so let's declare a

variable called quantity and assume that

the quantity can either be 50 or 100 but

nothing else now here's the problem if

we annotate this with number

this can take any numbers any valid

numbers in javascript right so to limit

the values we can use here we use a

literal type so instead of annotating

this with the type like number

will annotate it with a literal meaning

an exact or specific value so

i'm going to replace number with 50.

now quantity can only be set to 50

nothing else so if you set it to 51 you

get a compilation error now you might

think this is not useful well that's

true but what if we apply the union

operator here so we can say the quantity

can be 50 or 100. now we can set it to

50 or 100 right but we're not done yet

we can make this code even better so

instead of hard coding these literal

values here we can create a custom type

using a type alias so we define a new

type called quantity

which can be 50 or 100 and then we

annotate our variable with our new type

so what we have over here is called a

literal type

now literals don't have to be numbers

they can also be strings for example we

can define a new type called metric

which can be centimeter or inch

inch okay

okay

so that's all about literal types next

all right let's talk about working with

null values so by default typescript is

very strict about using null and

undefined values because as you probably

know these values are common source of

bugs in their applications

so let's look at a real example let's

define a function

called greet that takes a name which is

a string

now in this function we just want to do

a console.log and print name the to uppercase

uppercase

now in vanilla javascript we can call

this function and accidentally give it

null or undefined that is totally valid

javascript code but when we run our

program our program is going to crash

because we cannot call this method on a

null or an undefined object so this is

why null and undefined values are a

common source of problems and that's why

by default the typescript compiler stops

us from using null or undefined values

so here we have an error saying argument

of type null is not assignable to

parameter of type string

let me show you where this comes from

so let's go to our ts config file

in the type checking section

we have a compiler option called strict

null checks that this is enabled by

default as part of the strict option

so if strict is set to true strict null

checks is also true but we can overwrite

it and turn off this feature now

now

back to index.ts the error is gone so

this is why by default typescript is

very strict about using null values

so technically we should never use this

option we should never turn it off so

i'm going to rewrite this back

but what can we do in this function what

if we want to have the ability to use a

null value perhaps if we don't have a

name you want to print just a generic

message like hola meaning high in spanish

spanish

so here we can say if name is truthy

meaning it has a value then we're going

to print name.to uppercase otherwise

if it's null or undefined we're gonna

print hola okay

but we cannot pass a null value here

this is where we use a union type once again

again

so we annotate this parameter with

string or no

now we can pass a null value but we

cannot pass undefined

because this is not a valid value for

this parameter so if you want to have

the ability to pass undefined as well

again we're going to use the union operator

now when working with nullable objects

we often have to do null checks for

example let's define a type alias called customer

customer

and give it a birthday property of type date

date

now let's define a function for getting

a customer from a database so

we give it an id which is a number and

we get either a customer or

null in case there is no customer with

the given id

now in this function let's write some

basic logic like return if id equals zero

zero

then we return null otherwise we return

a customer object

with this birthday

pretty simple

now let's declare a variable

and here we call getcustomer and pass zero

zero

now let's imagine we want to print the

customer's birthday so console.log and here we pass customer dot birthday

here we pass customer dot birthday now here we have a compilation error

now here we have a compilation error because customer might possibly be no

because customer might possibly be no so as you know one way to solve this

so as you know one way to solve this problem is like this

problem is like this we check if customer is not known then

we check if customer is not known then we execute this piece of code

we execute this piece of code now let's take this to the next level

now let's take this to the next level and assume that under certain

and assume that under certain circumstances this function might return

circumstances this function might return undefined so we add undefined here

undefined so we add undefined here and now we have to expand this if

and now we have to expand this if statement and check for undefined

statement and check for undefined so if customer is not null and it's not

so if customer is not null and it's not undefined either

undefined either then we print the customer's birthday

then we print the customer's birthday that works but there is a simpler way to

that works but there is a simpler way to write this code in typescript we can

write this code in typescript we can remove

remove this if statement

this if statement and use what we call the optional

and use what we call the optional property access

property access operator

operator so because customer might be null or

so because customer might be null or undefined right after it we add a

undefined right after it we add a question mark and then we add the

question mark and then we add the chaining or the dot operator so this

chaining or the dot operator so this question mark followed by the chaining

question mark followed by the chaining operator is called the optional property

operator is called the optional property access operator so now this piece of

access operator so now this piece of code gets executed only if we have a

code gets executed only if we have a customer that is not null or undefined

customer that is not null or undefined let's see this in action so we're

let's see this in action so we're passing 0 and we get a null object so

passing 0 and we get a null object so if we execute this code

if we execute this code we get undefined so the result of this

we get undefined so the result of this expression is undefined but if we pass

expression is undefined but if we pass one we get an actual customer object so

one we get an actual customer object so we'll see the customer's birthday

we'll see the customer's birthday on the console

on the console there you go okay so this is optional

there you go okay so this is optional property access operator now we can take

property access operator now we can take this to the next level let's make the

this to the next level let's make the birthday property optional

birthday property optional now let's say we want to print the full

now let's say we want to print the full year

year of the birth year so over here

of the birth year so over here we have to call dot

we have to call dot get

get full year

full year now once again we have the same

now once again we have the same compilation error because the birthday

compilation error because the birthday property might possibly be undefined

property might possibly be undefined once again to solve this problem we can

once again to solve this problem we can use the optional property access

use the optional property access operator so now this piece of code gets

operator so now this piece of code gets executed only if you have a customer and

executed only if you have a customer and that customer has a birthday otherwise

that customer has a birthday otherwise the result of this expression is

the result of this expression is undefined okay

undefined okay now we also have

now we also have what we call

what we call optional

optional element access operator and this is

element access operator and this is useful when we are dealing with arrays

useful when we are dealing with arrays so we might have an area of customers

so we might have an area of customers and we want to print the first customer

and we want to print the first customer on the console now if this array is

on the console now if this array is going to be non or undefined of course

going to be non or undefined of course we have to check

we have to check if customers is not null and it's not

if customers is not null and it's not undefined

undefined then we're going to access the first

then we're going to access the first element now this is where we can use the

element now this is where we can use the optional element access operator so

optional element access operator so before accessing this element

before accessing this element we use a question mark and a dot okay

we use a question mark and a dot okay now we also have

now we also have the optional call operator which has the

the optional call operator which has the exact same syntax so let's imagine

exact same syntax so let's imagine we have a variable called log which is

we have a variable called log which is going to reference a function

going to reference a function so for simplicity i'm going to annotate

so for simplicity i'm going to annotate this with any

this with any and this might be set to a function

and this might be set to a function like a function that takes a message

like a function that takes a message and

and prints that message on the console

prints that message on the console or we might set this to

or we might set this to no

no right

right now let's say we want to call this

now let's say we want to call this and pass some value if we run this

and pass some value if we run this program our program is going to crash

program our program is going to crash because log is not so this is where we

because log is not so this is where we can use the optional call operator so

can use the optional call operator so this piece of code will get executed

this piece of code will get executed only if log is referencing an actual

only if log is referencing an actual function otherwise we'll get undefined

hey guys mosh here i just wanted to let you know that this tutorial you have

you know that this tutorial you have been watching is actually the first hour

been watching is actually the first hour of my complete typescript course the

of my complete typescript course the complete course is about five hours long

complete course is about five hours long and goes way beyond this tutorial it

and goes way beyond this tutorial it also comes with exercises and solutions

also comes with exercises and solutions summary notes and cheat sheets a 30-day

summary notes and cheat sheets a 30-day money-back guarantee and a certificate

money-back guarantee and a certificate of completion you can add your resume so

of completion you can add your resume so if you're serious about learning

if you're serious about learning typescript and are looking for a job as

typescript and are looking for a job as a front-end or a back-end developer i

a front-end or a back-end developer i highly encourage you to enroll in the

highly encourage you to enroll in the course in case you're interested i'll

course in case you're interested i'll put the link in the description box

put the link in the description box [Music]

Click on any text or timestamp to jump to that moment in the video

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

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.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube TranscriptPreparing your results…

YouTube Transcript:TypeScript Tutorial for Beginners

Video Transcript

Summary

Core Theme

Paste YouTube URL

Transcript Extraction Form

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube Transcript:
TypeScript Tutorial for Beginners