Build Web Apps with Angular 2 Installing Typings

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

[00:00:03]
>> Scott Moss: To get started with Typings, really all you have to do this is, you come in here in this terminal, say Typings, and it, just like everything else. Obviously mine threw error, it is already have it, that's why through error and it was just in this allows a flower here and I think it gets this name from your package .json and that's it.

[00:00:23] And then as far as I can install in typings, typings install and then the name of the one hat you wanna saw. In this case let's say, node and then save, I think it's actually gonna throw an error, let me see.
>> Scott Moss: Yeah, so this one threw an error, and that's because node Is a ambient typing, as I just found out ambient means that note exposes other typings to other modules.

[00:00:53] So, you have to do the ambient on it like this.
>> Scott Moss: Which is what the error is recommending.
>> Scott Moss: Yes, that's the one that I want. Thank you. So once that installs, it's going to take...oh there it is. So notice boom, it put that in here for me, just like a package adjacent.

[00:01:19] So you should never be writing to this file. It's a live file. Just like the package adjacent. So I mean maybe there's some things you have to write in here, but maybe you said it once and you don't write it again, but it's a live file. It's going to be updated all the time.

[00:01:32] So you'd never if you had the typings. So now that we have this node here, if you go into typings folder. And we go into, what is it?
>> Speaker 2: I noticed for you it got infinity tucked but when I installed it, it doesn't come through here at all.

[00:01:48]
>> Scott Moss: Where'd it come from?
>> Speaker 2: The rich street. ET?
>> Scott Moss: It might be pointed to the same thing, eventually, but that's weird. Like I said, typing graphs from different places, I don't know how it resolves which one to graph first, but something like that. So, here's the and here's a DTS file, it's just a whole bunch of cryptic TypeScript that defines how your Tooling is going to support the framework or the library or the code that you're trying to use.

[00:02:18] So, this is how our lintern knows about node. Somebody went and wrote this deepest definition type file to expose metadata about Node and all its methods. So, now I can get access to that outside of here. So, that's pretty much typings and you can install anything you want, so if for instance if you wanna install a low dash with Node, and then, maybe you want the typings for lodash you should probably look it up in typings.

[00:02:44] You can come up in here and you can say typings search and lodash.
>> Scott Moss: And yeah, we have one, it's lodash there it is. Then you know that there's a typing definition file for it, so it's pretty cool. Any questions on typings?
>> Scott Moss: Nope, nope. Okay. The other thing you have to do, is you have to Set up.

[00:03:13]
>> Speaker 3: Hold up real quick. We have a question.
>> Scott Moss: Yes?
>> Speaker 3: What's the command for typing node and ambient?
>> James: I just got it for him.
>> Scott Moss: Okay. Yeah.
>> Speaker 3: Boom.
>> Scott Moss: It was install node dash dash ambient dash dash save.
>> Speaker 3: Thanks, James.
>> Scott Moss: There you go.

[00:03:30] Cool and then I do recommend using obviously mine is. Crutched right now, so. But, I do recommend using the Linter. The really cool thing about this is, though, there's this thing called ng2ling that has specific Linter rules for Angular 2. I highly recommend installing that and telling your Linter about it, which is what I'm doing here.

[00:03:51] And then, you can expose these rules like, for instance, if you make a component, it must have a selector name and it must be kabob case. It's pretty legit. I think that's really really cool and stuff like that. So these are specific to Angular 2 linting rules, which I think is amazing.

[00:04:09] So, however your men are doing that. But out the box, linter will work for basic TypeScript, this just gives us anchor to linting abilities as well. And then, of course, the pinnacle IDE you have, you need to provide the appropriate plugin for your linter, which is mostly gonna come down to MPM installing.

[00:04:28] Globally, tslint, which is mostly what most of the lenses are based on. So, make sure you have that globally installed just like you would with eslint, jscs, or jslint or whatever linter you had, it's the same process. Cool, and the last thing It's the Tsconfig. So, the compiler reads this and maybe whatever plug in you might have in your ID will also read this.

[00:04:56] So, this is just telling it what to do like for instance compileOnSave. If you had TypeScripts running in sublime, I know that plug in well. If you set this as true like compile and open up in any tab like here's your code, don't want that every single time.

[00:05:09] BuildOnSave, so this is just a way for you to configure, because we're running it for the command line, we don't really need all this stuff. We're not like transpiring our code on the fly. So, I just turn it all off and then, here are the files that We're telling theTSconfig or the typescript compiler that we're going to be using this file, this glob of files and this file.

[00:05:33] Obviously, we need to put in the other typings that we install like node. The stuff that I just installed we will put in here too. So, you need to put that stuff in here. You can also just do a glob for all your typings and you'll still be fine.

[00:05:45] And then, if you don't really remember all this, that's totally fine. If you TSC globally you get this nice TSC here that broke and you can say "TSC dash dash in net." I get an error because I already have one but if I didn't have one, let's just remove and then run it again.

[00:06:10] Boom, it will create one for you. And yeah, very minimum but yeah I don't create one.
>> Scott Moss: So, if you made it through all of that, and you run it, let's see. Hopefully, mine still works.
>> Scott Moss: So, I just erased a lot of stuff. A lot of confidence on myself right now.

[00:06:38]
>> Scott Moss: So, if you made it through all of that, looks like mine is working, and you built this thing.
>> Scott Moss: Yeah.
>> Speaker 3: [LAUGH]
>> Scott Moss: So, mine doesn't work cuz I just deleted a whole bunch of stuff and did a lot of stuff But yeah, you get the point.

[00:06:57] What's going on here? Why did it put it here? I've messed mine up a lot so that's the tour of the build system. So, it's okay if you don't understand everything, it's totally fine. But at least you're familiar, at least you know the moving parts, you might not know what to do with them, you might not know when to recognize or what is happening, but you know the moving part, you know what is involved.

[00:07:20] So it won't be as like magic, so but there are a lot of pieces, and like I said these are like foundations of those pieces in the we just add more to them. Like more rules for rental more stuff for webpack, more bundling, more optimizing, all this other stuff, so but, this is the foundation.

[00:07:37] Most of the other stuff after this is just adding plugins and stuff like that. Cool? Any questions?
>> Scott Moss: All right.
>> Speaker 2: Next item, hair tie.
>> Scott Moss: [LAUGH]
>> Speaker 2: I have one question for you.
>> Scott Moss: Yes?
>> Speaker 2: Do you have a seed project you recommend for this sort of stuff?

[00:07:58]
>> Scott Moss: A starter project for this?
>> Speaker 2: Yeah, like a seed that you would generally refer to.
>> Scott Moss: Actually I don't. No, but I could make one if that would help.
>> Speaker 2: No, I was just wondering if there was something. No, I was just wondering if there was something would usually refer to just to make your life easier, or if you would start that yourself?

[00:08:15]
>> Scott Moss: See, I'm kinda weird. I usually start it myself, until I'm really comfortable with it. When it comes to build systems and stuff, that's the one thing that I do over and over and over again but then, everything else I'm fine using the project for or starter for.

[00:08:28] But when it comes to build systems, I don't know why. I just feel like I have to do it, because it's so unique to my project that I'd rather just build it myself than download somebody else's and have to change it and figure out why they did this and erase this cuz I don't have the repo or that folder.

[00:08:44] So, I usually just do it myself but that's just me.