Protected Method

A protected method in TypeScript is a class member restricted by an access modifier that limits its visibility and invocation exclusively to the declaring class and any derived classes (subclasses) within the inheritance hierarchy. Unlike public methods, it cannot be accessed externally via class instances, and unlike private methods, its accessibility propagates down the prototype chain.

class BaseClass {
    protected methodName(): void {
        // Method implementation
    }
}

Core Mechanics and Constraints

• Internal Access: The method can be invoked using the this or super keywords within the defining class and any class that extends it.
• External Restriction: Attempting to invoke a protected method on an instantiated object results in a ts(2445) compile-time error.
• Visibility Widening: When overriding a protected method in a derived class, TypeScript permits widening the access modifier to public. However, the compiler strictly prohibits narrowing the visibility to private.
• Cross-Instance Access: A class can access the protected methods of other instances of the same class type. However, a derived class cannot access protected members of a base class instance unless the reference is typed as the derived class.

Type System Impact The protected modifier introduces nominal typing behavior into TypeScript’s otherwise structural type system. Two classes with identical structural shapes are not type-compatible if their protected members do not originate from the exact same base declaration.

Compilation and Runtime Behavior The protected keyword is strictly a compile-time construct that is erased during transpilation. In the emitted JavaScript, the method behaves identically to a standard prototype method and is fully accessible at runtime. There is no ECMAScript runtime equivalent for protected encapsulation (unlike ECMAScript # identifiers, which enforce strict runtime privacy but cannot be inherited or combined with TypeScript access modifiers).

Syntax and Behavior Visualization

class Base {
    protected computeHash(): string {
        return "base_hash";
    }
}

class Derived extends Base {
    public execute(): void {
        // Valid: Accessing inherited protected method via 'this'
        const hash = this.computeHash(); 
    }

    // Valid: Overriding the method and widening visibility to 'public'
    public computeHash(): string {
        // Valid: Accessing base implementation via 'super'
        return super.computeHash() + "_derived"; 
    }
}

class InvalidDerived extends Base {
    // @ts-expect-error: Cannot narrow visibility from 'protected' to 'private'
    private computeHash(): string {
        return "invalid";
    }
}

const baseInstance = new Base();
// @ts-expect-error: Property 'computeHash' is protected and only accessible within class 'Base' and its subclasses.
baseInstance.computeHash(); 

const derivedInstance = new Derived();
derivedInstance.computeHash(); // Valid: Visibility was widened to 'public' in the Derived class.

Master TypeScript with Deep Grasping Methodology!

Learn More