A Comprehensive Guide to TypeScript: Installation, Configuration, and Best Practices

TypeScript is a statically typed superset of JavaScript that helps you write more maintainable and error-free code by adding type annotations to your JavaScript code. To get started with TypeScript, you’ll need to install it, configure it, and create TypeScript files.

Installation:

To start using TypeScript, you need to have Node.js installed on your machine. TypeScript can be installed globally or as a project dependency. It’s recommended to install it locally within your project, which allows you to have different TypeScript versions for different projects.

To install TypeScript locally, open your terminal and navigate to your project folder, then run:

npm install typescript --save-dev

or

yarn add typescript --dev

Make sure to commit the generated lockfile to ensure that every team member uses the same version of TypeScript.

To run the TypeScript compiler, you can use the following commands

npx tsc
or
yarn tsc

This command installs TypeScript as a development dependency in your project.

installing it globally:

npm install -g typescript

Configuration:

TypeScript uses a configuration file called tsconfig.json to manage various settings for your project. You can create this file manually or use the TypeScript compiler’s –init flag to generate a basic configuration file.

To generate a tsconfig.json file, run the following command in your project directory:

tsc --init

When executing the tsc command locally, TypeScript will compile the code using the configuration specified in the nearest tsconfig.json file.

Here are some examples of CLI commands that run with the default settings:

tsc main.ts // Compile a specific file (main.ts) to JavaScript
tsc src/*.ts // Compile any .ts files under the 'src' folder to JavaScript
tsc app.ts util.ts --outfile index.js // Compile two TypeScript files (app.ts and util.ts) into a single JavaScript file (index.js)

This will create a tsconfig.json file with default settings.

TypeScript Configuration File (tsconfig.json):

The tsconfig.json file is where you specify TypeScript compiler options for your project. Here are some common options you might configure:

target: This option specifies the ECMAScript target version for your code. It determines which version of JavaScript TypeScript should transpile your code to. For example, “target”: “ES6” generates ES6 code.

// tsconfig.json
{
"compilerOptions": {
"target": ["ES5", "ES6"]
}
}

lib: Specifies the library files that TypeScript should include when compiling. It’s an array of strings that represent the standard libraries you want to use. For example, “lib”: [“ES6”, “DOM”] includes ES6 and DOM types.

// tsconfig.json
{
"compilerOptions": {
"lib": ["ES6", "DOM"]
}
}

strict: Enabling strict mode (“strict”: true) enables a set of strict type checking options. This is recommended for catching more type-related errors.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true
  }
}

module: Specifies the module system to use. Common options include “CommonJS”, “ES6”, or “AMD”.

// tsconfig.json
{
"compilerOptions": {
"module": "CommonJS"
}
}

moduleResolution: Determines how TypeScript resolves module import statements. Common values are “node” or “classic”.

node Example:

// tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node"
}
}

Let's say you have the following file structure:

project/
├── src/
│ ├── main.ts
│ ├── utils/
│ │ ├── math.ts
│ └── node_modules/
│ ├── lodash/
│ │ ├── index.ts
│ └── package.json
└── tsconfig.json

If main.ts imports a module like this:

import _ from "lodash";

// tsconfig.json
{
"compilerOptions": {
"moduleResolution": "classic"
}
}

In the same directory structure as before, if you have main.ts importing math.ts like this:

import { add } from "./utils/math";

esModuleInterop: Set this to true if you want TypeScript to generate code that is compatible with ES modules when using import and export in your code.

Consider the following project structure:

project/
├── src/
│ ├── main.ts
│ ├── utils/
│ │ ├── math.ts
│ │ └── math.js
├── tsconfig.json

// tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node"
}
}

With “moduleResolution”: “node”, TypeScript will use Node.js module resolution, which prioritizes the node_modules directory. When you import math in main.ts:

import { add } from "./utils/math";

jsx: If you are working with JSX (React), you can configure this option accordingly. For React, use “jsx”: “react”.

// tsconfig.json
{
"compilerOptions": {
"jsx": "react"
}
}You can use preserve, react-native, none

skipLibCheck: Set this to true to skip type checking of declaration files (.d.ts files) in your project.

Here’s an example of how to use the “skipLibCheck” option in your tsconfig.json file

// tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true
}
}

files: An array of file paths to be included explicitly in the compilation.

// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist"
},
"files": [
"./src/main.ts",
"./src/utils/math.ts"
]
}

include: An array of file globs that specify which files should be included in the compilation process.

Assuming you have a project structure like this:

project/
├── src/
│ ├── main.ts
│ ├── utils/
│ │ ├── math.ts
│ └── deprecated/
│ ├── oldCode.ts
│ └── deprecatedLib.ts
└── tsconfig.json

You can configure your tsconfig.json as follows:

// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist"
},
"include": [
"./src/**/*.ts" // Include all TypeScript files under the src directory and its subdirectories
]
}

exclude: An array fof file globs that specify which files should be excluded from the compilation process.

// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist"
},
"exclude": [
"./src/deprecated/**/*.ts" // Exclude all TypeScript files under the deprecated directory and its subdirectories
]
}

Writing TypeScript Code:

Now that you have TypeScript configured, you can create .ts files and start writing TypeScript code. TypeScript will use the configuration settings from tsconfig.json to transpile your code into JavaScript.

Compiling TypeScript Code:

To compile your TypeScript code, run:

npx tsc

This command will transpile your TypeScript files into JavaScript according to the settings in your tsconfig.json file.

That’s the basic process of getting started with TypeScript. You can customize your tsconfig.json file and explore TypeScript’s rich type system to enhance your development experience.

You can also discover a lot about Javascript by exploring different topics.

Note: We welcome your feedback at Easy Coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!