[TypeScript]타입스크립트 게터(getter), 세터(setter) 구현

기존 JavaScript에서는 클래스 개념이 존재하지 않았는데, ECMAScript 6을 시작으로 JavaScript에서도 클래스를 구현할 수 있습니다.

 

즉, JavaScript에서도 객체 지향 프로그래밍 패러다임을 사용하여 애플리케이션을 개발할 수 있습니다.

 

클래스의 멤버 변수를 접근하기 위해 멤버 변수에 public 접근자를 사용하여 객체명.멤버변수와 같이 접근할 수 있습니다. 하지만 멤버 변수의 접근자를 public으로 설정하면 정보은닉에 위반되므로 올바른 방법이 아닙니다.

 

멤버 변수의 정보은닉을 지키기 위해서는 접근자를 private로 설정하고 멤버 변수의 값을 호출하는 게터(getter)와 값을 설정하는 세터(setter)를 구현합니다.

 

이번 포스팅은 TypeScript에서 게터(getter)와 세터(setter)를 구현하는 방법을 정리하였습니다.

---

게터(getter)와 세터(setter)가 없는 경우

우선, 클래스에 게터(getter)와 세터(setter)가 없는 경우 문제점을 설명하도록 하겠습니다.

 

게터(getter)와 세터(setter)의 필요성을 알고 계신다면, 구현 방법으로 넘어가면 되겠습니다.

 

이름과 나이를 가지는 간단한 Person 클래스를 생성합니다.

class Person {
  public name: string;
  public age: number;
}

만약, 아래 사진처럼 경고가 발생하는 경우 생성자에 멤버 변수의 값을 할당하거나 tsconfig.json 파일을 수정해야 합니다.

컴파일 오류가 발생하는 이유는 프로퍼티에 초기값을 할당하지 않았기 때문입니다.

 

컴파일 오류를 해결하기 위한 방법은 3가지가 있습니다.

 

첫 번째 방법은 아래 코드처럼 생성자(constructor) 안에 멤버 변수의 값을 초기화합니다.

class Person {
  public name: string;
  public age: number;

  constructor() {
    this.name = '';
    this.age = 0;
  }
}

 

두 번째 방법은 멤버 번수 선언과 초기화를 동시에 합니다.

class Person {
  public name: string = '';
  public age: number = 0;
}

 

세 번째 방법은 tsconfig.json 파일의 "compilerOptions"에서 "strictPropertyInitialization": false를 추가합니다.

strictPropertyInitialization은 프로퍼티의 값이 초기화되었는지 안되었는지 체크하는 역할을 담당합니다.

 

본론으로 돌아와서 Person 클래스 작성 후 person 객체를 생성합니다.

let person = new Person();

age 프로퍼티는 도트( . ) 연산자로 접근할 수 있습니다.

person.age = 20;

만약, 값을 입력받아서 나이를 설정하는 코드를 작성한다고 가정합시다.

 

그리고 나이는 0~100살까지 설정 가능합니다.

if(입력값 > 0 && 입력값 < 100) {
  person.age = 입력값;
}

위 방식처럼 코드를 작성하면, age 프로퍼티에 값을 설정하는 코드는 항상 조건문을 작성해야 합니다.

 

게터(getter)와 세터(setter)를 사용하면, 이렇게 반복적인 작업을 피할 수 있으면서 프로퍼티에 대한 접근 및 설정을 제어할 수 있습니다.

반응형

---

TypeScript에서 게터(getter)와 세터(setter) 구현

멤버 변수는 게터(getter)와 세터(setter)에 의해서만 접근할 수 있으므로 접근자를 private로 설정합니다.

class Person {
  private _name: string;
  private _age: number;
  
  get age() {
    return this._age;
  }

  set age(theAge: number) {
    this._age = theAge;
  }
}

let person = new Person();
person.age = 20;

만약, 다음 사진처럼 컴파일 오류가 발생하면 tsconfig.json 파일을 수정합니다.

tsconfig.json 파일의 "compilerOptions"에서 "target": "es5"를 설정합니다.

 

본론으로 돌아와서 게터(getter)와 세터(setter)를 사용하여 age 프로퍼티를 접근할 수 있습니다.

 

게터(getter)와 세터(setter)를 사용하지 않는 경우와 동일하게 동작하지만, 게터(getter)와 세터(setter) 내부에 로직을 작성하여 반복적인 작업을 피할 수 있습니다.

class Person {
  private _name: string;
  private _age: number;

  get age() {
    return this._age;
  }

  set age(theAge: number) {
    if (theAge > 0 && theAge < 100) {
      this._age = theAge;
    } else {
      this._age = 0;
    }
  }
}

let person = new Person();

person.age = 1000;
console.log(`person.age : ${person.age}`);

실행 결과