> ## 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 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.
```typescript theme={"dark"}
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**
```typescript theme={"dark"}
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.
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
