Complete TypeScript Course: From Basics to Advanced React Integration

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,

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 Mash Hamadani and I've taught millions of people how to advance their software engineering skills through my

YouTube channel and online school codewithm.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. No, 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 in case you are

interested. 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 coding in general. 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++, C 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 catch 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 typeyped 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 catch 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. All right, that's all

about TypeScript. Next, we're going to set up our development environment. [Music]

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 node 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 -ash 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 doom. But that aside, let's go ahead and install the

TypeScript compiler. Okay, great. Now, to verify our installation, we type TSC, that is

short for TypeScript compiler-V to get the version. So here I'm running Typescript version

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 code.visisual. at visualstudio.com. All right, so go ahead and set up your

development environment because in the next lesson, we're going to write our first TypeScript

[Music] program. All right. Now, I'm going to go to my desktop folder and create a new

folder for our project called Hello-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. 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 super 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 back tick. So we can open

the terminal window right here and using TypeScript compiler we can compile index.ts. 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 age 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.ts. 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 emoscript is a standard or a specification while JavaScript is

an implementation of that 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 vir 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 configure the TypeScript compiler.

[Music] All right, let's talk about creating a configuration file for the TypeScript

compiler. So here in the terminal, we run TSC double-enit. So this created a

configuration file called tsconfig.json with these settings. So let's close the terminal window and open

tsconfig 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 you remove this value and press control 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 root there which specifies the

directory that contains our source files. So let's remove the comment by pressing command and slash on Mac or

control and 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 root there to period/source. Now, we have a similar

setting here under the emit section. That setting is called out. 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 dist 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,

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 tsc 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 tsconfig. As we go through the course, we'll explore more of these useful

[Music] settings. 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. So

back to the terminal. Let's recompile our code. Good. Now look into this folder, we have a new file called

index.js.mmap. 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 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 break point. So when we start debugging, the execution stops right at this line at this break point. From this

point forward, we can execute our code line by line. Okay. Now we go to the debug panel and click on create a

launch.json file. Now from this dropdown 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. TS and our output files are stored in our workspace in 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 tc colon space build spacey space tsconfig.json. Make sure to type this

out exactly as I've shown you here. All these spaces matter. Okay. So with this setting, we're telling VS Code to use

the TypeScript compiler to build our application using this configuration file. Okay. Now we go back to index.ts

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 break point. 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

for 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 outside of a function. We have restart and stop. So in the tool tip 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 will see the value of this variable

getting 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.

Currently, it's 20. So, let's step over this line. Now, we're on this line. So, let's step over this as well. Now, age

got 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 age. 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 VS Code. 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. 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, topples, 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. [Music] So, JavaScript has built-in types like

number, string, boolean, null, undefined, and object. Now, TypeScript extends this list and introduces new

types like any, unknown, never, enum, and topple. As we go through this section, you will learn about all these

types 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 1 2 3 4 5 6 7 8 9. 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 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 you remove the 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 you 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 next

[Music] lesson. In TypeScript, we have a new type called any which can represent any

kind of 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 it 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 an 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 control

and P to bring up the search box and go to 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,

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 benefit of TypeScript. Okay, so back to TS Config. I'm going to revert

this code. Good. So, that's all about the any type. Next, we're going to talk about

[Music] arrays. All right, let's talk about arrays. In JavaScript, we can declare an

array like this. 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. 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, the compiler can

still infer or guess the type of this variable. Great. But what if we had an empty array here? 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 you type numbers 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. Next, we're going to talk about

[Music] topples. 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 a name. 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. So, we have a fixed length array with exactly two elements, nothing more, nothing less. So if you

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 you 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 topos 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

here in the terminal, let's run TSC. 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. So, a tpple is a fixed length array where each element has a

particular type. Now, as a best practice, I would say restrict your tpples 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

topples are useful when we have only two values like key value pairs. Next we're going to talk about

[Music] enums. Typescript has another built-in type called enum which represents a list

of related constants. If you know C# or Java, you have seen enums before. We have the exact same concept here in

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, 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. 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. Now when we define an enome we don't need to define

these three constants anymore. And by default the TypeScript compiler assigns the first member the value of

zero and other members values like one two and so on. Now if you don't want to use these values we can explicitly set

values. So we can set small to one and then medium becomes two and large becomes three. We can also use string

values 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 one 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 and set it to size dot medium. Okay, so this is how we can use enaps. 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. Good. And then use node to

execute our JavaScript code. So we go to the disc 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. 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 one more time. Now we don't see all that code

anymore. We only have one line for setting my size to two. 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 enums using the constant keyword, the compiler will generate more optimized code. Next,

we're going to talk about functions. [Music] Let's talk about how Typescript helps us

