TypeScript에서 클래스 및 하위 클래스만 액세스할 수 있는 클래스 필드 또는 메서드를 만드는 방법은 무엇입니까?

Originally posted here!

클래스 필드 또는 메서드에 클래스 및 하위 클래스만 액세스할 수 있도록 하려면 TypeScript에서 클래스 필드 및 메서드를 작성하기 전에 키워드protected를 사용해야 합니다.

TL; DR

// a simple class
class Person {
  name: string;
  protected age: number; // <- this is a protected field

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 👇🏽 this is a protected method
  protected sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

// another class that extends the `Person` class
class Admin extends Person {
  department: string;

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  // get the fields from the
  // `Person` and `Admin` class
  // and log those values to the console
  showDetails() {
    console.log({
      name: this.name,
      age: this.age,
      department: this.department,
    });
  }
}

// create an instance of the `Admin` class
const john = new Admin("John Doe", 23, "Technical");

// try to access the protected field `age` and
// `sayGreeting` method of the `Person` class

// Error ❌. Property 'age' is protected and only
// accessible within class 'Person' and its subclasses.
console.log(john.age);

// Error ❌. Property 'sayGreeting' is protected and only
// accessible within class 'Person' and its subclasses.
john.sayGreeting();

예를 들어 Person 및 name라는 2개의 필드, age 및 constructor라는 메서드가 있는 sayGreeting라는 클래스가 있다고 가정해 보겠습니다.

// a simple class
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

현재 모든 fields 및 methods는 기본적으로 public이며 클래스의 인스턴스에서 액세스할 수 있습니다.

이제 age 필드와 sayGreeting 메서드에 Person 클래스와 그 하위 클래스만 액세스할 수 있도록 해 보겠습니다. 그렇게 하려면 protected 필드와 age 메서드 앞에 sayGreeting 키워드를 사용해야 합니다.

// a simple class
class Person {
  name: string;
  protected age: number; // <- this is a protected field

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 👇🏽 this is a protected method
  protected sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

필드와 메서드를 보호한 후 테스트하기 위해 Admin 클래스를 확장하는 Person라는 새 클래스를 만들어 보겠습니다.

클래스 확장에 대한 자세한 내용은 How to inherit properties and methods using class in JavaScript 블로그를 참조하십시오. 이것은 JavaScript ES6 클래스의 컨텍스트에서 작성되었지만 개념은 TypeScript에서 동일합니다.
Admin 클래스를 확장한 Person 클래스를 만들고 다음과 같이 showDetails라는 메서드를 추가해 보겠습니다.

// a simple class
class Person {
  name: string;
  protected age: number; // <- this is a protected field

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 👇🏽 this is a protected method
  protected sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

// another class that extends the `Person` class
class Admin extends Person {
  department: string;

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  showDetails() {
    // cool code here
  }
}

이제 Person 클래스의 모든 필드, 즉 name 및 age 필드와 Admin 클래스의 필드에 액세스하고 내용을 다음과 같이 콘솔에 기록합니다.

// a simple class
class Person {
  name: string;
  protected age: number; // <- this is a protected field

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 👇🏽 this is a protected method
  protected sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

// another class that extends the `Person` class
class Admin extends Person {
  department: string;

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  // get the fields from the
  // `Person` and `Admin` class
  // and log those values to the console
  showDetails() {
    console.log({
      name: this.name,
      age: this.age,
      department: this.department,
    });
  }
}

보시다시피 age 클래스의 Person 메서드에서 showDetails 클래스의 Admin 필드에 액세스했습니다. 이는 age 필드가 protected이고 Person 클래스의 하위 클래스에서 사용할 수 있기 때문입니다.

이제 Admin 클래스의 인스턴스를 만들고 다음과 같이 age 클래스의 보호된 sayGreeting 필드와 Person 메서드에 액세스해 봅시다.

// a simple class
class Person {
  name: string;
  protected age: number; // <- this is a protected field

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 👇🏽 this is a protected method
  protected sayGreeting() {
    console.log(`Hi, ${this.name}`);
  }
}

// another class that extends the `Person` class
class Admin extends Person {
  department: string;

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  // get the fields from the
  // `Person` and `Admin` class
  // and log those values to the console
  showDetails() {
    console.log({
      name: this.name,
      age: this.age,
      department: this.department,
    });
  }
}

// create an instance of the `Admin` class
const john = new Admin("John Doe", 23, "Technical");

// try to access the protected field `age` and
// `sayGreeting` method of the `Person` class

// Error ❌. Property 'age' is protected and only
// accessible within class 'Person' and its subclasses.
console.log(john.age);

// Error ❌. Property 'sayGreeting' is protected and only
// accessible within class 'Person' and its subclasses.
john.sayGreeting();

보시다시피 보호된 속성에 대한 액세스로 인해 클래스 또는 하위 클래스 내에서만 액세스할 수 있다는 오류가 발생했습니다.

우리는 성공적으로 클래스 필드와 메서드를 클래스와 하위 클래스에서만 액세스할 수 있도록 만들었습니다. 예이 🥳!

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.