Original subtitles

So now that we know what TypeScript is,

that we can add types to our programs with it

and how the syntax generally looks like,

let's make sure we can all use TypeScript.

And therefore if you search for TypeScript,

you can visit typescriptlang.org

and that's the official TypeScript webpage

where you can learn more about TypeScript

and where you can also learn how to install TypeScript.

As a side note, if you want to learn way more

about TypeScript, I also do have a complete

TypeScript course where I dive deeply into TypeScript.

In this module, I'll just cover some basics.

So if you want to learn more my full course

might be interesting to you as well

or the official docs of course in addition.

So now to install it locally,

we can click here on install locally

and now we basically need to run this command here.

Now for that, we need to make sure that Node.js is installed

but we needed this for this course and for using React

anyways and therefore that should already be installed.

So therefore we can now run this command

to install TypeScript.

And running this command will install TypeScript

into a specific project.

If you wanna install it globally on your system,

then you need to run npm install -g typescript.

But often installing it just into one specific project

is enough so that you can then use TypeScript

in that project into which you install it.

And therefore that's what I'll do here now.

I will open my terminal, which is integrated

here into this project and run npm install typescript.

And actually for this I'll first of all run npm init -y

to create a empty package.json file

because we will need that to install dependencies

and then I'll run npm install typescript.

And this will now install TypeScript into this project.

Please note, this is still no React project.

This is still just a standard web project.

We'll move towards our React project a little bit later.

So now TypeScript is installed.

With that installed, we can now invoke

the TypeScript compiler and that is really important.

As you learned, TypeScript is a superset to JavaScript

extending the JavaScript syntax with those extra types.

Now the important thing to note is that TypeScript code

does not run in the browser though.

So if you try to execute TypeScript in the browser,

it will fail.

Therefore we need to compile TypeScript to JavaScript.

And during that compilation process,

all our type annotations will be removed

because JavaScript doesn't know those annotations.

But it's during this compilation step

where we will be notified about errors.

In addition to the notification we get in the IDE already.

So it's this compilation step which then will warn us

of potential code problems if we haven't spotted

them in the IDE before and then it's that compiled code

which will run in the browser.

Now to invoke this compiler,

we need to run this command here npx tsc.

So now if I run npx tsc like this,

you'll see that I get an error though.

I get this error because if I run this command

just like this, then it expects

a TypeScript configuration file in that project folder

that tells TypeScript which files to compile.

Now we'll add such a configuration file later,

for the moment we can run this command slightly modified.

We can point at a file that should be compiled.

In this case, with typescript.ts.

So if I run npx tsc with typescript.ts

then this file is getting compiled.

And hence now here I get one compilation error,

the same error my IDE warned me about before.

So if I haven't spotted it in the IDE,

now I get an error here.

Now you will notice that a no-typescript.js file

was created nonetheless.

That simply happens because by default

even if you get an error during the compilation

it's still completes.

It just warns you because of that error

but it still gives you a JavaScript file.

And this JavaScript file, sorry this one here

is now based on our TypeScript file.

And you'll see it's almost the same code

just without the types and actually it's changed

const to var because by default right now,

it's still also compiles to code

such that it runs in older browsers as well.

That is something which can be overwritten

with the TypeScript conflict file

but we don't have such a conflict file yet

and therefore we have this code change as well.

But of course you see that other than that it's the same

code as we wrote in the TypeScript file.

Now of course we should get rid of that error though,

otherwise using TypeScript doesn't make any sense

and hence I'll convert my two numbers,

my two strings to numbers

and if I save this now, the error is gone in the IDE.

and if I now compile again, this also compiles

without errors and we still have the same

JavaScript output as before.

But now it's this JavaScript file which we could

import here and use here.

If I now save this and then reload this page,

I get seven again but now if we continue working

in the TypeScript file and then compile it to run

in the browser, now we actually protect ourselves against

errors like we hadn't before, thanks to TypeScript.

And now with that installed and now that we understand

what this compiler does and how it this generally works,

let's dive into some core features you need to know

when working with TypeScript before we then thereafter see

how we can use TypeScript with React.