The most important Config Options in Typescript

Introduction

If you are familiar with typescript, of course, you will know that it is a powerful tool and powerful skill to you as a web developer, TypeScript added Static typing to JavaScript, which eases us to detect the errors in our javascript Code in the development stage and save to us a lot of time and many features that javascript alone can not give it to us.
So in this article, we will dive into the important TypeScript configuration options which ease your development work.

---

Creating Files

Installing TypeScript

First, we will install typescript globally in our machine to use it anywhere in our machine.
Open your terminal and type this command:

npm install -g typescript

Create typescript JSON config file
Now we will create a typescript JSON file.
Open your project folder, then open the terminal on it and type this command in it:

tsc --init

You will notice that new JSON files are created and if you open it, you will see the typescript options that you can enable or disable it.

And now we are ready to test the options.

---

Config Options Explaining

1. Public Options

Include, Exclude and FilesOptions
These options let us to convert or not convert specific ts files.

• Include option: this option accept an array of files, and force typescript complier to convert ts files that only in this array.

"include": ["file1.ts", "file2.ts", ...etc]

• Excludeoption: This Option accept array of files too, but unlike Include option, It prevent any ts file from be excuted and converted into js file.

"exclude": ["file1.ts", "file2.ts", ...etc]

• Files Option: This option is like Include option and it accepts an array of files, but there is a little different here if any of ts files in Files does not exist in your project typescript compiler will throw an error and this does not occur in include option. So be careful when using any of these two options in your project.

"files": ["file1.ts", "file2.ts", ...etc]

2. Compiler Options

1. Language and Environment Section

• target option: by this option we can control in the javascript edition that our ts files will converted to it, it contains a lot of options and ECMA script editions like: "ES6", "ES5", "ES3" and "ESNext" ...etc.

"target": "es2016"

2.Modules Section

• module option: this option control the modules pattern that we can use in our project, is also contain a lot of modules patterns that we can choose from any one of them like: "commonjs", "amd", "umd" and more.

"module": "commonjs"

• rootDir option: this option describes the path of the Root Directory that our ts files are a child in it, its default value is "./" and by this option you can specify any path, but notice that any of ts files out of this directory will not be converted to js files.

"rootDir": "./"

• baseUrl option: this option sets a base directory to resolve non-absolute module names. let me show you:

import "getUsers" from "./components/services/users.js"

look at the previous import statement, if we set the baseUrl option to "./components/" we can achieve the same thing by below import statement:

import "getUsers" from "services/users.js"

3.JavaScript Support Section

• allowJs option: this option allows us to use javascript files and import them into our ts files, so by activating this option you can import any javascript code in your typescript files.

"allowJs": true

• checkJs option: this option allow typescript compiler to report errors that occurs in js files. So if you allow _checkJs _ option it's preferable to enable this option to ease errors checking in js files.

"checkJs": true

4.Emit Section

• sourceMap option: source map file is a file that maps from the transformed source to the original source. you can think of source-map as a file that links every token in your minified file to a pretty and human-readable file that allows you to debug your code easily.

notice that source map file is created in development not production environment for performance and security reasons.

"sourceMap": true

• outDir Option: this option accept the dire name and it will set all converted js files on it, so if we enable this option and set a Dir name in it, all our ts files will be converted and collected in the dire that we were set it as js files.

"outDir": "./"

• outFile Option: this option is like the previous option except that instead of collecting all converted js files in one Directory, all our ts code will be collected and executed in a single js file.

"outFile": "./main"

Note: outFile cannot be used unless module is "None", "System", or "AMD". This option cannot be used to bundle "CommonJS" or "ES6" modules.

• removeComments Option: this option allow us to remove all comments from the converted js file.

"removeComments": true

• noEmitOnError Option: This option prevent all ts files from be executed if any problem or error found. this error may be in a single file or a group of files.

"noEmitOnError": true

5.Type Checking Section

• strict Option: this option control all checking rules that are used in typescript. if we looked under this option we will find other options:

// "noImplicitAny": true
// "strictNullChecks": true
// "strictFunctionTypes": true
// "strictBindCallApply": true
// "strictPropertyInitialization": true
// "noImplicitThis": true
// "useUnknownInCatchVariables": true
// "alwaysStrict": true
// "noUnusedLocals": true
// "noUnusedParameters": true
// "exactOptionalPropertyTypes": true
// "noImplicitReturns": true,
// "noFallthroughCasesInSwitch": true 
// "noUncheckedIndexedAccess": true
// "noImplicitOverride": true
// "noPropertyAccessFromIndexSignature": true
// "allowUnusedLabels": true 
// "allowUnreachableCode": true

There are the rules of typescript to check errors in your code.
so you can allow all of these rules by setting true value to strict option or you can customize them, you are free.

Conclusion

TypeScript config Options contain a lot of other options that ease your development work and in this article, I only explain a small piece of it, so you should continue in search to learn more and more.

Finally, Keep Learning.