[오류대잔치] TS strictPropertyInitialization

객체지향에 대해 공부하다보니 캡슐화에 대한 강의가 있었다.

JavaScript 클래스는 멤버 변수를 숨길 수 없다. 그래서 개발자들은 멤버 변수 앞에 _를 붙여 클래스 내부의 변수를 숨긴 것 처럼 표시하겠다는 규칙을 만들었다. 하지만, JavaScript를 실행했을 때에는 클래스의 멤버 변수가 숨겨지지 않으니, Typescript로 확인해본다

라는 내용이었다.

class User {
  private name: string;
  private age: number;


  setName(name: string) { // Private 속성을 가진 name 변수의 값을 변경합니다.
    this.name = name;
  }
  getName() { // Private 속성을 가진 name 변수의 값을 조회합니다.
    return this.name;
  }
  setAge(age: number) { // Private 속성을 가진 age 변수의 값을 변경합니다.
    this.age = age;
  }
  getAge() { // Private 속성을 가진 age 변수의 값을 조회합니다.
    return this.age;
  }
}

const user = new User(); // user 인스턴스 생성
user.setName("이용우");
user.setAge(28);
console.log(user.getName()); // 이용우
console.log(user.getAge()); // 28

하지만 위의 코드를 실행해보니 아래와 같은 오류가 발생했다.

---

TypeScript 2.7부터, strictPropertyInitialization 설정이 도입되었기 때문이다. 이 설정은 strict 모드에서 기본적으로 활성화되며, 클래스 프로퍼티가 생성자에서 초기화되지 않았을 때 오류를 발생시킨다.

오류 메시지는 name과 age 프로퍼티가 클래스의 생성자 내에서 초기화되지 않았기 때문에 발생한다.

해결 방법은 다음과 같다:

1. 생성자에서 프로퍼티를 초기화하기.

class User {
  private name: string;
  private age: number;

  constructor() {
    this.name = "";
    this.age = 0;
  }
  
  // ... 나머지 코드
}

2. 프로퍼티에 기본 값을 할당하기.

class User {
  private name: string = "";
  private age: number = 0;

  // ... 나머지 코드
}

3. 프로퍼티에 undefined 또는 null 타입을 포함시키기.

class User {
  private name: string | undefined;
  private age: number | undefined;

  // ... 나머지 코드
}

나는 2번의 방식을 선택해서 오류를 해결했다.프로퍼티에 기본값을 할당하여 초기화를 해주니 코드가 정상적으로 실행되는 것을 확인할 수 있었다.

class User {
  private name: string;
  private age: number;

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


  setName(name: string) { // Private 속성을 가진 name 변수의 값을 변경합니다.
    this.name = name;
  }
  getName() { // Private 속성을 가진 name 변수의 값을 조회합니다.
    return this.name;
  }
  setAge(age: number) { // Private 속성을 가진 age 변수의 값을 변경합니다.
    this.age = age;
  }
  getAge() { // Private 속성을 가진 age 변수의 값을 조회합니다.
    return this.age;
  }
}

const user = new User(); // user 인스턴스 생성
user.setName("이용우");
user.setAge(28);
console.log(user.getName()); // 이용우
console.log(user.getAge()); // 28

처음엔 왜 실행이 안되는지 몰랐지만, JS class문법과 TS에 대해 공부하지 않아 생긴 문제였다. 백엔드 개발에 있어 TS 공부는 필수라고 생각하기 때문에 앞으로 TS공부도 꾸준히 해야할 것 같다.