Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed TypeScript Basics!
You have completed TypeScript Basics!
Preview
TypeScript is a superset of Javascript, meaning it shares the same basic syntax as JavaScript and supports all the features that JavaScript has. It also includes some features that JavaScript doesn’t have.
How to access Developer tools in other browsers
- Safari: Enable developer menu > Right click > Inspect Element
- Firefox: Right click > Inspect
- Edge: Right click > Inspect
const name = '';
typeof name;
const age = 2;
typeof age;
let height;
typeof height;
height = '100';
typeof height;
height = 100;
typeof height;
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Before we start the course
on the basics of TypeScript,
0:00
I think it would make sense to first
explain what TypeScript actually is.
0:04
TypeScript is a programming
language created by Microsoft
0:10
that is closely related to JavaScript.
0:15
It shares the same basic
syntax as JavaScript and
0:19
supports all the features
that JavaScript has.
0:23
If you look online for
the definition of TypeScript,
0:28
you might see being called
a superset of JavaScript.
0:33
So, what is a superset?
0:37
Well, it's pretty much
what I explained earlier,
0:41
a language that contains all
the features of another language.
0:45
But includes some features that
the original language doesn't have.
0:51
So TypeScript is a bit like
a super version of JavaScript.
0:57
But the reason it's called TypeScript and
not something like SuperScript,
1:03
or SuperJavaScript is because
it adds something to JavaScript.
1:10
That helps you the programmer create
less errors or bugs as you write code.
1:17
Types, JavaScript is
a loosely typed language,
1:24
which means you don't
have to tell it what type
1:29
information is going to
be stored in a variable.
1:34
I know that sounds a bit confusing.
1:39
So let me explain with some code.
1:41
If you want to follow along all
the code that I'm going to write is in
1:44
the project folder, that
you can download for this course.
1:49
If you look for the download tab below
you should find the zipped folder,
1:54
which you can download, and
that will have a bunch of files in there.
1:58
If you have that open,
locate the "getting started"-folder and
2:03
look for a file called: "What is TypeScript".
2:08
But it's completely fine if you just want
to sit and watch what I'm going to do.
2:12
I'm going to right-click on my browser.
2:16
I'm using Chrome and click on
the Inspect link right at the bottom.
2:19
Now I've zoomed in quite a lot
on my inspector view, but
2:25
you should see a Console tab on the top.
2:30
And you might have some information here.
2:34
You might not but
I want you to clear it out.
2:36
All browsers run JavaScript, so
2:40
the console should execute
anything we type into here.
2:43
This console is useful for
testing small bits of code.
2:48
Let's create a constant
variable called name.
2:52
And let's give this value
of an empty string.
2:57
The JavaScript compiler at
this stage is clever enough
3:03
to give our name variable
a data type of string
3:07
As you can see here,
I've just used the typeof keyword and
3:16
tested it with our name variable.
3:20
The typeof operator here will return
the type of a variable as a string.
3:24
If we create another variable called
age and give that a value of 2.
3:29
You'll see that this has a typeof number.
3:37
JavaScript actually has seven
different basic data types,
3:43
including string and number.
3:48
We'll talk more about basic data
types later on in this course.
3:51
The variables I've just created
have been constant variables.
3:56
So we won't be allowed to change
their value As you can see here.
4:01
I get an error if I try to
reassign the value of name.
4:10
But if I create a variable with the let
keyword, I can reassign that value.
4:17
So, let's clear the code
we have in our console and
4:23
create a new variable called width.
4:27
If we check the type of this variable.
4:33
Since JavaScript has no idea
what type this width is going
4:38
to be it's giving it a type
of undefined by default.
4:43
If we gave our width
variable a value of 100.
4:48
And then check the type.
4:54
I'm going to press the Up key on
my keyboard to get the previously
4:56
executed code.
5:00
You'll see JavaScript has
given it a typeof number.
5:02
If I change the value of
with again to a string.
5:07
And then check the type JavaScript
has given it a data type of string.
5:12
JavaScript dynamically
changes the data type of this
5:18
variable whenever the value changes.
5:22
Let's go back to the slides.
5:25
There are a few other
languages that work like this.
5:28
PHP, Ruby, and Python work the same way.
5:32
TypeScript, on the other hand,
adds optional static typing to JavaScript.
5:36
This means you can manually
add type data to variables or
5:43
function arguments to your code.
5:49
There are other languages
that work like this as well,
5:52
such as Rust, Kotlin, and Go.
5:56
Unlike JavaScript, with TypeScript,
if you add type data to a variable,
5:58
you won't be allowed to change
that value to a different type.
6:04
Remember the width variable from earlier?
6:10
If I had given this a data type of
number when creating that variable,
6:13
TypeScript would not allow
me to assign it to a string.
6:18
But if I assigned it a number value,
that would be fine.
6:23
Now maybe you're thinking,
6:28
isn't it a good thing that JavaScript
dynamically adds data types?
6:30
What's even the benefit of
adding types to my code?
6:35
That's honestly a really good question.
6:39
And we'll cover that in
detail in the next video.
6:42
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up