Configuring Typescript: Basics

Introduction

Typescript is additional syntax used to add types to javascript and can be used to compile code to javascript. In a previous article I covered how to use typescript with a single .ts file to compile into a single javascript file by using the tsc <filename> command in terminal. As I have learned more about typescript I began to realize how inefficient it was to have to save a .ts file and then recompile my typescript to javascript. At first I thought this was just the nature of the beast but then I came across a setting that saved me the headache of manually recompiling, and that was watch mode. It turns out you can set a .ts file to watch simply by adding the -w flag. An example of setting app.ts to recompile automatically every time a change is made and saved would be to enter the following in terminal:

tsc app.ts -w

as long as your terminal is within the directory that app.ts is in when you issue this command, further recompiling will be automatic upon save from here on out. This lead me to research other critiques I might be able to do with the settings in typescript, and I’m happy to announce there is a whole slew of settings you can configure to optimize your typescript projects and I will go over some of the handy ones I’ve found. We will first need to create the necessary .json file which handles all of our typescript settings. This file is called tsconfig.json (the docs for it are here). Do this by entering the following within the root directory of your typescript project in terminal:

tsc --init

Overview Of Some Basic Configurations

Now that we have created tsconfig.json you have the ability to compile all of your .ts files at once without having to individually point to all of them simply by entering tsc in terminal. You can also set all of your typscript files to watch mode at once by entering tsc -w. The magic doesn’t stop here though. If you check within tsconfig.json you will see many of the options commented out like so:

This is a small segment of the beginning of this file

Before we delve into some of the nuances of various compilerOptions lets look at a few options that you would have to manually enter outside of the compilerOptions down near the bottom of this file.

• exclude — this option is an array which should contain a string of values equal to the relative paths of files you wish to exclude from tsc compilation. If you do not manually add this file then all node_modules (the folder that hold all the dependencies and 3rd party libraries from package.json, this file is created if you are running a lite server) will be excluded by default. But if you are going to manually enter this option it is very important to include the node_modules folder in this array.
• include-this option is another array. This time the array will contain string values equal to the relative paths of files or folders you wish to specifically include in your tsc compilations. It is important to note that the include and exclude options are compiled like (included files/folders) minus (excluded files/folders). Thus if you specify a folder that you wish to include it will include all files/subfolders within that folder MINUS the specified excluded files and folders.
• files-is another array option that is very similar to the include option. The main difference is that the files option can only target relative paths to specific files and NOT entire folders that you wish to be included by the tsc compilation.

An example of these three options manually entered within tsconfig.json

Some Configurations Within compilerOptions

So far we have discussed some configurations you can add to tsconfig.json outside of the ending curly bracket for the compilerOptions. It is important to note that even if you don’t add the aforementioned options their default settings are still being used. Now lets review some of the options that are within the compilerOptions setting. We will start with the only one we’ll discuss that is NOT commented out by default:

• target — is available by default within compilerOptions and is set to a string value equal to the javascript version you wish to compile your typescript to. Adjusting this to older versions allows accessibility for older browsers to run your javascript code, however using an older javascript versions means you will lose newer features like the availability to set locally scoped variables using let and const.

Now we will move on to some of the options that are commented out by default but are still being used within the compilerOptions of tsconfig.json:

• sourceMap-this is set to a boolean value by default. Uncommenting this and setting it to true allows for the creation of js.map files upon typescript compilation. These js.map files act as a bridge between your typescript and your javascript and allow handy debugging features such as being able to view your typescript files within your browsers developer console (under source). You will also gain the ability to set breakpoints within your typescript using your developer console.
• outDir-this is set to a string value. Uncommenting this allows you to set its value to a string that is the relative path for which you wish to place your .js files upon compilation. For example if you made a dist folder at the root level where you wished to place all of your .js files AND copy all of the subfolders containing .ts files upon typescript compilation you would set this to “./dist”.
• rootDir-this is set to a string value. Uncommenting this allows you to set its value to a string that is the relative path for which you wish to store all of the .ts files you wish to compile to .js files. In this way it is similar to the include option however is designed to only contain one main folder (as well as all sub folders of that main folder) that hold your typescript. For instance if you had a src folder at the root level where you wished to place all of your .ts files you would set this value to “./src”.

A file structure similar to the example of outDir and rootDir I just mentioned.

Conclusion

The settings found within tsconfig.json allow for a vast number of configurations that will help you compile your typescript code exactly the way you would like it to be compiled. It is important to be familiar with at least a basic understanding of some of the features these options can give you. As I continue to teach myself typescript the usefulness of additional features will undoubtedly become necessary and apparent. Hopefully a review of some of these settings/features I’ve learned has helped someone else out there. Keep learning and happy coding!