Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt

Use this file to discover all available pages before exploring further.

An interface in TypeScript is a named structural contract that defines the expected shape of an object. It operates exclusively at compile-time to enforce type checking, establishing a strict mapping of property keys to their corresponding data types and method signatures without emitting any runtime JavaScript code.

​
Syntax and Structure

Interfaces are declared using the interface keyword followed by the identifier and a block containing property declarations. 
interface Developer {
  id: number;
  username: string;
  authenticate(): boolean;
}

​
Property Modifiers

Interfaces support modifiers to alter the mutability and strictness of individual properties.
  • Optional Properties (?): Denotes that a property may be omitted from the object implementation. Note that when the exactOptionalPropertyTypes compiler flag is enabled (available since TypeScript 4.4), an optional property does not implicitly add undefined to the type union. Under this strictness, explicitly assigning undefined to an optional property will result in a compiler error unless undefined is explicitly added to the type union.
  • Readonly Properties (readonly): Prevents reassignment of a property after its initial creation.
interface Configuration {
  readonly environment: string;
  retries?: number;
  timeout?: number | undefined; // Required if assigning undefined under exactOptionalPropertyTypes
}

​
Generics

Interfaces can declare type parameters to create parameterized, reusable structural contracts. These type parameters act as placeholders for specific types that are provided when the interface is referenced, allowing the structural shape to adapt dynamically to the provided type arguments. 
interface ApiResponse<T> {
  data: T;
  status: number;
  timestamp: string;
}

​
Index Signatures

When the exact property names are unknown but the shape of the keys and values is consistent, interfaces utilize index signatures to define dynamic property types. 
interface EnvironmentVariables {
  [key: string]: string | undefined;
}

​
Call Signatures

Interfaces can describe standalone functions rather than objects with properties. This is achieved by defining a call signature, which omits the property name and directly specifies the parameter list and return type. 
interface RequestHandler {
  (url: string, payload: object): Promise<ApiResponse<any>>;
}

​
Inheritance (extends)

Interfaces support multiple inheritance via the extends keyword. This allows an interface to copy members from one or more base interfaces into a new, combined structural contract. 
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface SoftDeletable {
  deletedAt: Date | null;
}

interface DatabaseRecord extends Timestamped, SoftDeletable {
  id: string;
}

​
Class Implementation (implements)

Interfaces enforce structural contracts on classes using the implements keyword. When a class implements an interface, the TypeScript compiler verifies that the class instance contains all required properties and methods defined by the interface, ensuring the class adheres to the specified shape. 
interface Logger {
  level: string;
  log(message: string): void;
}

class ConsoleLogger implements Logger {
  level: string;

  constructor(level: string) {
    this.level = level;
  }

  log(message: string): void {
    console.log(`[${this.level}] ${message}`);
  }
}

​
Declaration Merging

A defining technical characteristic of interfaces is “declaration merging.” If multiple interfaces with the same identifier are declared within the same scope, the TypeScript compiler automatically merges their members into a single interface definition. 
interface GlobalConfig {
  theme: string;
}

interface GlobalConfig {
  plugins: string[];
}

// The compiler resolves GlobalConfig as:
// {
//   theme: string;
//   plugins: string[];
// }
Master TypeScript with Deep Grasping Methodology!Learn More