[TypeScript] 타입스크립트의 클래스

타입스크립트의 클래스

타입스크립트에서도 똑같이 클래스를 만들기 전 객체를 만들어보자.

const employee = {
  name: 'summermong',
  age: 27,
  position: 'developer',
  work() {
    console.log('일함');
  },
};

• 이런 객체를 찍어낼 클래스 Employee를 만든다.

class Employee {
  // 필드
  name: string;
  age: number;
  position: string;

  // 생성자
  constructor(name: string, age: number, position: string) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  // 메서드
  work() {
    console.log('일함');
  }
}

• 강의에서는 필드의 타입을 지정하고, 초기값을 명시하지 않으면 에러가 발생했는데 내 코드에는 에러가 발생하지 않았다;
• 원래는 name: string = ''; 이런 식으로 빈 초기값을 작성해줘야 한다고 한다.
• 필드의 타입을 정의하지 않으면 함수 매개변수와 동일하게 암시적으로 any라고 추론하는데, noImplicitAny: false를 하면 된다.
• 다만 이렇게 any로 추론하게 둘거면 TS를 쓰는 의의가 없어지므로 타입을 되도록 설정하도록 하자.

const employeeB = new Employee('summermong', 27, '개발자');
console.log(employeeB);

// Employee { name: 'summermong', age: 27, position: '개발자' }

• 클래스대로 잘 찍히는 것을 볼 수 있다.

---

클래스도 타입이다

• TS에서 클래스는 타입으로 사용된다.
• 위에서 작성한 employeeB에 커서를 가져다 대면 타입이 Employee로 변한 것을 확인할 수 있다.
• 실제로 아래와 같이 employeeC의 타입을 Employee로 설정할 수 있다.

const employeeC: Employee = {
  name: '',
  age: 0,
  position: '',
  work() {},
};

---

상속

• JS와 동일하게 클래스 상속을 할 수 있다.

class ExecutiveOfficer extends Employee {
  // 필드
  officeNumber: number;

  // 생성자
  constructor(
    name: string,
    age: number,
    position: string,
    officeNumber: number
  ) {
    super(name, age, position);

    this.officeNumber = officeNumber;
  }
}

• 반드시 super 메서드를 호출해 슈퍼 클래스의 생성자를 호출해야 한다.
• 호출 위치는 생성자의 최상단이어야 한다.

 

---

 

 **출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)