TypeScript - Basic Configuration⚙️
Tags: typescript, javascript, microsoft, configuration
Published: 2020-07-21 14:31:10

Fascinated by Javascript but don't like its dynamic types and wish if it was a statically typed language? If that's the case, then you surely need to learn TypeScript which is Javascript with Types. Oh, you already know TypeScript exist? Okay, here's another Pitch. Do you want Typescript to follow your guidelines and obey the rules you defined? Yes? Wear your Seat belt.

In this post, I'll talk about Typescript basic configurations. TypeScript developers have given you some choices to guide TypeScript on how to behave. This is your time to take this responsibility and learn how to configure your TypeScript Projects.

## Table Of Content
* [Creating a Configuration File](#config-file)
* [Understanding Configuration Options](#config)
  * [File Inclusion](#file-inc)
  * [Project Options](#project-op)
* [Additional Configurations](#additional)
* [Recap](#recap)

## Creating a Configuration File<a name="config-file"></a>
You can create a new file with the name `tsconfig.json` or `jsconfig.json` in your project root directory. Once created, you can define some rules that TypeScript will follow, which we will talk about in a few minutes.

![tsconfig.json](https://i.imgur.com/M66uN4T.png)

**Note:** If you don't create a config file, TypeScript will use default rules. So this configuration file is not a must but there are some rules that you must know to be able to configure TypeScript.

## Understanding Configuration Options<a name="config"></a>
Let's come to the main point, **Configuration Options**. There are tons of options available in TypeScript which I won't be able to cover but I'll try to explain some basic options that we use mostly.
The options are divided into multiple categories, I will talk about each of these categories and explain some basic options.

### File Inclusion<a name="file-inc"></a>
This category includes all the files related options. These settings ensure that TypeScript picked up the right files.

### Files<a name="files"></a>
`files` is an array, where you add all the files that you want to be included when TypeScript compiles.

```
{
   "files": ["core.ts","pipes.ts","helpers.ts"]
}
```

`files` are used if your project has few TypeScript files that need to be compiled.

### Include<a name="include"></a>
`include` works the same like `files` but it is use to include directories rather than just files. 

```
{
  "include": ["src/**/*", "helpers", "tests/**/*"],
}

```

This will include all directories listed in the array.
I've use wildcards in the example (`**/*`) which we use in `include` and `exclude`

* `*` matches zero or more characters (excluding directory separators)
* `?` matches any one character (excluding directory separators)
* `**/` matches any directory nested to any level

### Exclude
`exclude` as the name defines, works exactly opposite of `include`. It excludes all the listed files.

```
{
   "include": ["src/**/*", "helpers", "tests/**/*"],
   "exclude": ["src/HOC/basic.ts"]
}
```

This will exclude `/src/HOC/basic.ts` file only and the rest of the files in `/src` will be compiled because they are mentioned in `include`.

**Note:** Files specified in `exclude` will be ignored if you are `importing` it in an `include` file or specified it in `files` array.

## Project Options<a name="project-op"></a>
These options are used to define your project's runtime expectations.

### Declaration
This property (`declaration`) generates a `.d.ts` file for every TS or JS file in your project. This `.d.ts` the file includes type definitions.
For example, if I set it to `true`.Then my `/src/index.ts`
```
var userName: string = "Khattak.dev";

console.log(userName);
```
When compiled, will result in producing two files.
`/dist/index.js`
```
var userName = "Khattak.dev";
console.log(userName);
```
and `/dist/index.d.ts`
```
declare var userName: string;
```

### Remove Comments
If you don't want to have comments in your build files, you can this `removeComments` which will ignore all the comments and you will get comments-free build.
For example, if you have `/src/index.ts`
```
var userName: string = "Khattak.dev";
// Let's Print userName
console.log(userName);

```
Its build version will be
```
var userName = "Khattak.dev";
console.log(userName);
```

### Out Dir
`outDir` is used to specify your build's output directory. If you don't specify your output directory, TypeScript will by default add the build files into the same directory where the src file lies.
For example, the build version of `/src/test/index.ts` will be `/src/test/index.js`.

### Modules
TypeScript configuration has a set of modules available which creates your build version using a specific module. 
Here's an example,
```
import { value } from "./variables";

console.log(value);
```

CommonJS
```
"use strict";
exports.__esModule = true;
var variables_1 = require("./variables");
console.log(variables_1.value);
```

AMD
```
define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.value = void 0;
    exports.value = 42;
});
```

ES2020
 ```
import { value } from "./variables";
console.log(value);
```




## Additional Configurations<a name="additional"></a>
As I mentioned in the start, there are tons of properties available in TypeScript and I can't cover them all, so these were some useful properties. If you are interested to explore more properties, here's the list
* [Files Inclusion](https://www.typescriptlang.org/tsconfig#Project_Files_0)
* [Project Configuration](https://www.typescriptlang.org/tsconfig#Basic_Options_6172)
* [Strict Checks](https://www.typescriptlang.org/tsconfig#Strict_Type_Checking_Options_6173)
* [Module Resolution](https://www.typescriptlang.org/tsconfig#Module_Resolution_Options_6174)
* [Source Maps](https://www.typescriptlang.org/tsconfig#Source_Map_Options_6175)
* [Linter Checks](https://www.typescriptlang.org/tsconfig#Additional_Checks_6176)
* [Experimental](https://www.typescriptlang.org/tsconfig#Experimental_Options_6177)
* [Command Line](https://www.typescriptlang.org/tsconfig#Command_line_Options_6171)
* [Watch Options](https://www.typescriptlang.org/tsconfig#Watch_Options_999)
* [Advanced](https://www.typescriptlang.org/tsconfig#Advanced_Options_6178)


## [Recap]<a name="recap"></a>
Let's try to have a quick overview of what you have learned.
* TypeScript allows you to define some rules by using a configuration file in your project root folder.
* There are different type of properties available to configure your TypeScript project, such as:
 * `include`
 * `exclude`
* An example of a `tsconfig.json`
```
{
"compilerOptions": {
  "module": "commonjs",
  "declaration": true,
  "removeComments": true,
  "outDir": "dist"
},
"files": [
  "core.ts",
  "sys.ts",
  "types.ts",
  "helpers.ts",
  "parser.ts",
  "pipes.ts",
]
}

```