Getting started with TypeScript: a super fast guide

In this guide, I'll show you how to set up a TypeScript project with minimal configuration. Let's get started:

Project structure

TypeScriptProject/
├── node_modules/  (Generated automatically)
│   └── ...
├── index.js       (Generated automatically)
├── index.ts
├── nodemon.json
├── package.json   (Generated automatically)
├── pnpm-lock.yaml (Generated automatically)
└── tsconfig.json  (Generated automatically or manually)

Create a project folder

Create a folder called TypeScriptProject or whatever, open it up in your editor, and open up a terminal at the project root.

Initialise the project

I'll be using pnpm(opens in a new tab) for this project.

pnpm init

Install dependencies

pnpm add -D typescript tsx nodemon

Used together, tsx (TypeScript Executor) and nodemon allow you to run your application without compiling, and restart it automatically whenever you make changes - like a live server.

ts-node is another package that is supposed to do the same thing, but it's much harder to configure, and in my experience at least, never works.

Compared to other npm packages, TypeScript is quite a large one (currently 22.5 MB), so don't be surprised if it takes longer than usual to download.

Create a tsconfig.json

Either create one manually or run pnpm exec tsc --init, which will create one for you, albeit with a ton of comments that explain all the settings. Here's the current default with the comments removed.

1{
2	"compilerOptions": {
3		"target": "es2016",
4		"module": "commonjs",
5		"esModuleInterop": true,
6		"forceConsistentCasingInFileNames": true,
7		"strict": true,
8		"skipLibCheck": true
9	}
10}

Create a nodemon.json

1{
2	"watch": ["index.ts"],
3	"ext": "ts,json",
4	"exec": "tsx index.ts"
5}

This file tells nodemon what to do with the files in your project.

Add scripts to package.json

1{
2	"name": "type-script-project",
3	"main": "index.js",
4	"scripts": {
5		"dev": "nodemon",
6		"build": "tsc",
7		"start": "node index.js"
8	},
9	"devDependencies": {
10		"nodemon": "^3.1.4",
11		"tsx": "^4.19.1",
12		"typescript": "^5.6.2"
13	}
14}

• The dev script uses nodemon as a live server for our application, which will restart when we make changes
• The build script will compile our TypeScript files into plain JavaScript
• The start script will run our application using the compiled JavaScript file as the entry point

Write some TypeScript

1interface Quote {
2	author: string;
3	content: string;
4}
5
6const quote: Quote = {
7	author: 'Bram Stoker',
8	content: 'We learn from failure, not from success!',
9};
10
11console.table(quote);

Now we can run pnpm dev to see the output

Compile JavaScript

Run pnpm start, and an index.js file will be created in the project root.

1"use strict";
2const quote = {
3    author: 'Bram Stoker',
4    content: 'We learn from failure, not from success!',
5};
6console.table(quote);

The types have been erased, along with the empty lines, and 'use strict' has been added. You can learn more about what this does here(opens in a new tab).

Run the JavaScript

Now we can run our compiled script with pnpm start

And that's it! Hopefully that helped. One more bonus tip: if you want to write some tests for your TypeScript application, I recommend using Vitest(opens in a new tab), which is a powerful testing framework that works beautifully with TypeScript.