Setup and configuration

Installation and configuration

TypeScript offers custom installations for most modern JS-based frameworks including Webpack, React.js and Vue.js. The instructions below cover minimal TS set-up outside of a specific framework. TypeScript adds an additional step to any build process since your code must compile to JS before any bundling and transpilation can occur.

Installation

mkdir typescript-project
cd typescript-project
npm i typescript --save-dev

Initialise project

npx tsc --init

Basic configuration

"compilerOptions": {
	"target" : "es2020", //es2015 for prod
	"module" : "es2020",
  	"allowJs": true,
  	"checkJs": true,
  	"strict": true,
  	"esModuleInterop": true
}

Specify output paths (for production code)

"compilerOptions": {
	...
	"outDir": "dist",
	"sourceMap": true,
}

Compile-time commands

tsc --noEmit
tsc --noEmit --watch

Global requirements

npm install -g typescript
npm install -g ts-node

ts-node allows you to run TS files the way you would with standard JS, i.e. node [filename], you just use ts-node filename .

This is a convenience that saves you compiling from TS → JS and then running Node against the compiled JS. Which is useful for debugging and checking values as you work.

Imports and exports

You may wish to define your custom types outside of their application, for instance in a /types/ directory. The custom type or types can then be imported using standard ES6 imports:

export type Article = {
		price: number,
}

export type AnotherType = {
...
}
import { Article, AnotherType } from "./types/allTypes.js";
import Article from "./types/allTypes.js";

TypeScript also provides a specific import keyword type so that you can distinguish type imports from other module imports. This is handy when you have multiple components in the one file:

import type { Article } from "./types/allTypes.js";
logo