Protected Field

A protected field in TypeScript is a class member access modifier that restricts the visibility and accessibility of a property or method strictly to the declaring class and any classes that derive from it (subclasses). It establishes a strict compile-time boundary that prevents external instance access while permitting internal inheritance chains.

class BaseClass {
    protected internalState: number;

    constructor(value: number) {
        this.internalState = value;
    }
}

class DerivedClass extends BaseClass {
    public mutateState(): void {
        // Valid: Accessing a protected member from within a derived class
        this.internalState += 1; 
    }
}

const instance = new DerivedClass(10);

// Compile-time Error: Property 'internalState' is protected and only accessible 
// within class 'BaseClass' and its subclasses.
instance.internalState; 

Technical Characteristics

Lexical Visibility Access to a protected field is validated entirely at compile-time by the TypeScript compiler. The field cannot be referenced on an instantiated object from an external scope. It is resolvable only within the class body of the declaring class or its descendants, subject to specific cross-instance rules.

Cross-Instance Access and Base Class Restrictions TypeScript permits cross-instance access of protected members, meaning a method can access the protected fields of another instance. However, a critical restriction applies within derived classes: a derived class can only access a protected member through an instance of its own type (or its subclasses). It cannot access the protected member through a reference typed explicitly as the base class.

class Base {
    protected value: string;

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

class Derived extends Base {
    public compare(otherDerived: Derived, baseRef: Base): boolean {
        // Valid: Accessing protected field on another instance of the derived class
        if (this.value === otherDerived.value) {
            return true;
        }

        // Compile-time Error: Property 'value' is protected and only accessible 
        // through an instance of class 'Derived'. This is an instance of class 'Base'.
        return this.value === baseRef.value;
    }
}

Compilation Erasure The protected modifier is a TypeScript-specific type-level construct. It does not emit any runtime enforcement mechanisms (such as JavaScript # private fields). During transpilation, the protected keyword is stripped, and the field is emitted as a standard, publicly accessible JavaScript property.

Protected Constructors When the protected modifier is applied to a class constructor, it alters the instantiation rules of the class. The class cannot be instantiated directly using the new keyword from an external scope, but it can still be extended by derived classes.

class NonInstantiableBase {
    protected constructor() {}
}

class ValidDerived extends NonInstantiableBase {
    constructor() {
        super(); // Valid: Subclass can invoke the protected constructor
    }
}

// Compile-time Error: Constructor of class 'NonInstantiableBase' is protected...
const base = new NonInstantiableBase(); 

Master TypeScript with Deep Grasping Methodology!

Learn More