TS)Class 와 Interface

타입스크립트에서 Class 타입지정과 Interface 타입지정에 대해 알아보겠습니다.

Class

JS와 TS는 약간의 차이가 존재합니다.

class Person { 
  constructor(name) {
    this.name = name // 자바스크립트는 동적필드추가 가능
  }
}

class Person { // 타입스크립트는 필드를 직접 정의해놓고 써야함
  name;
  age;
  constructor(name) {
    this.name = name
  }
}

let john = new Person('john');
let jack = new Person('jack');

TS에서는, 필드를 미리 지정해놓지 않으면 에러가 뜨죠.

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

타입지정은 이전에 공부했던것처럼 별게없습니다.
또한 생산자함수에는 타입지정을 하면 안됩니다!

주의할점은, 에러체크를 하고싶다면, 매개변수에 직접 타입을 지정해주어야합니다. 아래와 같은 경우를 보죠!

class Car {
  model:string
  price:number
  
  constructor(model,price) {
    this.model = model;
    this.price = price;
  }
}

new Car(44,33);  // 에러 안뜸!

매개변수로 number,number를 넘겨주고있지만, 생산자함수에서 필드에 대입될때 오류를 잡아주지 못하고있습니다.

아래는 연습 코드입니다
다양한 입력을 받아서 숫자와 문자를 따로 분리하여 배열에 저장하는 예제입니다.
arguments를 사용하는것도 좋겠죠

class Word{
  num: number[] = []
  str: string[] = []

  constructor(...array:(number|string)[]) {
    array.filter((ele)=>{
      if(typeof ele == 'string'){
        this.str.push(ele);
      }else {
        this.num.push(ele);
      }
    });
  }
  
}

console.log(new Word('kim',3,5,'park'));

---

Interface

interface Pallete {
  color: string,
  size:number
}

let bar:Pallete = {color:'black',size:200}

사용법이 Object type지정방식과 비슷합니다.

Interface 특징1

• extends가 가능하다.

interface Pallete extends Size {
  color: string, 
}
interface Size{
  size:number
}
let bar:Pallete = {color:'black',size:200}

위와같이, 각 각의 인터페이스를 extends 할 수 있습니다.
type alias를 다룰때, 비슷한 기능으로 & 연산자를 이용했는데요!
아래를 보시죠!

// type alias 를 사용했을 때
type Size = {
  size:number
}

type Pallete = Size & {color:string}

&는 교차연산자로, 결과적으로는 extends와 비슷한 기능을 하지만, 원리가 다릅니다.

Interface 특징2

• 중복 선언시, extends와 같은 동작을 합니다.

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}
// 위 코드는 아래와 같습니다.
interface Animal { 
  name :string, 
  legs:number
} 

그래서 Interface가 좋아요 type이 좋아요?

정말 엄격한 코딩을 하고 싶다면 type을 쓰는게 좋습니다.(중복선언시 에러로 알려줍니다! 하지만 인터페이스는 extends로 동작하죠)
하지만, 외부 라이브러리를 사용하여 어떤 변수들을 커스텀해야 될 때나, 나만의 변수를 추가하는 등 유연한 작업이 필요한 경우라면 Interface의 extends를 활용하는게 좋겠습니다!
경우에 따라서는 둘을 혼용하는것도 좋을 것 같네요