Introduction to TypeScript

What Is TypeScript?

TypeScript is an open-source programming language developed and maintained by Microsoft. It builds on top of JavaScript by adding static type definitions. Every valid JavaScript program is also a valid TypeScript program, which means you can adopt TypeScript gradually without rewriting your existing code.

TypeScript code is not executed directly by browsers or Node.js. Instead, it is compiled (or "transpiled") into plain JavaScript. The TypeScript compiler checks your code for type errors during this step, catching bugs before your code ever runs.

Why TypeScript Over JavaScript?

JavaScript is a dynamically typed language. Variables can hold any type of value, and type errors only appear at runtime. This flexibility is convenient for small scripts, but it becomes a source of hard-to-find bugs in larger applications.

TypeScript addresses these problems by providing:

• Compile-time error checking -- Catch mistakes before the code runs
• Better IDE support -- Autocompletion, inline documentation, and refactoring tools
• Self-documenting code -- Type annotations make function signatures clear
• Safer refactoring -- The compiler flags every place affected by a change
• Scalability -- Large codebases become easier to maintain and navigate

TypeScript vs JavaScript

The table below summarizes the main differences between the two languages.

Setting Up TypeScript

TypeScript requires Node.js. If you do not have Node.js installed, download it from nodejs.org. Then install the TypeScript compiler globally:

# Install TypeScript globally
npm install -g typescript

# Verify the installation
tsc --version

You can also install TypeScript as a project dependency, which is recommended for team projects:

# Initialize a new project
npm init -y

# Install TypeScript as a dev dependency
npm install --save-dev typescript

# Create a tsconfig.json file
npx tsc --init

Your First TypeScript Program

Create a file called hello.ts and add the following code:

// hello.ts
function greet(name: string): string {
  return "Hello, " + name + "!";
}

let user: string = "World";
console.log(greet(user));

Notice the : string annotations. These tell TypeScript that name must be a string, the function returns a string, and user is a string. If you tried to pass a number to greet(), the compiler would report an error.

Compiling TypeScript

To run your TypeScript code, you first compile it to JavaScript using the tsc command:

# Compile the TypeScript file
tsc hello.ts

# This produces hello.js — run it with Node.js
node hello.js
# Output: Hello, World!

The compiler strips away all type annotations and produces clean JavaScript that any browser or runtime can execute. If there are type errors, the compiler will list them and you can fix them before running the code.

Basic Type Annotations

Type annotations are the core feature of TypeScript. You place them after a variable name or parameter, separated by a colon. Here are the most common patterns:

// Variable annotations
let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;

// Function parameter and return type annotations
function add(a: number, b: number): number {
  return a + b;
}

// Array annotation
let scores: number[] = [95, 87, 92];

// TypeScript can also infer types automatically
let city = "New York";  // TypeScript infers 'string'
let count = 10;          // TypeScript infers 'number'

When TypeScript can determine the type from the assigned value, you do not need to write an explicit annotation. This is called type inference, and it keeps your code clean while still providing full type safety.

let price: number = 29.99;
price = "free";  // Error: Type 'string' is not assignable to type 'number'

function multiply(a: number, b: number): number {
  return a * b;
}
multiply("5", 3);  // Error: Argument of type 'string' is not assignable to parameter of type 'number'