Build Web Apps with Angular 2 ES6 & TypeScript

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: Webpack takes anything, and turns it into a static asset module that you can load anywhere else. Its pretty awesome. So with ES6, it's important to know or I guess it's ES2015, or ES2016 is actually done now. Anybody see that, they only made two features. That's only thing that made ES2016, two features.

[00:00:28] Not even the good ones either.
>> [LAUGH]
>> Scott Moss: [LAUGH] But it's important to know. ES6 and ES2015 because typescript is built on top of that. So, if you just wanna jump right into type script and you don't know what a class is, or error function is, that's gonna be kinda of tough.

[00:00:45] So it's important to know this stuff, it's got a lot of close ups that we'll be using, specifically the arrow functions and the classes in the template. The string interpolation is probably some of the biggest ones that we'll be using. Everything else is just regular java script. And modules, of course.

[00:01:03] That's probably the biggest one. Yeah, classes are awesome. Well, some people are like indifferent about classes. People like classes, they don't like classes. But it's just sugar, it's not a real class. So here's what a class looks like in ES2015. All right? It's the same thing as the constructor function you would normally make whereas this constructor function here is the function that's going to be called when you make a new point.

[00:01:31] And that's the only difference between this and the regular constructor function you would make in ES5, so no biggie here and then we're overriding the toString methods to do this. And That toString method is on the prototype. That's it. Yeah. So note that there are no commas between the constructor function and the toString function, so we don't have to put commas in between those.

[00:01:54] So I think it will actually break if you do. Unless you silence that error. And then also notice how the toString method is declared. Also the constructor method. There is no equal sign here, it's almost like we're doing a functional declaration so it's a little way of declaring a function in ES2015.

[00:02:08] You can do this in regular objects as well. It's like a little functional shortcut, and it also keeps the context. So the this inside of toString is the same this inside of constructor. So those are the things that are happening here. But it all boils down to the exact same thing.

[00:02:25] A function called Point with a toString prototype method. And it works the same way that way too. If the context is shared everything is shared. It's just some sugar on top of it. Any questions on that? And again you don't have to use this. You don't want to use it, don't use it but you're gonna have to do a lot of work around to to get going.

[00:02:46] I highly recommend using this stuff. Especially this. Because this is a standard, it's coming in all browsers. In fact some browsers already have it. So, you should definitely be using this stuff.
>> Scott Moss: TypeScript. Okay. TypeScript is another super set of JavaScript. It's another one, right. You thought you were done with Coffee Script, but then somebody made Typescript, and you're just like, my god, okay, all right, here it is.

[00:03:13] I think the Microsoft team who made Typescript, I think their logic behind it was they had a lot of .net people because JavaScript is so awesome. They wanna get into front end development, and then they're just like, ooh, but JavaScript, it's like there's no types. What do we do?

[00:03:28] So they made Typescript. That's what I think of it. It's literally .net for people, it's .net for people who came from .net pretty much. So that's why people who are hardcore Java Script fans are just like, really? What is this? Like why? We don't need this. So there's like a lot of animosity around it but as I told Lucas I've come to like it.

[00:03:52] There was a point where I was like, nope, uh-uh. What's the point? I don't need it. There's no point. But I'm just like, okay, all right. Right? I get it, I get it. I'm with it. So TypeScript, it's a compiled language. It doesn't run on browser, just like most of the ES2015 stuff that we have.

[00:04:08] CoffeeScript, any other subset that you can think of, it's the same thing. We have to compile it. The only difference with TypeScript is it comes with this really awesome tooling. So, at build time, it's going to catch errors based around the typings that you have, just like any other typing system would and then show you those errors.

[00:04:28] Therefore you can create a really good code. But it wont prevent it from building. It'll still build, you'll just have these errors like hey. Lucas, you got something.
>> Lukas: I was just gonna say that also you saw one of the reasons is it at bill time or at run time, it's out, but you were able to get the ID in telesense.

[00:04:48] So not only are you conveying to your fellow developers what's happening, but it's really easy for your ID to also pick up and make some inferences of like, hey, this is just not going to work. Because you have said this is how it's supposed to behave.
>> Scott Moss: Yeah.

[00:05:02] Yeah, the ID support is, that's probably the biggest reason why I use it. Maybe the only reason I use it. So, pretty awesome. So, yeah, like I said. Typescript is getting better and better and better. They don't include every single bleeding edge feature that's proposed on the equiscript standard, but they're getting there.

[00:05:21] They're doing a lot of stuff, so if you compare the Typescript compiler to like the Babel compiler, yeah, the Babel compiler has more options for more experimental things. But the Typescript covers everything that you need plus a little more. As you can the decorators which is not even official so it's pretty cool.

[00:05:36] So TypeScript is actually pretty good, I'm just like stoked of like how far they've come after they partnered up with Angular team and like released all these features, it's pretty amazing. So yeah, we have this Decorator thing which is a proposal that was submitted by Yehuda katz. It's not official, but TypeScript adopted it anyway and it's, like I said, it's a mix in that mixes in the class.

[00:05:59] Like if you ever use react and use a mix in, this is what this does. It's the same thing. Classes, modules, types, interfaces and decorators. Like I said, the only thing you actually have to use with Angular 2 here, are the classes, the modules, and the decorators, which are really just part of ES6.

[00:06:17] So you don't have to use types interfaces if you don't want to. You absolutely don't have to use them at all, but you should. But you don't have to. Okay, so here is the interface, the interface, again if you've come from react, the interface you can think of is just like prop types.

[00:06:37] This is what this object looks like, this is what I am expecting it to be, this is like a prop type for things, for everything, not just components. So this interface, this clock interface is just describing what a clock interface object would look like, what properties it has, what those property types are, yada yada yada.

[00:06:56] So, and then this clock just implements that interface. So, that's just saying hey, I want this clock. This clock should be expecting a clock interface. It should be designed in a way that it looks just like a clock interface. So, it should have at least those same properties that the ClockInterface has, but it can also have more.

[00:07:15] But at the minimum, it must have those, and they must match the types. And that's what's happening here.
>> Scott Moss: Any questions on this?
>> Lukas: Would you like us to elaborate on TypeScript a little more. I know you had.
>> Speaker 4: I think I'm getting this.
>> Scott Moss: You're getting it?

[00:07:35]
>> Speaker 4: Yeah.
>> Scott Moss: That's what I'm talking about.
>> Lukas: Can we get that in writing? Like that would be a great testimony.
>> Scott Moss: [LAUGH]
>> Lukas: I think I'm getting this.
>> Scott Moss: You have a question right there?
>> Speaker 5: Yeah.
>> Speaker 3: Can a class implement multiple interface?
>> Scott Moss: Can a class implement multiple interface?

[00:07:47]
>> Lukas: Yes.
>> Scott Moss: Yes. Lukas said yes. I don't know how to do it. I'm not a TypeScript wizard. I think Lukas knows how though.
>> Lukas: So for instance, on your event life cycle hooks. I think it's just implements interface1, interface2, Commas, commas so simple. All the way down.

[00:08:05]
>> Speaker 3: Can an interface implement an interface?
>> Lukas: Woah.
>> Scott Moss: Hold on now.
>> Lukas: I think you're trying to break the Internet, sir.
>> Scott Moss: Yeah.
>> [LAUGH]
>> Speaker 3: C sharp [INAUDIBLE]
>> Scott Moss: That's crazy now, but you know what? I bet you could. It makes sense. You know. Then, you're subclassing your interfaces.

[00:08:21] That's just nuts.