Build Web Apps with Angular 2 Typings

[00:00:04]
>> Scott: Typings is the module, this feature, that my friend Blake made that pretty much just, so in TypeScript, how does the tooling know about all this code? How does the tooling support you, or give you support for the types, it gives you support for what this thing is expecting, the interfaces.

[00:00:26] How is it aware of your code? We have these type files, these type definition files. And Typings is a module that will fetch those community built type definition files for you so you don't have to create them yourself. So, because TypeScript is so new, unfortunately, there are a lot of great open source projects that don't have type definition files.

[00:00:46] But on the flipside, developers are making them but you can make them yourself, and then this Typings module will fetch them for you and bring them into your project. Yes, we had a question back there?
>> Speaker 2: Yeah, back on that clock example, they're asking if when you instantiate a new clock, do they need to pass in the two parameters?

[00:01:03]
>> Scott: Yes. They have to pass in the two parameters, the hour and the minute. And they both have to be numbers. But it will build, it will just throw an error at build time. Like ,hey, by the way, you forgot to do this. But it'll still work. But then, you're just defeating the purpose of typescript if you ignore it.

[00:01:24] What's the point? You might as well just get rid of it. Yeah, so, Typings is a module that will get those type definition files for you to make your tooling aware of the types and the code that you didn't create. So, all this code that we empty and install, we want our tooling to be aware of that.

[00:01:40] So, that's what this thing does. And there's tons of places where Typings look. There's actually a repository. I forgot the name of it. It's blanking me right now. But there's a repository for some of our caps. Some people put them on another repository, whatever. But this module will find the right one and put it in for you and set it all up so everything's working.

[00:02:03] It's pretty, pretty awesome.
>> Speaker 3: Definitely typed.
>> Scott: Definite the type, There it is.
>> Speaker 3: T-shirt.
>> Scott: There you go.
>> Speaker 4: [CROSSTALK]
>> Scott: Cool. So Angular 2 with ES6. Like I said, it's almost the same as TypeScript without the types interfaces. Because, we do have decorators, but we don't have annotations, And they almost look exactly the same.

[00:02:34] But ES6, and especially babel, they don't really support the annotations that Angular 2 needs. So we have to override the parameters explicitly for the dependency injection to work properly. And there's examples of that in the repo that Lukas put up earlier on how that looks. So this is what you would have to do if you're using ES6 with Angular.

[00:02:52] And that's really the only difference. Every thing else is exactly the same. It's just because the metadata and annotations don't work properly, you might have to be explicit about how you reflect the metadata, either by using the reflect metadata plug in, or what I said here is define dependency parameter explicitly using a Gitter on the parameter's property inside of a class.

[00:03:12] So those are two ways to do it. But other than that, it's the same thing. You could even still use the TypeScript compiler, or Transpiler, the hipster term for compiler. And it'll still work, depending on what features you wanted. So I recommend using babel if you're just gonna go straight ES6.

[00:03:27] But if you're just lazy and you're like I've already got TypeScript here, you can use a TypeScript compiler and you'll still be fine. But, yeah, babel has experimental features that TypeScript does not. So, that's, that's my thing. Babel keeps up with the different stages that the proposals are in, so everything in like stage four is what's gonna be released next.

[00:03:46] And then you go all the way up to like straw man, stage zero, something that somebody just made last night, and you can use that today in babel. Which is awesome. So, I recommend using babel if you're just gonna go pure ES6.
>> Scott: Any questions on that? No?

[00:04:00] Cool. With ES5, different story. First of all, don't do it. Just don't. Just don't do it. You know when React first came out people like TSX, I'm not using this, this is stupid. Well, then they couldn't find any documentation on Stack Overflow or the docs. And everybody was like all right, all right.

[00:04:20] I guess I gotta use JSX. That's what's gonna happen here. There's already lacking documentation on the Angular.io website. If you go through the, there's a five minute tutorial, there's some stuff on there. But then you go into the long tutorial that they have in there, there's no docs, there's no docs on this.

[00:04:36] Good luck. So, I recommend not doing it. But if you were gonna do it, this is how you would have to do it. It's supported, natively, obviously, because it's just ES5. So you don't have to build compile anything, just run it in the browser. But because of that, now we have globals, right?

[00:04:51] So there is no module system like Angular 1.x. Angular 1.x had angular.module, we can encapsulate everything like that. They don't have that this time, sorry. So what do you have to do? Well, now you gotta go back, and you either have to do an IIFE, like you did in backbone, right?

[00:05:06] Everybody did that. Or you have to use required JS, or whatever you want to use for your module system. Or maybe you just don't care, and you just put everything on a window. I don't know.
>> Speaker 2: But don't do that, either.
>> Scott: Yeah, just put all that stuff, the passwords and all that stuff, right there in the window.

[00:05:22] It's all cool.
>> Speaker 4: [LAUGH]
>> Scott: They're never gonna find it. Just put a couple underscores in front of it and let them figure it out. That's all you gotta do. But it exposes a global NG namespace. So, that's the global object that you'll get when you load up Angular.

[00:05:37] Whereas Angular 1.x to Global Object you got was Angular, in Angluar 2 the global object you get is NG. And it exposes the same stuff that it does in Angular. It exposes the same stuff if you're using ES6 or ES2000, or TypeScript. It's just on one object. So no need for bill system or transpiler.

[00:05:56] No, type files files or configs. That's legit. You don't have to worry about none of that stuff. That's cool, I think. Documentation is lacking, and ot recommended. I meant not, but I forgot the n.
>> Speaker 3: Are you saying that it's hot recommended?
>> Scott: I think it, yeah, that's what I meant to say.

[00:06:11] Hot recommended, so [LAUGH] yeah, don't, just don't do it. I mean, I can't really think of a good reason why you would, especially with ES2015 as a standard. You should at least minimally be doing that, that's the thing.