Hey guys, what's up everyone? And welcome back to a new video with this video
I want to introduce a new tutorial series in which we will learn typescript together now while learning typescript and what typescript
is and so on and so forth. I will cover that in a second, just a little bit of uh overview over how the tutorial
series will work up front and also why I decided to learn a typescript uh just to give you a little bit of a heads
up here. Now, uh if you don't know me, I'm Stefan, I'm running this channel
I create beginner friendly uh tutorials on programming, web development, Linux, ethical hacking and other fun stuff
And um I I A I was taught developer and I decided to learn typescript or to start learning typescript about two weeks ago after
putting that off for far too long. I have a couple of friends who are working for larger companies as senior developers and as I
was talking to them in the past couple of weeks and months, they convinced me to give typescript a try
Now, I haven't looked into typescript earlier because the general content was on youtube and from other programming content creators um
that you don't need that, you don't really need typescript if you are like a freelancer or you're working only on side projects
smaller projects and so on. And the typescript is more like a language that you use in larger teams or when you work in larger
code bases and stuff like this. So this kept me, kept me off in the past from learning typescript
But now that I'm actually actively looking for some uh developer positions to uh expand on my coding skills
And just because I want to mix things up from the self-employment route to just work with the team a little bit again
Um I found at least here in Germany and almost each and every job description is written that either typescript is straight up a requirement
or at least it's listed as a bonus. Nice to have thing to know typescript
which if you think about it, of course, if you apply for a position and uh you don't know typescript
you are a person who knows typescript. He probably has a slight edge over you
And also after talking to a lot of my developer, friends who are using typescript who learn typescript
they actually never went back to classical or Vanilla javascript because they like typescript so much and they say it's a much better language than
Vanilla Javascript. And once you understand and learn typescript, that probably makes sense to you
That's at least what they said. And I have to say now, after two weeks of using almost exclusively typescript in my own project
um I have to say, I, I start to see the benefits of it
especially when it comes to uh static typing and stuff like this
Uh where you just see the errors right there in your code rather than searching for them after you run your code or you build
your project. Um So that makes a lot of sense to me. I think um it's a little bit extra code that you write
But I think the, the, the work that it saves you in the end um is well worth it
Now, this will be a multipart tutorial series. I will separate this series
So we cover each topic in a separate video. I want to do this because I want to make this um mini course free course
uh A DH D friendly and I want to make it accessible for beginners that you can take it step by step and just consume
the content in smaller chunks which I think makes it easier to learn and stay motivated
At the end of that, I will also go ahead and um create a crash course
When we are done with the, with the series with the multi video part series
I will go ahead and create a typescript crash course that kind of summarizes all of what we learned
Now
Uh keep in mind, keep a beginner mindset. Uh I'm still a beginner with typescript
I'm still a beginner when it comes to programming. Probably I would still consider myself that
So if you see any kind of errors in my teaching or in what I tell you
I cross reference and double check everything that I write uh multiple times usually
But um if you find any errors, feel free to point them out to me in the comments
Also, let me know in the comments below what you think about this video series. If you're excited for it
definitely make sure to subscribe to the channel because I will publish all of those videos in numeric order and I will put them in
a separate playlist as well for easy access for you guys. Sorry
there was a bit long of an introduction here, but I felt like I need to kind of make clear where are we going with
this series? And I want to also take this as kind of a accountability thing for myself that I will push through with my typescript
learning. And then I will really go forward and learn typescript with you guys together
So to get this, uh that being said, let's have a look and this first video will just give you an overview over why typescript
what typescript is. And uh what else you need to follow along with this free mini course here on youtube
All right guys. Let's dive into typescript. If you are a regular on this channel
you already know how I like to produce and deliver my content
But for everybody who is new here, I just want to give a quick, a quick heads up on how we are going to work
with this typescript course. And the way we are going to do it is I usually always provide a written article that goes along with
the video so that you can easily go ahead and look at the code uh while you're following through with the video
And also you can take your time, read through the article or read through certain parts over and over again if you don't understand them
And uh the most convenient thing is of course that you can just go ahead and copy and paste some code
So if you go on my blog C O E dot com, I of course, leave the link to the corresponding articles in the video
description below for you for easy access. But if you go there manually and you click to learn or
or learn and then you choose typescript or any other language that you're interested in learning
then you will end up on the typescript category. And in here
there is always an overview up top which shows you all of the published articles so far
So far, there are not that many because I'm just in the process of producing them. Um But for this particular video
there will be the typescript overview article that corresponds with this video
And if you pull it up, you can see that you can comfortably go ahead and look at the code or just go ahead and
copy and paste portions of the code to play around with it. One more thing to mention is that we are also using a repel
it for this whole tutorial series. Sometimes we use the typescript Playground as well
but most of the time we are going to use Rale it. And uh we simply use repli because it makes for easy access to
the code that we are looking at. So you can easily go ahead and uh pull up a certain repository
You don't need to clone anything with github or something like this. You just go to repet you click on my account or of course
I leave the link in the article as well and then you go to C O in here and then you want to choose the
corresponding folder which is typescript in our case. And then there is a typescript overview file which always has the same name as the topic
that we cover in the article. And if you open that up, you can go ahead and start coding
Now, of course, this is empty because we are just going to create it right now as we are working through this video
So before I show you some code examples here let's quickly uh actually talk about what
what is typescript. So typescript is a popular programming language that was developed by Microsoft
It is a statically typed super set of javascript that after a compiler compiles down to plain javascript code
I'm going to show you this in a second how that looks like we can use the typescript playground for this typescript adds optional static
typing classes and interfaces to javascript providing developers with a more structured and organized way to write code
Now, let's dive in like what does static type checking or static checking actually mean in a typescript
So that's one of the key features of typescript that's static checking
And this means that typescript can catch errors in your code before it is run as opposed to dynamic checking
which is done at run time in javascript. That means you will see an error
which I'm going to show you here in a second. We're just gonna define some variables, let's say um
let test equals uh string or a hello, let's say hello. And this is default
vanilla javascript here. And we don't see any errors. And uh if we don't declare a type here
there is something called type inference which automatically sets this type to a string as you can see when you hover over there
Uh more on that later. But just so you know, um if you know
wanna go ahead and we want to set test to another uh let's say uh string
We, we wanna set test to um, hey
typescript doesn't complain, doesn't tell us anything. And if we run the code
let's do a quick console to log, uh test, it will print the word or the string
Hey, there we go. So this is all fine. But what if we want to go ahead and now we wanna say
uh test equals to number four
then we get a squiggly line under here and it tells us that the type number is not assignable to type string
because it assigns the actual variable to the type of string automatically
This is called type inference. And uh I will talk more about this later
Don't worry about it now, but just that you see what the aesthetic checking in typescript means
it means that the uh types are checked right when you write the code so you directly can catch the error here
Now, this wouldn't happen in javascript in Vanilla javascript, you wouldn't get this notification here
Um You could actually go ahead and set this to number four even it is a string
to demonstrate it to you a little bit better. Let's go ahead and create a new file here
You don't need to do this. You don't need to create any file at this moment. I'm just going ahead and creating a javascript file
to show you what I mean. So if I go ahead and copy this exact code
over into the javascript file and I go ahead and save it
and run it first to see we don't get any error here
And it's actually setting the value of test to the number of four
So you can see there is no static checking, of course in a classical javascript
So how do you actually set types manually, which is the whole point of using typescript
So I'm going to delete this example and I'm just gonna uh make a new comment here and we say manually setting types
And again, you can open up this repel it right after watching the video while you're watching the video
Actually, before you start to watch this video, you can open up this rappel and just play around with the code yourself
So let's say we want to define a variable with a type. Let's say we do let count and we want it to be a
number. Now we do let count, call on and then the type that we want to assign to it afterwards and then we do
our equal like we would do it normally and then we add it to or we assign it the number five
Now, in this example, we define the variable count with the type of number
It should be pretty easy, pretty easy to get, pretty easy to understand
Um We can also go ahead and do the same thing for let uh last name and assign that to a string which is of
course, then a string value here
and we set that to uh powers whatever. And of course, you can also do a uh is married
and uh make that a
and we say true
something like this. Don't worry at all. If this looks confusing to you right now
we will cover all of these things in depth in the following videos. This video should just really serve as an overview and as a
starting point of this tutorial series. So I won't go in depth in any of those topics
Uh I just want to show you one more thing when we, for example
compare uh typescript with javascript, which we can do at typescript playground at the typescript typescript playground
So you go to Typescript language arc and then you go to the playground. Here
there are a bunch of examples that you can look at when it comes to typescript
For this example, here is a great example to use. If you look at this
there is a bunch of typescript code and don't worry if you don't understand it at this moment
it's not important at all. I only want to show you how that compiles down to javascript so that you get an idea uh what
that actually means. So interfaces don't exist in javascript. It's a typescript thing same as setting those types uh like we do here
Um And we can actually see what it compiles down to so on the left side here
we have typescript and this is what it looks like when you compile it into javascript
So you can see it's much less code actually. Um But on the other hand
we have the strongly type language here which then compiles it down to less code
which is great. So you can see that this really um shows you that it's very
very useful to have those types set in your code, especially if you work together with a larger team with other people
or even if you just come back to your own code later on, and you directly see that first name is a string
last name is a string and H is a number. It can be very
very useful to quickly get back into some old code that you have written a while ago or stuff like this
Now to sum this up for you guys. Why do we actually use typescript now
Typescript offers several benefits to developers that make it a popular choice for many projects
One of the main reasons is that it allows for better code organization and maintainability
making it easier to write and maintain large scale applications. It also offers a smoother development experience as errors are called early in development
process and autocomplete features help to speed up coding. Um There are some key features of typescript that I want to also share with you
guys that is of course, it's a statically typed language. So typescript provides static typing
allowing for early error detection and improved code consistency, which we have seen already
Uh it's compatible with javascript. So typescript is a super set of javascript
meaning you can use it with existing javascript code. It's a object oriented uh language
So typescript supports classes and interfaces making it ideal for object oriented programming
And of course, it comes with tooling support. It comes uh with various tools that can help with code
navigation, refactoring, and debugging. So to summarize guys, I really recommend you uh work through this article
There's a little bit more information there and also play around with the uh repet repository that we have just created or write your own
typescript, just play around with it a bit, get warm with it. And then in the next video
we will pick up on uh the next topic which is which we can look at right now
which will be the next video that will be released. I think it's type annotation or actually typescript installation and via code set up
I don't think you really need that, but I provide a video on it anyway, it's just a very quick one
And then we go ahead with typescript type annotation and typescript functions
The next videos will be much uh shorter than this one as I said
introduction, takes more time and so on and so forth. So be ready for it
I hope you like this if you like it. Make sure to subscribe to the channel that you don't miss out when I publish a
new video. I also share it over on Twitter every time I uh do publish something
You can sign up for the newsletter here for the free series where I will always send an email out when I publish or release
a new video or article. And you can catch me over on Twitter with Stefan Rose
I hope to see you on the series, guys. Let's tackle this, let's learn typescript together and let's make it a fun journey
All right guys, I'll see you on the next one