[타입스크립트] class의 getter와 setter

Rainbow🌈Coder 2022. 4. 18. 19:06

728x90

class User {
  firstName: string;
  lastName: string;
  fullName: string;
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`;
  }
}
let user = new User("Steve", "Jobs");
console.log(user.fullName); //Steve Jobs
console.log(user.firstName); //Steve
user.firstName = "Jimmy";
console.log(user.fullName); //Steve Jobs !!!
console.log(user.firstName); //Steve

user.fullName = "Pretty Jobs";
console.log(user.fullName); //Pretty Jobs
console.log(user.firstName); //Jimmy
console.log(user.lastName); //Jobs

풀네임은 생성자에서 한번 할당된 뒤로,

constructor로 firstName과 lastName을 통해 fullName이 설정된 뒤로 퍼스트네임 혹은 라스트네임의 개별 변경 진행하여도, 그에 따른 변경사항이 새로이 적용되지 않는다는 특징이 있다.(그 프로퍼티에 직접 접근하지 않는 이상,) 한번 할당되어도 그 상태로 계속 지정되어 있기 때문이다.

이럴 때 게터와 세터가 유용하다.

원본

class User {
  firstName: string;
  lastName: string;
  fullName: string;
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`;
  }
}

변경 후(멤버변수를 선언하고 바로 설정하지 말고,

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

위 코드를 추가하면

fullName은 string 타입이고,

fullName에 접근할 때마다 새로운 데이터를 만들고 개선할 수 있다.

fullName을 호출하면 호출한 시점에 firstName과 lastName을 결합할 수가 있다.

변경 포인트

  firstName: string;
  lastName: string;
  
  //fullName은 string 타입이고,
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

비록 함수의 형태지만, 함수가 아니라 기존 멤버 변수에 동일하게 접근하듯이 작성해주면 된다.

class User {
  firstName: string;
  lastName: string;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
let user = new User("Steve", "Jobs");
console.log(user.fullName); //Steve Jobs
console.log(user.firstName); //Steve
user.firstName = "Jimmy";
console.log(user.fullName); //Jimmy Jobs 😚😚😚
console.log(user.firstName); //Jimmy

이처럼 세터와 게터는 일반 멤버 변수처럼 사용할 수 있으며 어떠한 계산을 해야 할 때 유용하다.

그리고 타입스크립트에서는 클래스내 생성자 매개변수에 private를 써주는 것이 제일 간결하다.

  constructor(private firstName: string, private lastName: string) {
  }

이렇게

class User {
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  constructor(private firstName: string, private lastName: string) {
  }
}

constructor(private firstName: string, private lastName: string) {
}

이걸 보면,

private firstName: string를 보고 들어온 첫번째 인자가 자동으로 this.firstName으로 들어간 격이 되고

private lastName: string를 보곡 들어온 두번째 인자가 자동으로 this.lastName으로 들어간 격이 된다.

class User {
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  constructor(private firstName: string, private lastName: string) {
  }
}

위 코드와 아래 코드는 동일한 코드이다.

당연히 위 코드가 더 간결하다.

class User {
  private firstName: string;
  private lasName: string;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lasName = lastName;
  }
}

<추가 연습>

class User {
  private internalAge = 20;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  get age(): number {
    return this.internalAge;
  }
  set age(num: number) {
    this.internalAge = num;
  }
  constructor(private firstName: string, private lastName: string) {}
}

이렇게 하면 internalAge에는 접근할 수 없지만,

age를 통해서 접근할 수가 있게 된다.

class User {
  private internalAge = 20;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  get age(): number {
    return this.internalAge;
  }
  set age(num: number) {
    this.internalAge = num;
  }
  constructor(private firstName: string, private lastName: string) {}
}
let user = new User("Steve", "Jobs");
console.log(user.fullName); //Steve Jobs
console.log(user.age); //20
user.age = 9;
console.log(user.age); //9

심지어 전달된 값에 대한 유효성검사까지 할 수 있다.

class User {
  private internalAge = 20;
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  get age(): number {
    return this.internalAge;
  }
  set age(num: number) {
    if (num < 0) {
      throw Error("음수의 나이란 없어!");
    }
    this.internalAge = num;
  }
  constructor(private firstName: string, private lastName: string) {}
}
let user = new User("Steve", "Jobs");
console.log(user.fullName); //Steve Jobs
console.log(user.age); //20
user.age = 9;
console.log(user.age); //9
user.age = -9;
console.log(user.age);

<연습 결과>

  class User {
    private static cloth: boolean = true;
    private internalAge: number = 10;
    get age():number {
      return this.internalAge;
    }
    set age(newAge: number) {
      if (num < 0) {
      throw Error("음수의 나이란 없어!");
    }
      this.internalAge = newAge;
    }
    get fullName():string {
      return `${this.firstName}${this.lastName}`;
    }
    constructor(private firstName: string, private lastName: string) {}
  }
  let user1 = new User("홍", "길동");
  console.log(user1.fullName);//홍길동
  user1.age = 18;
  console.log(user1.age);//18

getter setter의 효용 : 다양한 연산 가능 + 유효성 검사 가능(나이에서 음수 거르기) + 심지어 새로운 데이터 만들어서 반환가능(fullName의 예시) 적절하게 클래스를 캡슐화하고자 하는 프로그래머를 도와주어 더 뛰어난 OOP 가능

728x90