Interfaces

About TypeScript

TypeScript builds on JavaScript with a type system that helps catch mistakes before code runs. Its types are removed when producing JavaScript, so the result works in browsers and JavaScript runtimes.

• Large web applications
• Shared API types
• Developer tooling

Created by

Microsoft, with Anders Hejlsberg as a key designer

First released

2012 · first public release

Version / standard

TypeScript 7.0

Current stable release line. Your project may use an earlier compiler.

In the real world

• Microsoft: Visual Studio Code
• Slack: The Slack desktop application
• GitHub: GitHub Desktop

Facts checked 8 September 2026. Links open the sources; examples describe specific products or documented uses.

Syntax

interface Name {
  property: type;
}

Examples

interface Lesson {
  title: string;
  completed?: boolean;
}
const lesson: Lesson = { title: "Interfaces" };
console.log(lesson.title);

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

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  age: 25
};

function displayUser(user: User) {
  console.log(`${user.name} (${user.email})`);
}

displayUser(user);

interface Product {
  id: number;
  name: string;
  price: number;
  description?: string;  // Optional
  readonly category: string;  // Cannot be modified
}

const product: Product = {
  id: 101,
  name: "Laptop",
  price: 999.99,
  category: "Electronics"
};

// product.category = "Tech"; // Error: readonly property
console.log(product);

// Using optional property
if (product.description) {
  console.log(product.description);
}

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

interface Employee extends Person {
  employeeId: number;
  department: string;
  salary: number;
}

const employee: Employee = {
  name: "Bob",
  age: 30,
  employeeId: 12345,
  department: "Engineering",
  salary: 75000
};

// Multiple inheritance
interface Manager extends Employee, Person {
  teamSize: number;
  managerId: number;
}

console.log(employee);

interface MathOperation {
  (a: number, b: number): number;
}

const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

// Interface for object with methods
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
}

const calc: Calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};

Best practices

• Use interfaces for object shapes and type for unions/intersections
• Prefix interface names with "I" only if your team convention requires it
• Mark properties as readonly when they shouldn't be modified after creation
• Use optional properties (?) for truly optional fields
• Extend interfaces when creating specialized versions of base types
• Document interfaces with JSDoc comments for better IDE tooltips

At a glance

Purpose

Static types for JavaScript

File extension

.ts · .tsx

Runs in

Compiled to JavaScript

Usually used with

JavaScript and its ecosystem

In plain English

An interface describes the shape an object should have. TypeScript checks that shape before execution; the interface does not become a runtime validator.

What you’ll learn

• Describe an object shape.
• Mark an optional property.
• Separate type checking from runtime validation.

Before you start: Basic Types · Variables: var, let, const

Breaking down the syntax

interface

Names an object type.

property: type

Describes a member and its expected type.

?

Marks a property as optional.

How it works

Describe

List the expected members.

Check

The compiler compares values with the shape.

Execute

The resulting JavaScript runs without the interface declaration.

When should I use this?

Name object contracts shared by functions and components.

Common mistakes

A common trap

A required property must be present.

Incorrect

interface User { name: string }
const user: User = {};

Corrected

interface User { name: string }
const user: User = { name: "Ada" };

Compare approaches

• Interface: Object shapes that may be extended or declaration-merged.
• Type alias: Name a type, including a union or primitive.

Explore deeper

Runtime data still needs checking

Type annotations are erased. Validate untrusted API responses at runtime instead of relying on a type assertion.

Specifications & further reading

• Official language reference for this topic

Related TypeScript documentation