Well done!

You have completed Getting Started with TypeScript!

Preview

Getting Started with TypeScript

43:33 with Andrew Chalkley

Andrew Chalkley shows you how to get up and running with TypeScript.

Download

Visual Studio Code

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

>> [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.

You need to sign up for Treehouse in order to set up Workspace