What is TypeScript? Setup

In this chapter, you learn the basic concepts of TypeScript and how to set up a development environment.

Before you read this book

warning

Prerequisites

This book assumes a basic knowledge of JavaScript. Make sure you understand the following.

• Variables and constants: How to use let and const
• Data types: strings, numbers, booleans, arrays, objects
• Functions: function declarations, arrow functions, parameters and return values
• Control flow: if/else, for, while, switch
• Array methods: map, filter, find, forEach
• Object operations: property access, spread syntax
• Asynchronous processing: Promise, async/await (used in later chapters)

You also need to be comfortable with basic command-line (terminal) operations.

What you learn in this chapter

• Understand what TypeScript is and why you would use it
• Grasp the main features and benefits of TypeScript
• Set up a development environment
• Recommended VSCode settings

info

We recommend working through this chapter hands-on. Once your environment is set up, you will create your first TypeScript program in the next chapter.

What is TypeScript

TypeScript is a programming language developed and maintained by Microsoft. It is designed as a superset of JavaScript that adds static typing (a backward-compatible extension).

Features of TypeScript

1. Static typing: Detect type errors at compile time
2. Compatibility with JavaScript: Use existing JavaScript code as is
3. The latest ECMAScript features: Use features from ES2015 onward ahead of time
4. Tooling support: Rich IDE autocompletion
5. Suited to large-scale development: Improves maintainability and readability

Why use TypeScript?

The problem with JavaScript:

// JavaScript example: type errors only surface at runtime
function add(a, b) {
  return a + b;
}

console.log(add(5, 10));        // 15 - works correctly
console.log(add('5', '10'));    // '510' - unintended result (string concatenation)
console.log(add(5, '10'));      // '510' - the type mismatch is hard to notice

The solution in TypeScript:

// TypeScript example: declaring types catches errors at compile time
function add(a: number, b: number): number {
  return a + b;
}

console.log(add(5, 10));        // 15 - works correctly
console.log(add('5', '10'));    // Error: Argument of type 'string' is not assignable to parameter of type 'number'
console.log(add(5, '10'));      // Error: the type mismatch is caught at compile time

Code explanation:

• a: number - declares that parameter a is of type number
• b: number - declares that parameter b is also of type number
• : number - declares that the function's return value is also of type number
• The TypeScript compiler flags calls with mismatched types as errors

Benefits of TypeScript

Benefit	Description	Concrete example
Catch bugs early	Detect type errors at compile time	Spot wrong argument types while coding
IDE autocompletion	Type information enables accurate completion	Prevent typos in method names
Self-documenting code	Type annotations act as documentation	The types of parameters and return values are clear at a glance
Easier refactoring	Type information lets you change code safely	Understand the impact of a bulk rename
More efficient team development	The intent of the code becomes clear	It is easier to understand code written by others

Setting up the development environment

Let's build an environment for learning and developing with TypeScript.

Option 1: Online environment (the easiest)

The TypeScript Playground lets you try things instantly without installing anything.

• URL: https://www.typescriptlang.org/play
• Benefit: No installation required, runs in the browser alone
• Use case: Trying simple code, learning, sharing code

How to use it:

1. Visit the URL above
2. Type TypeScript code into the editor on the left
3. The compiled JavaScript appears automatically on the right
4. Check the execution result in the Logs tab at the bottom

Option 2: Local environment (for serious development)

Required tools:

1. Node.js (a JavaScript runtime)
2. The TypeScript compiler

Step 1: Install Node.js

# Check whether Node.js is installed
node --version
# OK if v22.12.0 or later is shown (v24 LTS is recommended)

# Check the npm version too
npm --version
# OK if 10.0.0 or later is shown

info

This book assumes Node.js 22 LTS or later. From Node.js 22.18 onward (and v24), type stripping is enabled by default, so you can run .ts files directly without flags, like node app.ts (which lets you skip the build step while learning). For syntax that needs more than type erasure, such as enum or namespace, add --experimental-transform-types (covered in detail in Chapter 18). Node.js 20 and earlier have reached end of life, so they are not recommended for new learning.

If Node.js is not installed:

• Download the LTS version from the official site
• Follow the installer's instructions
• Restart your terminal and verify with the command above

Step 2: Install TypeScript

# Install the TypeScript compiler globally
# -g option: makes the tsc command available system-wide
npm install -g typescript

# Check the installed TypeScript version
tsc --version
# OK if Version 6.0 or later is shown (this book assumes TypeScript 6.0, 6.0.3 at the time of writing)

