Basic Types

In TypeScript, you annotate a variable's type using the colon : Type syntax.

TypeScript

// Primitives
let framework: string = "React";
let version: number = 18;
let isAwesome: boolean = true;

// The 'any' type - use sparingly!
// It opts out of type checking.
let anything: any = 4;
anything = "hello"; // No error, 'any' is flexible but unsafe.

// Arrays
let scores: number[] = [10, 20, 30];
let names: Array<string> = ["Alice", "Bob"]; // Alternative syntax

A Tuple is like an array with a fixed number of elements of known types.

TypeScript

let user: [number, string] = [1, "Alice"];
// user = ["Bob", 2]; // ERROR: Order and types must match

Interfaces: Describing the Shape of Objects

An interface is a way to define a contract for an object's shape. It specifies what properties and methods an object should have.

TypeScript

interface User {
  readonly id: number; // 'readonly' properties cannot be changed after creation
  name: string;
  email?: string; // '?' makes the property optional
  sayHello(): string; // A method that returns a string
}

const userA: User = {
  id: 1,
  name: "Alice",
  sayHello: function() {
    return `Hello, I am ${this.name}`;
  }
};

userA.name = "Alicia";
// userA.id = 2; // ERROR: Cannot assign to 'id' because it is a read-only property.

Interfaces can also be extended to build more complex types from simpler ones.

TypeScript

interface Admin extends User {
  role: 'admin' | 'super-admin';
}

const adminUser: Admin = {
  id: 2,
  name: "Bob",
  role: 'admin',
  sayHello: () => "Hello from admin"
};

Type Aliases: Giving a Type a New Name

A type alias lets you create a new name for any type. This is useful for primitives, but especially powerful for creating Union and Intersection types.

TypeScript

// Alias for a primitive
type UserID = string | number;

// Union Type: A variable that can be one of several types
let myId: UserID = "abc-123";
myId = 456; // Also valid

function printId(id: UserID) {
  console.log(`Your ID is: ${id}`);
}

An Intersection Type (&) combines multiple types into one.

TypeScript

type HasName = { name: string };
type HasEmail = { email: string };

type Person = HasName & HasEmail;

const contact: Person = {
  name: "Carol",
  email: "carol@example.com"
};

Interface vs. Type Alias: What's the Difference?

They are very similar, but have one key difference: Declaration Merging.

Interfaces can be defined multiple times, and TypeScript will merge their definitions. This is useful when extending third-party types. Type aliases cannot.

TypeScript

// This is VALID - the definitions are merged
interface Box {
  height: number;
}
interface Box {
  width: number;
}
const myBox: Box = { height: 10, width: 20 };

// This is an ERROR - duplicate identifier
// type Window {
//  height: number;
// }
// type Window {
//  width: number;
// }

General Guideline:

• Use interface when defining the shape of an object or class.
• Use type when you need to create unions, intersections, or aliases for primitive types.