Well, welcome back and in this lesson, we're going to walk you through getting TypeScript installed in your project and making sure everything else you might wanna use runs correctly. And as you might know, if you've seen any of my other videos, I am a user of Visual Studio, so I'm gonna use that to set this up. And in doing so, I'm just gonna create a brand new project and it's gonna be an ASP.NET Core Web Application. And I'll give it a name there and I'm gonna use the MVC template here, not configured for HTTPS. I'm using Core 3.1. This should work in any other version that you're using of Core. And the first thing I wanna do to be able to use TypeScript is I'm gonna add that package in, so I'm gonna use NuGet to do that and similar, this is the Microsoft version of Node Package Manager. And I'm gonna need this package that builds my TypeScript into JavaScript. So I'm just gonna add that here into the project. And any dependencies, just like npm, any dependencies should get installed at the same time. The next thing I need to do is I'm gonna add a TypeScript configuration file. So I can do that in Visual Studio just by doing Add New Item. And I wanna look here for TypeScript, search it so I don't have to go all over the place. There we go. Tsconfig.json. So you can just leave it called that. Now, you'll get a default set of options when you put that in there and I have a pretty typical set of other options that I like to do and this is the place where you can configure the way the TypeScript compiler works. Notice, for example, here, I'm targeting ECMAScript 6. I've got library that will understand ES2017 and be able to manipulate the DOM. And most importantly, at a minimum, I wanna say what my output directory is going to be for my TypeScript files that become JavaScript. So in this case, they're under wwwroot/js. So let's make sure I have that. There we go. I do have that folder there already. So that's good, very good so far. I also need a place that I'm going to store my TypeScript scripts. So I'm gonna add a new folder here called Scripts. Not under wwwroot. This exists outside of that. And let's add a TypeScript file in here and see if we can make something work. So a TypeScript file just ends in ts. There we go, and I'll just call it main.ts. So what's gonna happen here is we're gonna do our TypeScript and then every time I build this project in Visual Studio, every time I compile, this is gonna turn into just regular good old JavaScript. So you can see kinda right off the bat the things that a little bit different. We've got the typing here, for example. We can tell it that it's a string and used before defined. I get these little green squiggly lines here. So this is Visual Studio's well, rather, TypeScript's linting here that shows these things as errors and warnings. So in this case, for example, I've got the name in there and it's inferred from a string literal, so I didn't actually need that. So it's gonna flag me for those sorts of things. And then this one, caller was used before it was defined but I think we'll be okay there. And you can just kinda consider those to be hints. If this is annoying to you, there is a file that you can open up, eslintrc, and you will typically find it in your users directory, right off the root of the users directory. You can see there, there are some of the options that you can change. So if you set it to zero, that'll make it false. So consistent-type assertions. These are just a few of the ones that I typically change because again, they're hints for the most part and if you know what kind of JavaScript you're creating there, then that's fine, all the better. So I should just be able to still build the project with this because I believe that's just a warning. So let's do the build here and see if it works. Did succeed and so I should have, there we go, there's my main file that's in wwwroot and again, no evidence necessarily that this came from TypeScript. It's just good old regular JavaScript. So if I go, let's go in here and I'll create a page and let's test out and make sure that that actually works. Now, some of this functionality, we're gonna add in later. For right now, all I've got is main and I'm gonna call my tsHello function. So it's just regular JavaScript. I've got my script link there. I call tsHello, which ends up in my main JavaScript file. And I'm gonna be able to just bring that up and see the value when I click that button and that should give us at least a good idea to start with of what's working here. And notice, we're not seeing anything yet, so let's check our console and we can see there, okay, it's because we have some JQuery on the page and JQuery isn't supported yet. So let's build that in and then we'll go back and we'll do the whole thing. So what we need to do next is add support for JQuery. We're gonna add that to our package.json file and we don't have one yet, so in Visual Studio, I'm gonna do that again as an add new item. And that is in the list here as an npm configuration file. We can just leave it called package.json and I'm gonna add into my dev dependencies there that I am dependent on JQuery and I believe the version I'm using is 3.5.1. So I'm gonna add that in there and that should allow me to now use JQuery and in fact, I think I can add another TypeScript file. And actually use JQuery in that file as well. Let's see, so we'll do that and we'll call it library. We'll just go ahead and grab whatever the JQuery version is here. Okay, so I'm just gonna run a little function there. It says again can't find the name but it should be able to by the time we build again and by the time we run that page. And we've just got that unnecessary flag for any. So ts-example-2 on our page, let's go back to tsHello, it's just a little span that we're gonna stick something in and we're gonna call that show version from here. All right, so let's try that and see if we work. And we'll try it again and don't see anything. Okay, we've still got $ not defined. So let's make sure that it's actually in place. Okay, so I'm referencing that from my Node modules instead of from wwwroot. So that's just a particular problem in my project here. So we'll include that. There we go. And we'll give it one more try here. Now, if you're still having trouble with this and the trouble you might be having is that JQuery's not recognized. There's one little thing you might have to do. In my particular case, I added JQuery using npm. So if you run this little statement, this should make so that the support of JQuery still works in your application, and I'll make that just a little bit bigger for you. So if you've added JQuery, if you're using it as part of the template that was already there, you might not need this. But in this case, I'm linked to it on my page using npm. So that should make it so that it works. Let's bring that hello, world back up. See, sometimes hello, world isn't that easy, is it? We'll bring that back up and see if it works. Ah, now we've got our style sheet. There we go. So I got the hello, and there we go, my JQuery version is 3.5.1. So in this lesson, we learned how to get JQuery installed in our web application. And how to make sure that we have support for third-party libraries. Stay tuned, in our next lesson, we'll do our first features over view of TypeScript, part one.