Command explanation:

• npm: the Node.js package manager (a library management tool)
• install: the command to install a package
• -g: a global install (makes it available system-wide)
• typescript: the name of the package to install

Step 3: Create a project folder

# Create a directory for the project
mkdir typescript-learning
# Move into the directory you created
cd typescript-learning

# Create package.json (the project's configuration file)
# -y option: answers all questions with the default values
npm init -y

The generated package.json:

{
  "name": "typescript-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Recommended VSCode settings

We recommend VSCode (Visual Studio Code) for TypeScript development.

Recommended extensions

Extension	Description	Importance
TypeScript Importer	Automatically adds import statements	★★★
Error Lens	Shows errors inline in the editor	★★★
Prettier	Automatically formats code	★★★
ESLint	Checks code quality	★★☆
Auto Rename Tag	Automatically renames HTML tags	★★☆
Path Intellisense	Completes file paths	★☆☆

VSCode settings (settings.json)

{
  // Format automatically on save
  "editor.formatOnSave": true,
  // Set Prettier as the default formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Add imports automatically in TypeScript files
  "typescript.suggest.autoImports": true,
  // Use relative paths for imports
  "typescript.preferences.importModuleSpecifier": "relative",
  // Remove unused imports automatically
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

Check that the TypeScript settings are active

1. Open a TypeScript file (.ts) in VSCode
2. It works if "TypeScript" and a version are shown at the bottom right of the editor
3. Hovering over a variable shows its type information

Try it: complete the environment setup ★

Install Node.js and TypeScript, and create a project folder.

Hint

1. First run node --version to check whether Node.js is installed
2. If it is not installed, download it from https://nodejs.org/
3. Install TypeScript with npm install -g typescript
4. Verify the installation with tsc --version
5. Initialize the project with mkdir typescript-learning && cd typescript-learning && npm init -y

Answer and explanation

# 1. Check Node.js
node --version
# → OK if v22.x.x or later (LTS) is shown

# 2. Install TypeScript
npm install -g typescript

# 3. Verify the installation
tsc --version
# → OK if Version 6.0 or later (6.0.3 at the time of writing) is shown

# 4. Create the project folder
mkdir typescript-learning
cd typescript-learning
npm init -y

# 5. Verify
ls
# → success if package.json exists

That completes the environment setup. In the next chapter, you will use this environment to create your first TypeScript program, then compile and run it.

Frequently asked questions

Q1: Can I use a JavaScript file as TypeScript?

A: Yes. Because TypeScript is a superset of JavaScript, you can just change a .js file to .ts and it works.

// Existing JavaScript code (valid.ts)
function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2));  // 3

This code is valid TypeScript. However, without type annotations, you do not fully benefit from TypeScript.

Q2: Do I need to know JavaScript before learning TypeScript?

A: Yes, you need a basic knowledge of JavaScript.

The minimum you need to know:

• Variables (let, const)
• Data types (number, string, boolean, array, object)
• Functions
• Conditionals (if, switch)
• Loops (for, while)
• Working with objects and arrays

Because TypeScript is "JavaScript with types added," your JavaScript knowledge is the foundation.

Common pitfalls for beginners

warning

Common mistakes

❌ The tsc command is not found

tsc --version
# → command not found: tsc

Cause: TypeScript is not installed globally, or the PATH is not set.

Solution:

# Reinstall
npm install -g typescript

# If it still does not work, use npx
npx tsc --version

❌ The Node.js version is too old

node --version
# → v14.x.x

Cause: Some TypeScript features do not work on old Node.js versions.

Solution: Install the LTS version (v22.12 or later, v24 LTS recommended) from the official Node.js site.

❌ TypeScript autocompletion does not work in VSCode

Cause:

1. TypeScript is not installed
2. The file extension is not .ts
3. There is no tsconfig.json

Solution:

1. Run npm install -g typescript
2. Change the file extension to .ts
3. Generate a config file with tsc --init

❌ "Cannot find module" error

Cannot find module 'typescript'

Cause: TypeScript is not installed in the project directory.

Solution:

# Install it locally in the project
npm install --save-dev typescript

Summary

What you learned in this chapter:

• What TypeScript is: a language that adds static typing to JavaScript
• The benefits of TypeScript: catching bugs early, IDE autocompletion, self-documenting code
• Setting up the development environment: installing Node.js and the TypeScript compiler

In the next chapter, you will write actual TypeScript code and compile and run it.

---

What to read next

• Your first TypeScript program