[근육고양이] TypeScript 클래스

클래스는 객체를 만들어내기 위한 설계도이다.

 

타입스크립트의 기본적인 클래스 선언 방법이다.

 

클래스 사용

 

class MuscleCat{
  name: string
  muscleMass: number
  cute?: boolean
}
 
function Cat() {
  let normalCat01: MuscleCat = new MuscleCat()
  normalCat01.name = 'Mason', normalCat01.muscleMass = 30
 
  console.log(normalCat01) //MuscleCat {"muscleMass": 30,"name": "Mason",}
}

 

클래스 안에 필요한 속성들을 정의하여 준다. MuscleCat 클래스에 new 연산자를 적용해 normalCat01을 MuslceCat 타입으로 만들어준다. normalCat01은 name과 muscleMass 속성을 가지므로 9행처럼 작성할 수 있다.

 

class MuscleCat{
  name: string
  muscleMass: number
  cute?: boolean
 
  constructor(name: string, muscleMass: number, cute?: boolean){
    this.name = name, this.muscleMass = muscleMass, this.cute = cute
  }
}
 
function Cat() {
  let normalCat01: MuscleCat = new MuscleCat('Liam', 60)
  let normalCat02: MuscleCat = new MuscleCat('Noah', 40, true)
  let normalCat03: MuscleCat = new MuscleCat() //Expected 2-3 arguments, but got 0.
 
  console.log(normalCat01) //MuscleCat {"muscleMass": 100,"name": "Liam",}
  console.log(normalCat02) //MuscleCat {"cute": true,"muscleMass": 40,"name": "Noah",}
}

 

타입스크립트 클래스는 constructor라는 생성자를 사용할 수 있다. constructor를 사용하면 constructor에 인자로 받는 속성들의 초기값들을 넣어주어야 MuscleCat 타입으로 선언할 수 있다. 

 

생성자의 이해를 돕기 위해 콘솔창 내용과 함께 Cat함수를 만들었다.

 

인터페이스 사용

 

class MuscleCat implements ICat{
  //Class 'MuscleCat' incorrectly implements interface 'ICat'. 
  //Property 'age' is missing in type 'MuscleCat' but required in type 'ICat'.
  name: string
  muscleMass: number
  cute?: boolean
 
  constructor(name: string, muscleMass: number, cute?: boolean){
    this.name = name, this.muscleMass = muscleMass, this.cute = cute
  }
}

 

클래스는 implements를 사용하여 인터페이스를 구현할 수 있다. ICat인터페이스는 인터페이스 글에서 사용한 것을 그대로 사용하였다.

 

인터페이스는 일종의 규약이다. 따라서 ICat에 있는 age속성을 인터페이스를 구현한 MuscleCat에서 구현해주지 않는다면 2행과 3행에서 볼 수 있듯이 오류를 발생시킨다.

 

추상 클래스 사용

 

abstract class ACat {
  abstract name: string
  age?: number
  nickname?: string
 
  constructor(age?:number, nickname?:string){
    this.age = age, this.nickname = nickname;
  }
}
 
class MuscleCat extends ACat{
  name: string
  muscleMass: number
  cute?: boolean
 
  constructor(name: string, muscleMass: number, cute?: boolean, age?: number, nickname?: string){
    super(age, nickname)
    this.name = name, this.muscleMass = muscleMass, this.cute = cute
  }
}

 

다음은 abstract 클래스 추상 클래스이다. 추상 클래스는 상속을 위해 만들기 때문에 new 키워드를 사용하여 객체로 생성할 수 없다. 그리고 타입스크립트에서는 자식 클래스가 부모 클래스의 생성자를 super()를 통하여 호출할 수 있다.

 

위의 코드에서는 ACat 추상 클래스를 상속받고 age와 nickname 속성은 ACat 클래스의 생성자가 name, muscleMass, cute 속성은 MuscleCat 클래스의 생성자가 초기화를 해주는 구조로 만들었다.

 

function AbstractCat() {
  let abstractCat01: MuscleCat = new MuscleCat('Liam', 60, true, 20, '추상 고양이')
  let abstractCat02: MuscleCat = new MuscleCat('Fry', 50)
  let abstractCat03: ACat = new ACat(20, '추상2 고양이')
  //Cannot create an instance of an abstract class.
 
  console.log(abstractCat01);
  //MuscleCat {"age": 20,"cute": true,"muscleMass": 60,"name": "Liam","nickname": "추상 고양이",}
  console.log(abstractCat02);
  //MuscleCat {"age": undefined,"cute": undefined,"muscleMass": 50,"name": "Fry","nickname": undefined,}
}

 

위에서 설명했듯이 추상 클래스는 상속을 위해 만들어졌기 때문에 4행과 같은 코드는 오류를 발생시킨다.

 

abstractCat01에 name, muscleMass, cute, age nickname 속성을 모두 전달하면 8행의 주석처럼 모든 속성들이 정상적으로 초기화되는 것을 볼 수 있다.

 

abstractCat02에는 name, muslceMass 속성만을 전달하였고 MuscleCat과 ACat의 생성자의 선택 연산자가 정상적으로 작동하고 있다는 것을 확인할 수 있다.

 

이렇게 오늘은 타입스크립트의 클래스에 대해 알아보았다.