7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Configuring TypeScript

Now at this point, we would love to just start getting right into writing code. But unfortunately, there's a little bit of a disconnect that we have to take care of first. Now we have Koa installed, we have the Koa router installed. So that's good. We have our development dependencies where we got things like TypeScript, and then the type libraries or the types associated with Koa and the Koa router. So now we have to be able to tell our application that we're using TypeScript to do this cuz otherwise, we're gonna run into some problems. So in order to do that, we need to create one more file, and this new file is gonna be the tsconfig file, which is a JSON file. And in here is basically where we're going to tell our application and our text editor, and whoever else is paying attention, how you're going to be using TypeScript. What sort of module, what sort of target and any sort of other configuration things that we want to be able to take care of, this is where we're gonna put them all. So the first thing that we're gonna do is we're gonna create a section in here. Well actually, this is a JSON object so we want to make sure we have the open and closed curly brackets. Then we're going to be using a compiler options section which is where most of this work is going to be. So we're going to be using a module and the module that we're gonna be using is commonjs. This is just kind of a basic configuration that we're gonna be using within here. Then we're gonna specify the target. Now what target, what version of the ECMAScript definition do we wanna be using? So as I said before, because we wanna be using async and await, we need to be using at least ES or ECMAScript 2015. But why stop there? At this point, well, let's jump ahead a little bit, let's get up to ECMAScript es2017. That'll work just fine for this particular application. Then at this point, there's just a little bit of extra things you can do in here to kind of tweak as you would like. If you're unfamiliar with a tsconfig file, there's lots of documentation on all the different options on the TypeScript websites. So you can easily go and check that out, and kind of figure out what all these are for and which ones you wanna use. And do you wanna add any additional ones in here? I tend to use the noImplicitAny configurations that is true which basically means, I have to be a little bit more diligent in defining my types and making sure that everything follows the type. And there's just not a bunch of implicit any in the world of TypeScript just means, it's kind of a generic object, a generic type. It can be anything. And that's kind of dangerous. And that's one of the things that TypeScript is trying to do to kinda get away in the world of JavaScript, but obviously it's up to you. You can make it anything you want. I like to make sure that I'm not allowing implicit anys, just kind of a little bit of a thing for me to make sure I'm being a little bit more diligent as I said. Then we need to specify an output directory. Once we have created our TypeScript and it's actually been transpiled into JavaScript, where do I want that resulting JavaScript to go? And I tend to put this in a /dist directory that's gonna wind up being in the same location, in the same root directory as my application. You can put it just about anywhere you want but that happens to be the kind of convention that I like to use. And then the last one that I really like to put in there is the sourceMap. As a general rule, I like to make sure that I do that because then what happens is, not only is the TypeScript transpiled into JavaScript, but there's also a map file created as well. And you'll see this later on, that whatever the name of your file is .js, and you'll also have whatever the name of your file is .js.map in there as well. And what that is is when you are, say, debugging a web application in the browser, your browser doesn't really know a whole lot about TypeScript. So if you wrote your application in TypeScript, it's gonna be transpiled and ultimately it's gonna wind up being JavaScript in the browser. And in order to actually use the development tools in Chrome or whatever browser you like to use, it's going to show you the JavaScript code, not necessarily the code that you wrote. So things are gonna look a little different. It's a little tough to set break points in there and really know where you're gonna wind up in your application. So this map file is going to allow you to see both the JavaScript and the TypeScript files in your browser so that you can see both of the implementations. And if you're more comfortable looking and debugging at your actual TypeScript and setting break points in that in the browser, in the developer tools, you can absolutely do that. So that's why I like to turn the source map on when I'm writing my application, so that I can easily get in and out of there. Now, obviously if we're gonna be selling this to a production, maybe you turn that off. But in development, I definitely like to turn that one on. Then the last thing I'm going to put here is actually outside of the compiler options, and this is going to be the include. Now, include is where I'm gonna say, where do I want you to look when you go ahead in compiling my TypeScript code? In what directories do I want you to look? Well, I basically want you to look everywhere but I'm gonna create a little bit more structure here when we create our application. And I'm gonna put everything within a source directory. And this can be a list, you can put a list of all the directories and areas within your application you want to. So I'm gonna say, this is going to be in my source directory which we're gonna create in the next lesson. And then what I want you to do when you're looking for the files is I want you to look in every directory recursively, which is going to be represented by the double asterisk. And then we're going to say / and then any file which is a single asterisk. So now we're able to say, I want you to look in the source root directory, which we're gonna create, like I said, in the next lesson. And then after that, I want you to look at all subsequent folders underneath that recursively, and then look at any files. So any TypeScript files that are found in that location under source are gonna be included in this and it's all gonna be compiled into my JavaScript file. So now that we have our tsconfig file done and taken care of, we're now finally ready to start building this application and starting to see what it looks like to write Koa applications.

Back to the top