The most important Config Options in Typescript
Tags: javascript, programming, typescript, frontend
Published: 2022-02-07 15:22:04

## **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.

![Folders and Files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbnkt8t70glmmlphmwla.png)

![TypeScript JSON Config File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47zdtmuuosrjn0ccnds3.png)

And now we are ready to test the options.

---

## **Config Options Explaining**

### 1. **Public Options**

**`Include`, `Exclude` and `Files `Options**
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.
```javascript
"include": ["file1.ts", "file2.ts", ...etc]
```

- `Exclude `option: This Option accept array of files too, but unlike Include option, It prevent any **ts** file from be excuted and converted into **js** file.
```javascript
"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.
```javascript
"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.

```javascript
"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. 

```javascript
"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.

```javascript
"rootDir": "./"
```

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

```javascript
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:

```javascript
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.
```javascript
"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.
```javascript
"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. 

```javascript
"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.

```javascript
"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.

```javascript
"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.

```javascript
"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.  

```javascript
"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:

``` javascript
// "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.