TypeScript override Keyword Guide

The override keyword explicitly marks methods that override base class methods. Here's how to use it safely.

Basic Usage#

class Animal {
  move() {
    console.log('Moving...');
  }

  speak() {
    console.log('Some sound');
  }
}

class Dog extends Animal {
  // Explicitly override base method
  override move() {
    console.log('Running on four legs');
  }

  override speak() {
    console.log('Woof!');
  }
}

// Error: Method does not override anything
class Cat extends Animal {
  override meow() { // Error!
    console.log('Meow');
  }
}

Enable noImplicitOverride#

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitOverride": true
  }
}

// With noImplicitOverride enabled
class Animal {
  move() {
    console.log('Moving');
  }
}

class Bird extends Animal {
  // Error: Must use override keyword
  move() {
    console.log('Flying');
  }

  // Correct
  override move() {
    console.log('Flying');
  }
}

Catching Refactoring Errors#

// Before refactoring
class BaseService {
  fetchData() {
    return [];
  }
}

class UserService extends BaseService {
  override fetchData() {
    return ['user1', 'user2'];
  }
}

// After refactoring - base method renamed
class BaseService {
  getData() { // Renamed
    return [];
  }
}

// TypeScript catches the error
class UserService extends BaseService {
  override fetchData() { // Error: Method does not override
    return ['user1', 'user2'];
  }
}

Abstract Methods#

abstract class Shape {
  abstract getArea(): number;
  abstract getPerimeter(): number;

  describe() {
    return `Area: ${this.getArea()}, Perimeter: ${this.getPerimeter()}`;
  }
}

class Rectangle extends Shape {
  constructor(
    private width: number,
    private height: number
  ) {
    super();
  }

  // Must implement abstract methods
  override getArea() {
    return this.width * this.height;
  }

  override getPerimeter() {
    return 2 * (this.width + this.height);
  }

  // Can also override non-abstract methods
  override describe() {
    return `Rectangle: ${super.describe()}`;
  }
}

Protected Methods#

class Component {
  protected render(): string {
    return '<div></div>';
  }

  protected onMount(): void {
    console.log('Mounted');
  }

  mount() {
    const html = this.render();
    document.body.innerHTML = html;
    this.onMount();
  }
}

class Button extends Component {
  constructor(private label: string) {
    super();
  }

  protected override render() {
    return `<button>${this.label}</button>`;
  }

  protected override onMount() {
    super.onMount();
    console.log('Button mounted');
  }
}

Accessors#

class User {
  private _name: string = '';

  get name() {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }
}

class Admin extends User {
  private _role: string = 'admin';

  // Override getter
  override get name() {
    return `[Admin] ${super.name}`;
  }

  // Override setter
  override set name(value: string) {
    // Add validation
    if (value.length < 2) {
      throw new Error('Name too short');
    }
    super.name = value;
  }
}

Constructor Patterns#

class BaseEntity {
  id: string;
  createdAt: Date;

  constructor() {
    this.id = generateId();
    this.createdAt = new Date();
  }

  protected initialize(): void {
    // Base initialization
  }
}

class User extends BaseEntity {
  email: string;

  constructor(email: string) {
    super();
    this.email = email;
    this.initialize();
  }

  protected override initialize() {
    super.initialize();
    // User-specific initialization
    console.log(`User ${this.email} created`);
  }
}

Multiple Inheritance Levels#

class Base {
  process(): void {
    console.log('Base process');
  }
}

class Middle extends Base {
  override process(): void {
    console.log('Middle process');
    super.process();
  }
}

class Derived extends Middle {
  override process(): void {
    console.log('Derived process');
    super.process();
  }
}

const d = new Derived();
d.process();
// Derived process
// Middle process
// Base process

With Mixins#

type Constructor<T = {}> = new (...args: any[]) => T;

// Mixin that adds logging
function Loggable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    log(message: string) {
      console.log(`[${this.constructor.name}] ${message}`);
    }
  };
}

class BaseService {
  fetch() {
    return 'data';
  }
}

class LoggableService extends Loggable(BaseService) {
  // Must use override when parent has the method
  override fetch() {
    this.log('Fetching data');
    return super.fetch();
  }
}

Generic Classes#

class Repository<T> {
  protected items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  getAll(): T[] {
    return [...this.items];
  }

  protected validate(item: T): boolean {
    return true;
  }
}

class UserRepository extends Repository<User> {
  override add(user: User): void {
    if (!this.validate(user)) {
      throw new Error('Invalid user');
    }
    super.add(user);
  }

  protected override validate(user: User): boolean {
    return user.email.includes('@');
  }

  // New method - no override needed
  findByEmail(email: string): User | undefined {
    return this.items.find((u) => u.email === email);
  }
}

Event Handlers#

class EventEmitter {
  protected handlers: Map<string, Function[]> = new Map();

  on(event: string, handler: Function): void {
    const handlers = this.handlers.get(event) || [];
    handlers.push(handler);
    this.handlers.set(event, handlers);
  }

  protected emit(event: string, data?: any): void {
    const handlers = this.handlers.get(event) || [];
    handlers.forEach((h) => h(data));
  }
}

class TypedEmitter<Events extends Record<string, any>> extends EventEmitter {
  override on<K extends keyof Events>(
    event: K,
    handler: (data: Events[K]) => void
  ): void {
    super.on(event as string, handler);
  }

  protected override emit<K extends keyof Events>(
    event: K,
    data?: Events[K]
  ): void {
    super.emit(event as string, data);
  }
}

// Usage
interface AppEvents {
  login: { userId: string };
  logout: void;
}

class AppEmitter extends TypedEmitter<AppEvents> {
  login(userId: string) {
    this.emit('login', { userId });
  }
}

Testing with Override#

class HttpClient {
  async get(url: string): Promise<any> {
    const response = await fetch(url);
    return response.json();
  }
}

// Mock for testing
class MockHttpClient extends HttpClient {
  private responses: Map<string, any> = new Map();

  setResponse(url: string, data: any) {
    this.responses.set(url, data);
  }

  override async get(url: string): Promise<any> {
    if (this.responses.has(url)) {
      return this.responses.get(url);
    }
    throw new Error(`No mock for ${url}`);
  }
}

// Test
const mockClient = new MockHttpClient();
mockClient.setResponse('/api/users', [{ id: 1 }]);
const users = await mockClient.get('/api/users');

Best Practices#

Usage:
✓ Enable noImplicitOverride
✓ Always use override when intended
✓ Call super when needed
✓ Match signature exactly

Benefits:
✓ Catches refactoring errors
✓ Documents intent clearly
✓ Prevents accidental overrides
✓ IDE support and autocomplete

Patterns:
✓ Template method pattern
✓ Hook methods
✓ Testing with mocks
✓ Framework extensions

Avoid:
✗ Overriding without super when needed
✗ Changing method semantics
✗ Deep inheritance hierarchies
✗ Overriding to do nothing

The override keyword makes method overriding explicit and catches errors when base methods are renamed or removed. Enable noImplicitOverride in your tsconfig for the best experience. Use it consistently when extending classes to maintain a clear inheritance hierarchy and prevent subtle bugs during refactoring.