Preview
Video Player
00:00
00:00
Getting Started with TypeScript
43:33Andrew Chalkley shows you how to get up and running with TypeScript.
>> [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