Readonly Properties

type User = {
  readonly id: number;
};

Intersection Types

type Staff = Person & Employee;

Array Types

const items: [] = [];
const names: string[] = [];
const values: Array<string> = [];

Union Types

let value: string | number;

Type Narrowing

if (typeof value === 'string') {
  console.log(value.toUpperCase());
}

Union Arrays

const values: (string | number)[] = ['hello', 42];

Literal Types

let answer: 'yes' | 'no';

Tuples

const user: [number, string] = [1, 'John'];

React and Tuples

const [count, setCount] = useState(0);

Tuples are commonly used in React hooks.

Tuples vs Objects

Objects are often easier to understand because property names provide context, while tuples rely on position.

Enums

JavaScript does not have built-in enums. TypeScript adds enums as a way to group related named constants together.

enum Response {
  NO,
  YES,
}

Key Points

• Enum names and members are commonly capitalized.
• Numeric enums start at 0 by default.
• Subsequent values are automatically incremented.

enum Status {
  PENDING,
  APPROVED,
  REJECTED,
}

You can also assign values explicitly.

enum Status {
  PENDING = 10,
  APPROVED,
  REJECTED,
}

Enums and Databases

enum UserRole {
  ADMIN = 'admin',
  USER = 'user',
}

String Enums

enum UserRole {
  ADMIN = 'admin',
  USER = 'user',
}

Mixed Enums

enum Result {
  SUCCESS = 1,
  FAILURE = 'failed',
}

Enums vs Objects

const Response = {
  NO: 0,
  YES: 1,
} as const;

Interfaces

Interfaces are another way to describe the shape of an object in TypeScript. In many cases, interfaces and type aliases can be used interchangeably, but there are some important differences.

Basic Interface

interface User {
  name: string;
  age: number;
}

This is very similar to a type alias:

type User = {
  name: string;
  age: number;
};

Optional and Readonly Properties

Interfaces support optional properties using ? and readonly properties using the readonly keyword.

interface User {
  readonly id: number;
  name: string;
  age?: number;
}

Function Properties

Interfaces can describe functions that belong to an object.

interface Abc {
  x: string;
  hey: () => string;
}

Type aliases can also define function properties.

type Abc = {
  x: string;
  hey: () => string;
};

Extending Interfaces

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  salary: number;
}

The Employee interface automatically includes all properties from Person.

Extending Type Aliases

Type aliases cannot use extends, but similar behavior can be achieved using intersection types (&).

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  salary: number;
};

Interfaces vs Union Types

Interfaces cannot directly represent union types.

type Status = 'pending' | 'approved' | 'rejected';

For this reason, type aliases are often preferred when working with unions and literal types.

When to Use Interfaces vs Type Aliases

Summary

Objects, arrays, unions, intersections, tuples, enums, and interfaces are fundamental building blocks for modeling data in TypeScript.