Static Typing and Transpilation

As a statically typed superset of JavaScript, TypeScript introduces compile-time error detection, robust refactoring capabilities, and intelligent code completion. Transpiled via the TypeScript compiler or Babel, it guarantees execution across standard JavaScript environments while supporting advanced paradigms like generics and strict object-oriented architectures.

Primitive and Complex Types

The type system encompasses primitives such as boolean, number, and string, alongside advanced structures like arrays, tuples, and enums. Special types include any for opting out of checking, void for functions without a return, and never for unreachable code.

let isEnabled: boolean = true;
let age: number = 25;
let username: string = "Bob";
let scores: Array<number> = [10, 20];
let record: [string, number] = ["id-123", 50];
enum Status { Active, Inactive, Pending }
let current: Status = Status.Active;
let flexibleData: any = {};
function logMsg(): void { console.log("hi"); }
let emptyVal: null = null;
let notAssigned: undefined = undefined;
const throwErr = (msg: string): never => { throw new Error(msg); };

Type Annotations and Type Inference

Explicit type definitions are applied using type annotations, denoted by a colon. When a variable is initialized without an explicit annotation, the compiler automatically deduces its type through inference.

let itemCost: number = 100; // Explicit annotation
let itemName = "Laptop"; // Inferred as string

Defining Contracts with Interfaces

Interfaces establish the structural shape of objects, ensuring type safety and preventing missing or malformed properties. They facilitate code decoupling and enable polymorphic designs.

interface Employee {
  empId: number;
  empName: string;
}

let staff: Employee = {
  empId: 101,
  empName: "John Doe"
};

Object-Oriented Programming with Classes

Classes encapsulate data and behavior, supporting inheritance and access modifiers to control visibility. Parameter properties offer a shorthand for declaring and initializing members directly within the constructor.

class Vehicle {
  constructor(public brand: string) {}

  accelerate(speed: number): void {
    console.log(`${this.brand} driving at ${speed} km/h`);
  }
}

const car = new Vehicle("Sedan");
car.accelerate(60);

Creating Reusable Components with Generics

Generics abstract types into parameters, allowing functions and classes to operate on diverse data types without sacrificing type integrity. This eliminates unnecessary type assertions and duplication.

function getFirstElement<T>(items: T[]): T | undefined {
  return items[0];
}

const firstNum = getFirstElement<number>([5, 10]);
const firstStr = getFirstElement(["a", "b"]);

Code Organization via Modules

Modules scope code to individual files, promoting high cohesion and low coupling. Using export and import keywords, components can be shared across the project architecture.

calcUtils.ts:

export const multiply = (a: number, b: number): number => a * b;

main.ts:

import { multiply } from './calcUtils';
const product = multiply(5, 4);
console.log(product);

Type Assertions

Type assertions override the compiler's inferred type, informing it that the developer knows the exact structure. This is achieved using the as keyword or angle bracket syntax.

let rawData: any = "12345";
let parsedLen: number = (rawData as string).length;

Type Aliases

Type aliases assign custom names to types, which is particularly useful for defining complex combinations like union or intersection types.

type Identifier = string | number;
type UserProfile = { uid: Identifier; age: number };

const guest: UserProfile = { uid: "u-99", age: 28 };

Functions and Function Overloads

Functions accept typed parameters and return values. Overloads provide multiple distinct signatures for a single function, enabling type-safe calls with varying argument configurations.

function transform(data: string): string;
function transform(data: number): number;
function transform(data: string | number) {
  if (typeof data === "string") return data.toUpperCase();
  return data * 2;
}

const r1 = transform("text");
const r2 = transform(10);

Applying Decorators

Decorators are higher-order functions that attach metadata or modify the behavior of classes and class members at runtime, denoted by the @ prefix.

function logCreation(constructor: Function) {
  console.log(`Instance created: ${constructor.name}`);
}

@logCreation
class Product {
  constructor(public title: string) {}
}

Compiler Configuration

The TypeScript compiler behavior is managed through the tsconfig. file. Key settings dictate the target ECMAScript version, module resolution strategy, and strictness levels.

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

Tooling and Ecosystem

A rich ecosystem bolsters TypeScript development. Editors like Visual Studio Code provide native intelligent completion and inline error checking. Bundlers such as Webpack and Vite seamlessly transpile TS via dedicated loaders. Testing frameworks like Jest offer full type support, while modern UI libraries (React, Vue, Angular) ship with comprehensive type definitions.