TS027. 타입스크립트에서의 클래스 선언 방식

타입스크립트에서의 클래스 선언

• 자바스크립트와 동일하다.
• 단, 타입스크립트에서 클래스를 이용할 때는 초기화 등을 실수로 까먹는 일을 방지할 수 있다.
  • 컴파일 타임에 에러를 통해 알려주기 때문이다.
• 만들어진 클래스는 당연히 타입으로 이용 가능하다.

class Person {
  name: string;
  age: number;

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

  hello() {
    return `안녕 내 이름은 ${this.name} 이고, 나이는 ${this.age} 살이야.`;
  }
}

const person: Person = new Person("Jake Seo", 10);

// 자바스크립트에서는 존재하지 않는 메서드를 실행해도 에러가 나지 않는데,
// 타입스크립트에서는 이런 부분들을 잘 짚어준다.
person.anyFunction(); // ERROR: property anyFunction does not exist.

Readonly 프로퍼티 이용하기

• 변화하면 안되는 프로퍼티에 readonly 를 부여할 수 있다.

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

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

  hello() {
    return `안녕 내 이름은 ${this.name} 이고, 나이는 ${this.age} 살이야.`;
  }
}

const person: Person = new Person("Jake Seo", 10);

// ERROR: Can not assign to read-only property.
person.name = "jack";

다양한 프로퍼티 초기화 방법

초기화 하지 않는 방법이 2가지 있고, 초기화하지 않아도 되는 프로퍼티를 생성하는 방법이 2가지 있다.

• 생성자 초기화
• 선언과 동시에 초기화
• Optional 로 초기화 하지 않아도 되는 프로퍼티 생성
• type of undefined 로 초기화 하지 않아도 되는 프로퍼티 생성

class Person {
  // 생성자 초기화
  name: string;
  // 선언과 동시에 초기화
  age: number = 33;
  // Optional: 초기화를 해도 되고 안 해도 됨
  nickname?: string;
  // type of undefined: 초기화를 해도 되고 안 해도 됨
  nationality: string | undefined;

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

! 기호를 이용해 초기화 됐음을 알려주기

• ! 기호는 특수한 상황에 쓰이는데, 타입스크립트가 초기화를 인식하지 못하는 곳에서 초기화가 일어나는 경우 사용자가 직접 타입스크립트 컴파일러에 초기화됐음을 알리는데 사용한다.
• 이를테면 constructor() 메서드가 아닌 다른 내부 메서드에서 초기화가 진행된다면 ! 기호가 유용하다.

class SeoPerson {
  name!: string;

  constructor(name: string) {
    this.initSeoPerson(name);
  }

  initSeoPerson(name: string) {
    this.name = name + " Seo";
  }

  hello() {
    return `안녕 내 이름은 ${this.name} 야.`;
  }
}

const seoPerson: SeoPerson = new SeoPerson("Jake");
console.log(seoPerson.hello());

타입과 값으로서의 클래스

• 클래스는 타입이 될 수도 있고 값이 될 수도 있다.
• 자바스크립트에서 클래스는 타입이 될 수 있는데 이 타입은 특정 시그니처의 객체라고 보면 된다.
  • 그래서 타입을 변경하지 않고 같은 시그니처의 객체로 재할당도 가능하다.

class Person {
  name: string;

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

  hello() {
    return `안녕. 난 ${this.name}.`;
  }
}

// 클래스이자 타입이 된다.
let person: Person = new Person("Jake Seo");

// 실제 자바스크립트에서는 객체와 클래스가 같기 때문에 시그니처만 같으면 객체로 재할당이 가능하다.
person = {
  name: "Jake Seo",
  hello() {
    return `안녕. 난 ${this.name}.`;
  },
};