prevent common problems when working with functions. So, let's define a function called calculate tax and give

it an income parameter of type 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

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 we go after the list of parameters add a colon and specify the return type like

number or void if you're 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 a string we get a compilation error immediately. So

as a best practice always properly annotate your functions. Now let's temporarily return zero. Okay, look at

the income parameter. This is an unused parameter. Now we have a compiler option for detecting is unused 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.

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. Now here we have another

compilation error saying function lacks 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 going to 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. Again, we have to explicitly turn this on because

this is not part of the strict setting. Okay. Now back to our 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. 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 back to our code, we have a yellow

warning saying x is declared but it value is never read. So now we can delete this and make our code cleaner.

So this is the basics of functions. Now let's add a second parameter here called tax year of type number. Now we have a

warning here saying tax year is declared but it 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, you 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 here. 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 it 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 you don't supply the tax here, 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, we give it a default value

like this. Now we can call this function with or without a tax here. If we don't supply an argument for the tax here,

this value will be used. Otherwise, what we pass here will overwrite the default value. Okay. Now,

with this default value, we no longer need to use this ugly expression. We can simply 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, and

no implicit [Music] returns. 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. 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. But we have a new kind of error.

Let's find out. The compiler is saying property name is missing. So the reason we are 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 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. 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 ID of an employee anytime and this is not

valid. This is where we use the read only modifier. So we apply it 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 retire

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 date 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 values. So we're going to

use weight. Now you have a compilation error saying property retire is missing because when initializing this object we

haven't supplied the retire method. So let's do that real quick. All right. Retire is going to be

a method with one parameter and over here I just want to log 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 better way to work with

objects. 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 [Music]

started. All right. 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 a type keyword.

Then give our new type a 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. 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

using a type [Music] ads. 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. 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 we can call this function in two ways. We can give it a number or a

string like 10 kilogram. Okay. Now let's finish off 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 you type wait

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 local string to string and value of. So here we're 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 number. Now in this block the compiler

knows that the weight is a number. So if you type weight period we see all the methods that are available in number

objects. And by the way we don't necessarily need the code blocks here in this line. If you have a oneliner and

type wait 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 time 2.2. Otherwise, if we end up here, that means weight is a string. So now we see

all the properties and methods of string objects. 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. 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 it type checking. [Music]

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 amperand. 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 dragable. So this represents an object that can be dragged on the screen. Now what properties or methods

do we need in a dragable 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 dragable and resizable. So this is an intersection type. Now with this type in

place we can declare a variable called text box which is a UI widget. Now to initialize this object we need to

implement all members of dragable and resizable objects. So we need to implement the drag and resize methods.

So drag is a simple method and so is the resize method. So this is type intersection in

[Music] action. 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 a type like number, we'll 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. It

can also be strings. For example, we can define a new type called metric which can be centimeter or

inch. Okay, so that's all about literal types. Next, we're going to talk about nullable

[Music] types. 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 our 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.2 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 tsconfig 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 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 revert 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,

we want to print just a generic message like hola meaning hi in 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 going to print hola. Okay but we cannot pass a null value here. This is where we use a union type once again. So

we annotate this parameter with string or null. 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 [Music] operator. Now when working with nullable

objects we often have to do null checks. For example let's define a type alias called customer.

and give it a birthday property of type 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 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 get

customer and pass zero. Now let's imagine we want to print the customer's birthday. So console.log and here we

pass customer. thing. Now here we have a compilation error because customer might possibly be

null. So as you know one way to solve this problem is like this. We check if customer is not null then we execute

this piece of code. Now let's take this to the next level and assume that under certain circumstances this function

might return undefined. So we add undefined here. And now we have to expand this if statement and check for

undefined. So if customer is not null and it's not undefined either then we print the customer's birthday. That

works but there is a simpler way to write this code in Typescript. We can remove this if statement and use what we

call the optional property access operator. So because customer might be null or undefined right after it we add

a question mark and then we add the chaining or the dot operator. So this question mark followed by the chaining

operator is called the optional property access operator. So now this piece of code gets executed only if we have a

customer that is not null or undefined. Let's see this in action. So we're passing zero and we get a null object.

So if we execute this code, we get undefined. So the result of this expression is undefined. But if we pass

one, we get an actual customer object. So we'll see the customer's birthday on the console. There you go. Okay. So this

is optional property access operator. Now we can take this to the next level. Let's make the birthday property

optional. Now let's say we want to print the full year of the birth year. So over here we

have to call dot get full year. Now once again we have the same compilation error because the birthday property might

possibly be undefined. Once again to solve this problem we can use the optional property access operator. So

