> ## 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. # TypeScript Interface 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. ```typescript theme={"dark"} 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. ```typescript theme={"dark"} 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. ```typescript theme={"dark"} interface ApiResponse { 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. ```typescript theme={"dark"} 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. ```typescript theme={"dark"} interface RequestHandler { (url: string, payload: object): Promise>; } ``` ## 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. ```typescript theme={"dark"} 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. ```typescript theme={"dark"} 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. ```typescript theme={"dark"} interface GlobalConfig { theme: string; } interface GlobalConfig { plugins: string[]; } // The compiler resolves GlobalConfig as: // { // theme: string; // plugins: string[]; // } ```

Tired of Poor TypeScript Skills? Fix That With Deep Grasping! Learn More