Arsalan Khattak

Posted on Jul 21, 2020

TypeScript - Basic Configuration⚙️

#typescript #javascript #microsoft #configuration

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
Understanding Configuration Options
- File Inclusion
- Project Options
Additional Configurations
Recap

Creating a Configuration File

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.

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

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

This category includes all the files related options. These settings ensure that TypeScript picked up the right files.

Files

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

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

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

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

[Recap]

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",
]
}

DEV Community