TypeScript의 클래스에서 getter 메서드를 만드는 방법은 무엇입니까?

Originally posted here!

TypeScript의 class에서 getter 메서드를 만들려면 클래스에서 get 키워드 다음에 method definition을 사용할 수 있습니다.
getter 메서드는 특정 클래스 필드의 값에 액세스하는 데 사용됩니다. 대부분 값을 반환하기 전에 처리해야 할 작업이 있는 경우입니다.

TL; DR

// a simple class
class Car {
  _name: string;
  yearMade: number;

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

  // getter method for the `_name` class field
  get name() {
    return this._name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `name` like how we access a property
//  note that we are not invoking the
// `name` even thought it's a "method" 👇🏽
console.log(lexus.name); // Lexus ✅

예를 들어 문자열 유형을 갖는 Car이라는 2 fields과 name 유형을 갖는 yearMade 및 number이라는 클래스가 있다고 가정하고 클래스의 필드 값을 다음과 같이 초기화합니다.

// a simple class
class Car {
  name: string;
  yearMade: number;

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

이제 name 클래스 필드에 대한 getter 메서드를 만들어 보겠습니다. 이를 위해 먼저 name 연산자를 사용하여 this 필드 값을 반환하는 메서드를 생성하고 메서드에 키워드 get 접두사를 추가하여 시작할 수 있습니다. 예, 이것이 getter 메서드를 만들기 위해 해야 할 일의 전부입니다.

다음과 같이 할 수 있습니다.

// a simple class
class Car {
  name: string;
  yearMade: number;

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

  // getter method for the `name` class field
  get getName() {
    return this.name;
  }
}

이제 Car 클래스의 인스턴스를 생성하고 어떻게 작동하는지 살펴보겠습니다.

// a simple class
class Car {
  name: string;
  yearMade: number;

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

  // getter method for the `name` class field
  get getName() {
    return this.name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `getName` like how we access a property
//  note that we are not invoking the
// `getName` even thought it's a "method" 👇🏽
console.log(lexus.getName); // Lexus ✅

위의 코드를 자세히 살펴보면 객체의 일반 속성에 액세스하고 메서드임에도 불구하고 호출하지 않는 것과 같이 getName을 사용하고 있음을 알 수 있습니다. 모든 getter 메서드는 속성처럼 액세스할 수 있습니다.

네, 이것이 제가 말한 놀라운 일입니다. 쿨 맞아요🤩!

이제 getter 필드에 대해 name 메서드를 만드는 데 번거로운 이유가 무엇인지 생각할 수 있습니다. 클래스의 인스턴스에서 간단히 액세스할 수 있습니다.

하지만 private 필드라면 그렇게 할 수 없습니다. 다가오는 블로그에서 private 클래스 필드에 대해 더 자세히 논의할 것입니다.

주요한 큰 이유는 필드 자체에 액세스하기 전에 일부 논리를 실행하거나 일부 처리를 수행하는 것입니다.

이제 이름을 지정하기 위해 name 필드의 이름을 _name으로 바꾸고 getName getter 메서드의 이름을 개체의 속성으로 액세스하므로 name으로 바꾸겠습니다. 이러한 규칙을 따르는 것이 가장 좋습니다.

이렇게 할 수 있습니다.

// a simple class
class Car {
  _name: string;
  yearMade: number;

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

  // getter method for the `_name` class field
  get name() {
    return this._name;
  }
}

// create an instance of the `Car` class
const lexus = new Car("Lexus", 2022);

// cool part is that we can use
// `name` like how we access a property
//  note that we are not invoking the
// `name` even thought it's a "method" 👇🏽
console.log(lexus.name); // Lexus ✅

TypeScript에서 클래스 필드에 대한 getter 메서드를 성공적으로 생성했습니다. 예이 🥳!

위의 코드는 constructor 에 있습니다.

그게 다야 😃!

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