now this piece of code gets executed only if we have a customer and that customer has a birthday otherwise the

result of this expression is undefined. Okay. Now we also have what we call optional element access operator and

this is useful when we are dealing with arrays. So we might have an array of customers and we want to print the first

customer on the console. Now if this array is going to be null or undefined of course we have to check if customers

is not null and it's not undefined then we're going to access the first element. Now this is where we can use the

optional element access operator. So before accessing this element we use a question mark and a dot. Okay. Now we

also have the optional call operator which has the exact same syntax. So let's

imagine we have a variable called log which is going to reference a function. So for simplicity I'm going to annotate

this with any might be set to a function like a function that takes a message and prints that message on the console or we

might set this to null. Right now let's say we want to call this and pass some value. If we run this program, our

program is going to crash because log is null. So this is where we can use the optional call operator. So this piece of

code will get executed only if log is referencing an actual function otherwise will get

[Music] undefined. When working with null or undefined values, sometimes we need to

fall back to a default value. For example, let's declare a variable called speed of type number or null. Let's

imagine that we receive this from the user. For now, I'm going to initialize this to null, meaning the user didn't

provide a value for the speed. So, we get the speed and then we create a right object. And we could annotate this with

a proper type, but let's not worry about it at this point. We just create a write object and set the speed to either the

value we received from the user or a default value. In plain old JavaScript, we can implement this by saying speed or

30. So if speed is truthy, we're going to use that value. Otherwise, if it's falsy, we're going to use 30 as a

default value. Now, I have a question for you. What are falsy values in JavaScript? We

have undefined, null, empty string, false, and zero. Now, what if zero is a valid value for the speed? With our

current implementation, if the user enters zero, zero is going to be ignored because it's a falsy value and we're

going to use 30. So, a more accurate way to implement this scenario is by checking for null. So we can check if

speed is not null then use speed otherwise use 30. Now in Typescript we have a better way. We can simplify this

expression to speed double question mark 30. What you see here is called the knowledge qualising operator. So the

reason this is called knowledge is because this value can be null or undefined. So with this we're saying if

speed is not null or undefined use that value otherwise use 30 as a default [Music]

value. Sometimes we know more about the type of an object than TypeScript. Here's a real example. In JavaScript we

have this document object that represents a document or an HTML page loaded in a browser. Now in this object

we have a method called get element by ID for getting a reference to an element on this page. Now look at the signature

of this method. Here we have one parameter called element ID which is a string and the method returns either an

HTML element or null. So nothing new so far. So let's imagine on this HTML page we have an input field called phone. So

we pass that as a string and then get a reference to that input field. So let's store it in a variable called phone. Now

let's look at the type of phone. It's either an HTML element or null in case that element was not found. But let's

imagine that we do have an element by this name. So the type of phone is definitely HTML element. Now HTML

element is a class defined in JavaScript that represents any kind of HTML elements. It's like the base or parent

class for other types of elements. So we have more specific elements like HTML, input elements and so on. Now elements

of this type have an extra property called value for reading the value entered by the user. However, if we type

phone value, we cannot see that property. Yes, we have other properties like area value max or value min and so

on. But none of these properties represent the value entered by the user. This is where we use a type assertion.

So we're going to tell the TypeScript compiler, hey, I know more about the type of this object than you. So after

this expression, we type as and then specify the target type HTML input element. Now the type of phone is HTML

input element. And if you type phone period, we can see the value property. So this is type assertion in

action. Now in some other programming languages like C# you also have the ask keyword but the ask keyword functions

differently in those languages. In Typescript the ask keyword doesn't perform any type conversion. So it's not

going to convert the object that is returned from this method to a different type of object. This is purely for

telling the compiler that we know more about the type of this object. So if the object that is returned from this method

is not an HTML input element, this line is not going to raise any exceptions and instead when we try to access this

property, the value property, our program is going to crash. So be aware of this. There is no type conversion

happening under the hood. Now there is another syntax to use a type assertion. So instead of using the as keyword, we

prefix this expression with angle brackets. And here we add the target type HTML input

[Music] element. Earlier in the course, we talked about the any type which

represents any kind of value and I told you that we should avoid using it as much as possible. But let's say we're

converting some JavaScript code to TypeScript and we have a situation where we really have to use the any type. So

let's define a function called render that takes a document. Now the compiler is complaining about the type of this

parameter. So to make it silent, we use the any type. Now there is a big problem with the any type here. We can call

document.ove. We can call document.fly. We can call document whatever we want. and there is no type

checking done. So if you run our application and there is no move method on this document object, our program is

going to crash. This is where we use another similar type called unknown. So if you change the type of this parameter

from any to unknown, we immediately see this compilation errors. So the TypeScript