How to install TypeScript

TypeScript is a popular typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft. In this guide, we'll cover several methods on how to install TypeScript using npm (Node Package Manager), focusing on both local and global installations.

Prerequisites

Before you can install TypeScript, you need to have Node.js and npm installed on your machine. Node.js is a runtime environment that allows you to run JavaScript on the server side, and npm is its package manager, which facilitates the installation of libraries and tools for JavaScript development.

You can check if you have Node.js and npm installed by running the following commands in your terminal:

node -v
npm -v

If these commands return version numbers, you're all set. If not, you need to install Node.js. You can download it from Node.js official website. npm is included by default when installing Node.js.

Installing TypeScript

1. Installing TypeScript locally

Installing TypeScript locally means it will only be accessible within a specific project directory. This is generally recommended as it allows different projects to use different versions of TypeScript without conflicts.

To install TypeScript locally, navigate to your project directory in the terminal and run:

npm install typescript --save-dev

The --save-dev flag adds TypeScript as a development dependency in your project's package.json file. This is beneficial because it ensures that anyone working within the project will use the same TypeScript version.

After installation, you can check that TypeScript is installed by looking in the node_modules directory or checking the package.json file under the devDependencies section.

2. Installing TypeScript globally

You may also choose to install TypeScript globally, allowing you to use it in any project on your computer. To install TypeScript globally run:

npm install -g typescript

The -g flag stands for "global." This installation method is useful if you want to run TypeScript commands from any location on your machine or if you're setting up a machine where multiple projects will use the same TypeScript version.

To verify that TypeScript has been installed globally, you can run:

tsc -v

This command prints the TypeScript compiler version installed on your machine, ensuring that TypeScript is able to be run in any project on your local environment.

Using TypeScript

After installing TypeScript, you can start using it by initializing a new TypeScript configuration file, tsconfig.json, which specifies the compiler options for your project. To initiate a new TypeScript configuration file run:

npx tsc --init

This command creates a tsconfig.json file in your project directory. You can edit this file to customize how TypeScript compiles your code, such as specifying the target JavaScript version or enabling source maps for debugging.

This file tells the TypeScript compiler (tsc) how to compile TypeScript files into JavaScript files.

Here's an example of a typical TypeScript configuration file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["dom", "es6", "dom.iterable", "scripthost"],
    "allowJs": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmitOnError": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

1. compilerOptions

This section configures the options related to the compiler behavior:

• target: Specifies the ECMAScript target version that TypeScript will compile down to. For example, "es6" compiles to ECMAScript 2015.

• module: Defines the module system for the project. "commonjs" is typical for Node.js applications.

• lib: Specifies a list of library files to be included in the compilation. Including "dom" allows for manipulation of the Document Object Model, "es6" includes standard ECMAScript 2015 features, and so on.

• allowJs: If set to true, the TypeScript compiler will compile JavaScript files along with TypeScript files, allowing a mixed codebase.

• outDir: The output directory where the compiled JavaScript files will be placed.

• rootDir: Specifies the root directory of input files. Use to control the output directory structure with outDir.

• strict: Enables all strict type-checking options, improving maintainability and reducing potential runtime errors.

• noImplicitAny: Raises error on expressions and declarations with an implied any type, reducing potential for runtime errors.

• moduleResolution: Strategy the compiler uses to discover files. "node" mimics the resolution mechanism in Node.js.

• esModuleInterop: Enables compilation of ES6 modules to conform to the CommonJS module format, allowing default imports from modules without a default export.

• skipLibCheck: Skips type checking of declaration files (*.d.ts), which can speed up the compilation process.

• forceConsistentCasingInFileNames: Ensures that the casing of referenced filenames is consistent during the compilation.

• noEmitOnError: Prevents the compiler from generating output files if there are errors.

2. include

Specifies an array of filename patterns that should be included in the program. The pattern "src/**/*" includes all files in the src directory and its subdirectories.

3. exclude

Specifies files or folders that the compiler should ignore. Typically, this includes node_modules to reduce compilation time, and can also include test files or any other files that should not be compiled to JavaScript.

Summary

To install TypeScript, you have two primary methods: locally within a project or globally across your system. Local installation is preferred for project-specific settings and to avoid version conflicts between projects. Global installation can be convenient for general use across multiple projects without needing separate installations.

For further reading see the official TypeScript documentation.