TypeScript Fundamentals

What is TypeScript

TypeScript is a statically typed superset of JavaScript developed by Microsoft. It adds optional type annotations and other features to JavaScript, then compiles down to plain JavaScript.

Key Benefits

• Catch errors at compile time instead of runtime
• Better IDE support with autocomplete and refactoring
• Self-documenting code through type annotations
• Safer refactoring with type checking

How TypeScript Works

// TypeScript code
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Compiles to JavaScript
function greet(name) {
  return `Hello, ${name}!`;
}

TypeScript doesn't change how your code runs—it only adds a layer of type safety during development.

Setting Up TypeScript

Installation

# Install TypeScript globally
npm install -g typescript

# Or as a project dependency
npm install --save-dev typescript

# Verify installation
tsc --version

tsconfig.json

The TypeScript configuration file controls how the compiler behaves:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Key Compiler Options

Option	Description
strict	Enables all strict type-checking options
target	JavaScript version to compile to
module	Module system to use
outDir	Output directory for compiled files

Type Annotations

Type annotations tell TypeScript what type a variable, parameter, or return value should be.

Variable Annotations

// Explicit type annotation
let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;

// Type inference (TypeScript figures it out)
let count = 10; // inferred as number
let greeting = "hello"; // inferred as string

Function Annotations

// Parameter and return types
function add(a: number, b: number): number {
  return a + b;
}

// Arrow function
const multiply = (x: number, y: number): number => x * y;

// Void return type
function log(message: string): void {
  console.log(message);
}

Object Annotations

interface User {
  name: string;
  age: number;
  email?: string; // optional
}

const user: User = {
  name: "Bob",
  age: 30
};

Compiling TypeScript

TypeScript must be compiled to JavaScript before it can run in browsers or Node.js.

Basic Compilation

# Compile a single file
tsc app.ts

# Compile all files in a project
tsc

# Watch mode (recompile on changes)
tsc --watch

Compilation Output

Given this TypeScript:

// src/app.ts
const message: string = "Hello";
console.log(message);

With outDir: "./dist", TypeScript generates:

// dist/app.js
const message = "Hello";
console.log(message);

Using with Build Tools

Most projects use build tools instead of running tsc directly:

# With Vite
npm run dev

# With webpack
npm run build

# With esbuild
npm run build

These tools handle TypeScript compilation along with bundling, minification, and other optimizations.