Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started with TypeScript!
You have completed Getting Started with TypeScript!
Preview
Andrew Chalkley shows you how to get up and running with TypeScript.
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
>> [SOUND]
>> I
0:00
am going to talk about getting
started with TypeScript.
0:05
And first off, what is TypeScript?
0:09
In a nutshell, TypeScript is
ECMAScript 6 with optional typing.
0:14
And if you don't understand any of
that I'll tell you what that means.
0:18
In short, TypeScript is JavaScript or
JavaScript is TypeScript.
0:23
In fact you can make use of the new
features that are in EMAScript 6 now,
0:28
and you don't have to memorize a complete
new syntax like Coffee script.
0:34
The most notable additions
to JavaScript is
0:39
the optional typing, and that little
asterisk at the end there means
0:45
that there's a few other things that it
adds to, but for the most part its this.
0:51
And its designed to help
you at development time,
0:57
so what is ECMAScript 6?
1:04
Not everyone might be familiar with what
ECMAScript is, but let's break it down.
1:07
ECMAScript is the standardized
version of JavaScript.
1:13
JavaScript is currently at ECMAScript 5,
well today,
1:18
it actually became standard
that ECMAScript 6 is so
1:22
all browsers should be going full
pelt to implement these features now.
1:27
So the browsers that do
have some of the ECMAScript
1:32
6 specification built in but since its
locked down they're gonna go for it.
1:38
You also may hear that ECMAScript, or
1:45
ECMAScript 6 is also backwardly compatible
with ECMAScript 5 so that's a win.
1:50
ECMAScript is also referred
to as ECMAScript Harmony,
1:57
there's a big who ha in the nerd
community with the Harmony features and
2:02
there was a fork with IO adress which
was basically node with ECMAScript 6 you
2:07
could hear it as ESC 6 or
2:12
ES 2015 because they're releasing new
ECMAScript version every year now.
2:15
So ECMAScript 2015 we're in 2015 so
hopefully there'll be a 2015.
2:20
ECMAScript 6 has been in development for
years and they don't wanna do that again.
2:27
So since ECMAScript 6 is backwardly
compatible with ECMAScript 5, you
2:33
can still use their style of JavaScript
to write instead with TypeScript as well.
2:39
And for the most part you'll be
learning ECMAScript 6 syntax.
2:46
So you're heading toward
the future of JavaScript and
2:53
you're not learning anything
completely new like coffee script.
2:56
So to understand what
optional typing is we need to
3:01
take a slight detour into
statically typed languages.
3:05
A typed language
specifically require you to
3:09
specify the type of
variable that your using.
3:13
So, how would declare a string in Java?
3:17
You do String with very important, name
is equal to Andrew;, with that semicolon.
3:19
Must have that semicolon.
3:27
In C#, it's string with name is
equal to Andrew with that semicolon.
3:28
Gotta have that semicolon, and
in objective C, it's NSString which
3:35
hard comes back to next step which
is the original OS cornel for OS10.
3:41
And the name is equal to Andrew and
you gotta have that semicolon.
3:48
So what is optionally typed?
3:52
Well here's an example of what
an optionally typed language is its
3:54
TypeScript.
3:58
And you need a colon after the name or
after the variable name and
3:59
then the type string.
4:04
However, it's optional so
you don't have to do it.
4:07
There you go.
It looks very like JavaScript.
4:11
But the main reason you would want
to add typings to your code is for
4:15
productivity.
4:20
IDEs and code editors aren't that great
dealing with dynamic languages like Ruby,
4:24
Python, and JavaScript.
4:29
So having types can help hint towards
the editor to say, hey you could make your
4:31
code like this, or"you've put in
the wrong thing here, you should put in
4:36
something like this, without further ado,
let's take a look at some examples.
4:39
You can download Visual Studio Code
from code.visualstudio.com.
4:44
It's a free version of
Microsoft's Visual Studio.
4:48
It's not exactly on the same code basis,
it's its own thing.
4:54
And it's kind of a mix between
a text editor and an IDE.
4:58
It's built for performance.
5:03
Cuz big IDEs tend to be sluggish.
5:05
But it's also it's flexible
like a text editor.
5:09
So without further ado
here's a couple of demos,
5:14
here we have a JavaScript function,
and it's only three lines.
5:19
It's a simple, simple implementation,
but I don't know if you've noticed
5:24
in some editors you can collapse these
things, so not all the code is showing.
5:29
So you may not be familiar with this code,
if you're a developer and
5:34
somebody is giving you this code.
5:38
What do we as a developer.
5:40
We look at the code and see, we use our
own JavaScript interpreter in our minds
5:42
and try and figure out what this is.
5:47
So what is contact?
5:50
Its an object, yeah, so you wouldn't
put a string in there would you?
5:52
Its an object, but there's no real
hint that the contact is an object if
5:58
you were to just look at this
signature of the method.
6:03
So, this is once again this is a really
trivial example and our JavaScript can tap
6:09
into our mind its really good at
handling really small amounts of code.
6:14
So, but when you could bases get in
larger and larger and more complex.
6:21
These, your interpreter in
your mind isn't so good.
6:27
And it can get a little bit confusing.
6:30
So, this is where TypeScript comes in,
helpers not think so much and
6:31
really think about the application
that we're writing rather than,
6:37
oh I need to execute this in my brain and
see what happens.
6:42
And often that doesn't
match up with reality.
6:47
So in order to make
this a TypeScript file,
6:50
we rename it from .js to .ts,
and as you can see,
6:55
it's got sensorss,
highlights, and everything.
7:00
There, there's TypeScript [LAUGH].
7:06
No, that isn't it really.
7:08
I wanna see you go.
7:11
So, TypeScript is used so
that we aren't using so
7:14
much brand resources ourselves
on execute in JavaScript.
7:18
So what we can do is we can get
the computer to think for us.
7:23
So what I could do is do colon and
7:28
object, because that's what
it is its an object, right?
7:34
You see those underlines.
7:39
It says ame does not exist on type object,
7:40
because an object is just like any object,
literal.
7:42
I could even pass it an invalid object.
7:45
I could go like this,
I could do send, email, and
7:47
I know it's an object so I could do that
and that still satisfy the constraints.
7:53
I could do full name is Andrew Chalkey.
7:57
I could do email address,
cuz all I'm doing is passing an object.
8:03
And do andrew@teamtrreehouse,
8:08
that's my real email
address at teamtreehouse
8:13
teamtreehouse.com, you can
email me there if you need to.
8:17
But it says its valid here at least.
8:23
So what we need to do is use an interface.
8:27
And an interface is a TypeScript
construct is not part of ECMAScript 6.
8:32
Interfaces are ways for us to describe
how objects should be created or
8:39
how objects could, its a contract.
8:44
Its a contract on how you right your code.
8:47
Its how you create objects or
pass objects around.
8:49
So I'm going to create
an interface called Emailable.
8:54
And I've seen this as a convention.
9:03
It's a lot of capital lines in
front of all the interfaces.
9:05
This is just so that you can distinguish
this between an interface and sa,
9:09
a regular class.
9:13
And what two things do we want?
9:16
We want a name, and we want an email.
9:19
So, we can type in name here,
the type of the variable,
9:22
that's a string, and then email and
9:28
string, and in order to make
sure that this contract is met.
9:33
In our send email function
we can just switch out this
9:41
object with the interface name,
which is Iemailable and
9:46
instantly you saw that I'm
doing something wrong.
9:51
So let's highlight over it and
see what it says.
9:55
So this is what Visual Studio code and
other edits can Can hint as to do.
9:58
He says the type of full name
string email address string is not
10:03
assignable to the parameter
of type i emailable.
10:07
Property name is missing in the type.
10:12
So let's put in the name.
10:14
Okay.
Still underlined.
10:18
Let's see what it tells us to do now.
10:19
It says the property email is missing in
the type, name, string, email address.
10:21
So we can do that.
10:27
Email, and everything is satisfied.
10:29
There's no underlines.
10:33
I didn't need to run a test suite,
I didn't need to compile this and
10:35
figure out what's wrong, I didn't
have to send it onto a live site and
10:40
have someone do something wrong and
it not work.
10:44
I just did that right there
right then in my editor.
10:47
So I'm saving all this embarrassment
by doing it right now.
10:50
>> What's the same from in there?
10:55
>> Yeah.
That's a good question.
10:57
So the contract is only for
the things that you want.
10:59
So you could do phone 407
555 not putting my real
11:03
one in 123 and it's still satisfied
the contract is about what you require.
11:10
And there's another way
that we can implement a so
11:16
we're using an object literal here
you can actually create your own
11:22
types your own classes,
that implements this.
11:25
So lets take an example like a company.
11:28
So lets say we wanted to create a company.
11:33
That created instances of
these emailable things.
11:39
So a class is an ECMAScript six keyword.
11:44
So this is the syntactic sugar
that was added to the type script.
11:50
Not the typescript
the ECMAScript six langauge.
11:57
So if you're unfamiliar with pro type of
11:59
object orientation this is gonna be
a cause for week taught by yourself for
12:02
your to look at its called
object oriented JavaScript.
12:07
So we're using the ECMAScript five
syntax so that you get how JavaScript
12:10
works under the hood because that's how
this stuff really works under the hood.
12:15
But now we're in ECMAScript
six we can use this syntax.
12:20
So we use another keyword
called implements which is from
12:25
typescript and
we can say it implements the IEmailable.
12:30
And as you can see here it's
saying company incorrectly
12:36
implements the interface IEmailable.
12:41
Property name is missing and
we need to do that.
12:44
So we need to create
a constructor function.
12:48
And we'll have a company name and
we'll have an email address.
12:53
And let's just decorate
these with types as well.
13:06
So whoever creates a company in the future
knows we have to pass some strings for
13:09
these variables and
then we can assign the properties.
13:15
Name is equal to company name, and
13:23
this.email is equal to email address.
13:27
So what you can do when you're creating
your own instances of objects.
13:34
So a class is like a blueprint for
an instance of an object.
13:38
So we want all of our instances of object
to have a property of name and email.
13:44
And this is where
typescript enforces things.
13:49
Where you wouldn't necessarily be forced
in atmosphere toward JavaScript It
13:52
requires us to define the parameters
up here that will be on every object.
13:56
So, we type name and email and
as you can see the company now
14:03
is saying that it fully
satisfies those constraints,
14:08
that contract that we've
made with emailable.
14:12
So yeah,
we could include a phone number here.
14:17
As well for a company, it did, we can
add more functionality to this company,
14:21
as long as it implements the thing
that we want it to do, that's fine.
14:25
It can a more complex object.
14:29
So I'm just going to the put the types in
there as well, just to be uber strict.
14:32
But you don't have to be
as strict as I'm being.
14:37
So lets create a new instance
of a company called treehouse.
14:43
So treehouse is equal to new company, and
14:49
as you can see it knows that
the company name is a string, so.
14:54
Let's do treehouse.
14:58
And if you've got any issues you should
really email support@teamtreehouse.com.
15:02
So we've got this new instance
of a company which is treehouse.
15:10
And this was created using
a constrictor function and
15:16
let's use the send email function and
we will do treehouse.
15:23
And there's no underline so
15:31
if I did something else that
implement these things like a string,
15:33
it would underline But because the
treehouse class implements that contract,
15:38
that interface,
we don't have any of those issues.
15:44
And just finally, I just want to show
you this cool thing in ECMAScript six.
15:48
When you've concatenating
a massive string together.
15:56
Adding loads of strings
together can be really painful.
16:01
So there's a new type of string in
ECMAScript six called a template string.
16:04
So I can get rid of all the quotes and
16:10
the plus symbols and the spaces and I
16:15
can wrap them in baptics like this.
16:21
And then the variables just
need to double assign in what
16:26
I call squiggly brackets
cuz the squiggle And that
16:31
is now a string added together, and the
great thing about this is it's multiline.
16:37
You can do it over and over again.
16:42
So I'll show you what
the JavaScript code looks like,
16:45
because what type script does it compile?
16:49
It's JavaScript.
16:51
And you can see what it looks like.
16:52
So I'm just going to open up my terminal,
and make this full screen.
16:55
Make sure you'll be
able to see everything.
17:02
So cd to my desktop,
where I don't normally keep my stuff, and
17:04
typescript examples, example one.
17:08
And you need you don't necessarily
need to install typescript to
17:11
run it in visual studio code, cuz it's
got it's own cached version of it,
17:16
but I'll show you how to install it
later and the commands that you need.
17:21
But you do tsc which is
type script compiler.
17:24
And I do my app dot ts.
17:28
And this code would work in a browser or
node because it's just does console dot
17:30
lock and
that's exposed in both environments.
17:35
So I'm just going to do node app dot js,
and
17:38
it logs Andrew Chalkley and
team treehouse it calls those two things.
17:42
And just to show you what it
looks like in JavaScript.
17:46
It looks just like you would type
it yourself, so there's the method.
17:51
It doesn't add anything to it.
17:55
Its added those strings
together like that.
17:57
Just like ECMAScript 5.
17:59
The only thing you may not
do by hand is wrap your
18:03
constructs a functions and
your objects like this.
18:09
But that's to stop it from
polluting the global skirp, but
18:12
it exposes the same variable name anyway.
18:15
And then new company and it's treehouse.
18:18
So this is exactly the, same JavaScript
that you would normally write,
18:20
but if you were to give this to somebody
else they wouldn't need to know too much
18:24
when their they don't need to pass the
code themselves in their minds, they just
18:29
need to provide the right things to the
methods and the constructs of functions.
18:33
So that's example one.
18:37
So, here's example two
18:45
Yeah, code.
18:55
It's yeah, the visual studio code is
still in beta, or is it even alpha maybe.
18:58
And let's make this bigger.
19:05
So I've got this playlist application and
its got two objects.
19:08
A song and a playlist, and
the playlist holds all these songs.
19:13
This is an imaginary application.
19:18
It doesn't really play these songs or
anything like that.
19:19
It's just to show you these examples.
19:22
So, let's take a look at the song first.
19:25
And [COUGH] this is another addition
from typescript, this public keyword.
19:31
And remember we had to define
the song the variable up here.
19:39
So title and
then we could say its a string and
19:44
we'd have to do this.title
is equal to title.
19:50
So what this doing here,
this public keyword,
19:56
is just doing a short hand for that.
20:00
So,
>> When you're creating a lot of objects,
20:02
you may not want to do this
repetition over and over again.
20:05
But it's kind of like magic,
if you haven't seen it before.
20:08
So, it could look like magic to you and
that's fine.
20:11
[LAUGH] But that's all that it's doing.
20:15
There's the demystification there,
that's what's that doing.
20:18
And over here is another
ECMAScript six example of code,
20:21
where we can set default values to
parameters that passed into a function.
20:26
So is playing is gonna be
false if nothing is passed in.
20:33
So you could say that this
song is playing is true and
20:37
it automatically makes it
playing in the playlist.
20:40
So I'm just gonna recap that code back,
20:43
cuz it's a lot cleaner and
then we've got two methods.
20:47
You don't need to declare any functions or
anything,
20:52
you can do it in
a shorthand like this now.
20:55
Where you say, this stuff playing
is true when I click on play and
20:57
this stuff is I mean, this stop is
playing is false when it's stopping.
21:02
And at the bottom here, here's another
example of that template string.
21:09
And as you can see, it's multiline.
21:13
So you don't need to add slash n and
add the strings as separate strings.
21:15
You can just basically copy and
paste your HTML in,
21:20
put some back ticks in and
then decorate your HTML.
21:24
So what this playlist does is that for
every song, it will share a list item.
21:28
And the list item will either
have the current class,
21:33
which is current if its playing.
21:37
If its not playing,
it won't have any current class.
21:39
And then there's the title of the song and
then the artist and
21:43
then the duration of the song,
so that's the song.
21:48
Over in the playlist,
we have an array of songs.
21:52
And as you can see, this underline.
21:59
If this was all in one file,
like the playlist and the song.
22:02
We won't have any issues, because
the editor would see the song class and
22:06
it would know what type it is.
22:10
But right now, it says,
it can't find the damn song.
22:12
So what we can do and
this is really cool feature of type script
22:16
of the compiler is that you
can give it a reference and
22:21
you give it a path to the file that you're
using, cuz we're using it in the browser.
22:26
We don't want to import it like
an MPM module or anything like that.
22:33
So we can just specify song.ts, that's
the name of the file that we're using.
22:35
As you can see,
all these magical squiggles have gone,
22:39
because it knows what it is now.
22:42
So if you highlight it, it goes.
22:44
Oh, it's a class of song.
22:47
And if I hit command,
it will show the constructor.
22:48
So you can see a,
you can peek inside a little of-
22:51
>> [COUGH]
22:53
>> What the code is.
22:55
So we've got a playlist
with a songs array,
22:55
that's what the square brackets are.
22:59
If it was just without the square
brackets, it just expects one song, but
23:02
that doesn't make sense.
23:05
A playlist has a collection
of the songs and
23:06
then we've got a now playing index,
which tracks the index the array
23:10
of which is the current song playing and
we've got a method.
23:15
A constrictor function that
just creates an empty array.
23:20
I could actually probably put
that up there [LAUGH] and
23:23
they nowPplayingIndex is equal to zero,
as well.
23:26
I've got a add method
on the playlist object,
23:31
where we add songs to the playlist and
23:36
all that does is it pushes
the song onto the arrays playlist.
23:40
So we're using the method push on
the array and it adds it to our playlist.
23:44
So if I could in theory put
in a song in quotes and
23:50
it would tell me I'm doing this wrong,
23:54
because it's expecting
a type of song not a string.
23:58
So [LAUGH] you can pre-optimize your code,
like that.
24:02
So I've got a play method and stop method
and that basically calls the play and
24:08
stop method on the current song and
24:13
this is a ECMAScript six example where you
can have computed processes, basically.
24:15
Instead of calling a method
to get the current song,
24:20
you can just do this.currentSong,
no parentheses, dot, whatever.
24:24
And this now playing index song,
the one that's actually playing.
24:29
And in order to skip to the next song,
we want a Next button.
24:34
We can stop the current song.
24:39
We can increment the index and
24:41
check if the index is more than the amount
of songs that we've got on our list.
24:43
And if it is more than that,
we can set it to zero, so
24:47
that the playlist starts over again.
24:50
It cycles to the playlist.
24:52
And then finally, want to play it.
24:54
And on this last method, this is how
we set up our playlist in the HTML.
24:56
We've got an HTML element.
25:01
So this type is actually
a built-in type for
25:02
the, this is a built-in type for
the browser.
25:08
So TypeScript provides some of these
types for us and put this other
25:14
people have created this type
definition files or declarations files.
25:19
where if you're using node.
25:24
Node isn't written in TypeScript,
25:27
so we don't necessarily know what we
should pass into the node functions.
25:29
Well, there's an API.
25:33
And if you read the API, you can you know
what you should be putting in there.
25:35
All other developers for the popular
fair maxes, like jQuery and Angular and
25:40
all these other things have created
these type definition files.
25:44
But you could reference just like this
in the top of your JavaScript file,
25:48
so that you have all this
magic code completion when you
25:55
create a node application or
a browser application and
26:01
we could generate these
with our code as well So
26:06
let's take a look at our app.ts file.
26:10
So what I've got here is an almost
complete application for this playlist.
26:14
I want this playlist to be initialized,
I want to add songs to this playlist and
26:21
then I want to render it in an HTML page.
26:26
And we do that first by
like creating a playlist.
26:28
It says,
it cannot find the named playlist.
26:35
Oop, thank you.
26:37
There we go.
26:41
So what we need to do is
we need to import either
26:42
through a TypeScript definition file or
26:47
just reference in
the playlist objects itself.
26:51
So what I'm just gonna quickly do
is I'm gonna go to my terminal,
26:55
let's clear that and
I'm going to use the TypeScript command.
27:01
And normally, you can just pass
in single file, like apps.ts or
27:06
you can pass in all the TypeScript in that
folder and you can set a target of etma5.
27:12
Normally, it will compile it down
to m script three by default,
27:20
which means it will run on
anything like Internet Explore 6.
27:24
Maybe if you're lucky and
you can pass in a date command or
27:28
declarations sales,
generate these declarations for us.
27:33
So what you'll find is that as your
project gets bigger and you got multiple
27:37
classes and things like that,
you'll want to create your own TypeScript
27:42
definition file that includes all the
things that you have in your application.
27:46
So for example, I could create a new
file called typings and then .d.ts.
27:51
If you can see, we've got the song here.
27:59
It's just declaring what
the song looks like,
28:02
it doesn't talk about the implementation.
28:04
This is just to give hints to an editor
and we've got the playlist, as well.
28:06
And as you can see,
it's intelligent it compiled.
28:11
When it compiled,
it referred to the definition
28:15
of the song rather than the song itself,
28:22
but all I want to do is just do ref and
28:28
playlist.d.ts And I want to refer
28:34
to the song.d.ts, as well.
28:39
So, I'm just included all my
types that I've got here.
28:43
So as my application gets bigger and
bigger,
28:46
I just want to make sure that
I've got my typings in there.
28:49
I guess I can call that typing, like that.
28:51
And in my app.ts file,
28:58
I can include typings.d.ts.
29:03
And you saw when I didn't include .d.ts,
it could search in the folder.
29:10
You don't necessarily need to include it,
but
29:14
I wanna be very specific in my code
that's definitely looking a bit foul now.
29:16
[LAUGH] That I'm saying.
29:20
So there's another cool thing
you can do in the development,
29:22
you don't have to keep running that
single command over and over again.
29:25
You can actually use the watch command.
29:29
So, if you've done any development
like with a CoffeeScript or
29:33
SaaS or any of these compiled
languages for front-end workflows.
29:37
They often have a watch command,
29:42
that will watch the files that you've
currently got in your directory.
29:43
If you create new files,
it won't watch those ones.
29:46
You'll have to re kick it in again,
but it will start watching it.
29:49
So every edit that I change now,
29:53
we'll modify the browser.
29:57
So what should we do with this playlist?
30:01
We need to add some songs.
30:03
So let's Create a new song.
30:04
Song1, and it's a new song.
30:09
So because I've got a type
script definition file in there
30:14
it knows what I need to pass on to it.
30:18
So the title.
30:20
Here comes the sun it's a nice day.
30:26
And who did that?
30:30
It was the Beatles, wasn't it?
30:31
Was it the Beatles?
30:32
>> Yeah.
30:33
>> Yeah Beatles,
it's a British band right?
30:34
Indie add to that.
30:39
[LAUGH] Up and coming.
30:41
And does anyone know the duration of that?
30:43
No?
30:46
It's 2 minutes 54, obviously.
30:48
Let's do another song too.
30:52
How about song2.
30:55
We'll do, Walking on Sunshine.
30:57
And who was that done by?
31:04
[SOUND] Katrina and the Waves.
31:06
And as you can see as I'm typing along,
31:13
it's saying hey you haven't
fulfilled all the conditions yet.
31:15
This is squiggly line underneath the,
just like you were using what?
31:18
Do you remember what you
spelled things wrong?
31:22
You know it goes squiggly?
31:24
Yeah, that's exactly
where this comes from.
31:26
Does anyone know the length of that song?
31:30
Yeah, it's 3 minutes 43.
31:35
Got it.
31:36
So, we've got these songs floating
about in the ether right now.
31:39
We want to add them into the playlist.
31:44
Let's just get the playlist object and
to add.
31:47
Add is a method on it.
31:51
Okay cool that's good to know.
31:52
And it requires a song.
31:54
It just so happens,
I've got song one there we go, and
31:56
it types it in for me almost,
I don't need to do anything.
32:00
Like a lazy developer I am,
there we go add and
32:05
then song2, yes, and then it's added in.
32:08
So as you can see here on this line,
32:14
I'm grabbing in the document
which is document in caps.
32:17
If you go into the MDN documentation
you'll see what the document has, and
32:20
it's got a method called getElementById,
and it returns an HTML element.
32:24
Well luckily for
32:29
us we've got a method on the playlist
object that wants a type of that.
32:31
So.
32:35
It's almost like this code is designed,
it's a playlist.render in element.
32:36
It takes an HTML element it says that.
32:42
And we'll do playlist.
32:45
Element.
32:49
No.
32:54
Anyway, there you go.
32:57
It wouldn't matter anyway.
32:59
So this is our application [INAUDIBLE].
33:01
Now, I haven't checked to
make sure that it's compiled.
33:03
There's no little red underlines, and
the file's here, there's nothing alerting
33:06
me to anything that's gone wrong, so let's
reveal this in Finder and then open it up.
33:11
There's the two songs in the playlist.
33:19
It's rendered in the element
which is a list item.
33:22
An audit list.
33:26
Or maybe audit list, I can't remember now.
33:28
Anyway it's rendered, good.
33:30
Let's click on Play,
the current class has ben applied,
33:32
click on Next,
current class on the next one.
33:36
So let's make sure that
out code actually works.
33:40
Yeah it does,
it cycles back to the top of the playlist.
33:43
So, there's the application
we built using.
33:47
>> [APPLAUSE]
>> Thank you.
33:51
So here's some FAQs.
33:58
Frequently asked questions.
34:02
I've been super passionate about it, and
34:03
everyone's saying hey,
jokers why should I use CoffeeScript?
34:06
I mean TypeScript over CoffeeScript.
34:11
Why should I use TypeScript
rather than CoffeeScript?
34:13
Well, there's a difference in syntax,
which often is kind of like,
34:16
you've got to either translate JavaScript
into CoffeeScript, or vice versa.
34:20
With TypeScript you're learning ECMASCRIPT
6, and there's less of a learning curve
34:25
and you can actually use your ECMAScript 5
code in your TypeScript if you wanted to.
34:31
And it takes just that contact switching.
34:37
A little while ago at SASS used to
have different syntax to what CSS had,
34:40
when designers were using it they
found it difficult to use even
34:48
the potential productivity boost
that you could use for doing it.
34:53
But now, this SASS CSS which is,
CSS is a no.
34:58
SASS CSS is a of CSS, and
TypeScript is just like that.
35:06
You learn JavaScript first,
then you can rename all the files .ts and
35:10
then you can add the magic to it.
35:16
The productivity boons to it.
35:19
Should I learn Typescript?
35:22
If you're doing all that
stuff with angular too.
35:26
Are you planning on two, you should.
35:29
The thing that really got
me onto TypeScript was
35:33
when Google announced that Angular
was gonna be in TypeScript.
35:39
It's like these two monoliths
coming together for a thing,
35:44
Google has [INAUDIBLE],
under the Typescript will be,
35:48
I mean angular two will
support [INAUDIBLE].
35:52
But it feels that the push is
more on the Typescript front.
35:55
And they came together and they wiped out
the differences, and decided to add things
36:00
to the Typescript language that Google
was planning to do with this app script.
36:04
And they've come together.
36:08
Because it works well.
36:10
They're also talking to Facebook to
get it working with react nicely.
36:14
And JAX templates and stuff lite that too.
36:18
Now who's using Typescript?
36:23
There's some local companies
that are using it.
36:24
There's Asana which is task manager
36:27
project manager and community
indication tool, we use that here.
36:32
It's written, there's a little wiggle
over there we don't or don't want to.
36:36
But we use the project manager ASANA,
and that's written in TypeScript.
36:41
Obviously Google does with Angular and
things like that.
36:48
Jet brains, the guys behind, guys and
36:51
gals behind Ruby [INAUDIBLE],
Intelli J, and Web Storm.
36:57
If you open up your Web Storm editor,
and you create a new node application.
37:02
And you command click, and
37:08
you click down, you'll get these
type script definition files.
37:09
So under the hood,
37:13
they're using type script definition files
to help you write your code already,
37:14
so you may be even using these
things already and you don't know.
37:17
Wix.com, the website creation tool.
37:22
Ebay, classified ads and
obviously, Microsoft themselves.
37:27
This started off as an internal
Microsoft and as it became more open and
37:31
saw the productivity they could bring to
other places and probably the enterprise.
37:36
Because enterprise is very type,
37:41
they've got statically type languages like
C Sharp, and Java, and things like that.
37:45
And angular came form this
like JAVA world as well.
37:51
In terms of like going from GoogleWeb,
and things like that sort of.
37:55
This is almost with this convergence
with these types coming back,
38:02
like Max the creator of Ruby said
38:07
types could be coming back to Ruby in Ruby
3 and I think Python may be doing it?
38:12
I've had hints of Python doing it too.
38:19
So types coming back and
its because of these productivity wins.
38:22
You don't need to necessarily memorize or
pass things in your head anymore, you can
38:27
use it as almost like living documentation
of your code to write more quickly.
38:31
What editors gonna use, well you can use
visual studio code it's still in beta,
38:39
I've been flipping between visual
studio code and web storm depending on
38:43
how the wind is blowing [LAUGH].
38:50
This visual studio, so that the paid for
38:52
version which only runs on Windows,
that has it on two.
38:56
And all of the major editors to
have plugins that, well either
39:02
run the language service of TypeScript in
the background and communicate with it and
39:07
give you all those same hints that
you would get in Visual Studio Code.
39:12
And all the other things because they're
trying to make this common interface.
39:15
A lot of languages now, I believe C
sharp has this instance that they
39:19
run in the background and they communicate
with that to get the IntelliSense as well.
39:25
So, I think that's come
to mono just recently.
39:30
It seems to be this pattern, the merging
with all these languages that these
39:33
intelligent compilers, or
AST which is something syntax tree.
39:37
Abstract syntax tree where it creates
like a tree of how your code looks to
39:43
the computer and it helps you figure
out what's wrong with your code and
39:48
things like that or
what's right with your code.
39:52
Philip?
39:55
>> Just I hadn't realized this spoke
with the visual studio community.
39:56
>> Mm-hm.
40:00
>> Whole versions of that I think
with that type of view Okay.
40:01
Oh so, yeah, so, yeah.
40:06
So there's Visual Studio Enterprise
Edition, which is expensive, but
40:09
the Community Edition is free to use.
40:12
For teams under and
it's the full shebang, okay.
40:15
Cool, so next steps.
40:19
If you're not feeling too adventurous
just yet, you can go to the visual,
40:24
not visual, the TypeScript language
website, typescriptlang.org.
40:30
And, then there's a great presentation
by the creator of TypeScript and
40:34
C# at the bottom, saying,
hey, this is how we do it.
40:38
There's a playground area
where you can type into,
40:42
I believe it's the same
underpinning JavaScript.
40:45
Because what you saw in Visual Studio
code, that editor is all HTML CSS.
40:50
And JavaScript's all type
scripts under the hood.
40:55
And that same editor is what they've
faults from on this playground.
40:58
So, I think it's called Monaco.
41:04
But it's got all of that IntelliSense and
all of that magic in the browser so
41:07
you can play around with it in there.
41:11
You can install it on your computer and
use it, so
41:14
you install it by using the mpm command,
install typescript.
41:16
You can install the DefinitelyTyped,
41:20
definition manager tsd,
and you do that by doing
41:24
npm install tsd -g, so
it's all on your system.
41:29
If you're not familiar with npm and
41:36
all these other things we're working on
a course to demystify all that as well.
41:38
I've got a blog post on
ECMAScript 6 syntax.
41:46
I've included that in the meetup notes,
and
41:48
it will be in the teacher's
notes with this on the site.
41:51
And we're working on
an ECMAScript 6 course as well.
41:54
So, we're heading towards this.
42:01
This is, we believe, or at least I do,
is believe this is a firm bet on
42:03
where things are going in the future,
in terms of development,
42:08
especially at an enterprise level,
in the JavaScript world and community.
42:12
So, Yeah, so more next steps.
42:17
You can go to a local meetup.
42:24
There's the local one here in Portland,
42:26
TypeScript PDX,
where I've met awesome people.
42:29
They've taught me a lot
already with TypeScript.
42:33
And they've got a slack room that
you can go in and chat as well.
42:36
And you can build your own
project with TypeScript.
42:41
That's what I decided to do to
expose my holes in my knowledge
42:46
in ECMAScript 6 and Typescript.
42:50
I built a module in Typescript
that compiles when you install it
42:53
into JavaScript so anyone can use it.
42:58
You don't need to use it
with just TypeScript.
43:01
And It really helped me understand
the gaps in my knowledge in the whole
43:03
grand scheme of things and
help me patch those things up as well.
43:08
So I encourage you to do the same,
as well, if you're interested in this.
43:13
If you're not interested in this,
don't do it.
43:17
[LAUGH] But, it's a real nice exercise to
figure out how the tool chains all work,
43:18
how everything fits together.
43:24
And what it can do for you, potentially,
professionally as well as for fun.
43:27
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