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

Originally posted here!

클래스 필드나 메서드를 해당 클래스에서만 액세스할 수 있도록 하려면 TypeScript에서 클래스 필드와 메서드를 작성하기 전에 키워드private를 사용해야 합니다.

TL;DR

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

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

  // 👇🏽 this is a private method
  private 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;
  }

  // try to access the `age` private field
  // from the `Person` class
  showDetails() {
    // Error ❌. Property 'age' is private and
    // only accessible within class 'Person'.
    const age = this.age;
  }
}

예를 들어 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 클래스만 액세스할 수 있도록 해 보겠습니다. 그렇게 하려면 private 필드와 age 메서드 앞에 sayGreeting 키워드를 사용해야 합니다.

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

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

  // 👇🏽 this is a private method
  private 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;
  private age: number; // <- this is a private field

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

  // 👇🏽 this is a private method
  private 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
  }
}

이제 private 클래스의 age 메서드에서 showDetails 필드Admin에 다음과 같이 액세스해 보겠습니다.

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

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

  // 👇🏽 this is a private method
  private 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;
  }

  // try to access the `age` private field
  // from the `Person` class
  showDetails() {
    // Error ❌. Property 'age' is private and
    // only accessible within class 'Person'.
    const age = this.age;
  }
}

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

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

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

그게 다야 😃!

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