Configuring Typescript: Basics
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:
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:
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.
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:
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:
- 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”.
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!