[typescript] interface, type, class 사이에서 방황하기

mingsomm·2022년 3월 6일
0

타입스크립트

목록 보기
1/2

함수형을 사랑하는데 요즘 class를 볼 일이 너무 많다.
class는 그렇다고 치고. 타입스크립트에서 처음보는 interface, type 이 놈들은 도대체 무엇일까 ..

custom type 지정하기

const Lion = {
  name: "로키",
  age: 10,
};

자바스크립트에서 이런 object가 있다.
이 코드를 타입스크립트에서 작성하려면 어떻게 작성해야 할까?

이런 식으로 타입을 지정해주게 될 것이다.
별 문제가 없어보인다.

const Person1 = {
  name: "김철수",
  age: 10,
  city : '서울',
  school: '철수고등학교',
  friends : ['감스트', '랄로', '유투버'],
  hobby : '축구',
  class : 2
};

const Person2 = {
  name: "하나둘",
  age: 12
};

이런 식으로 프로퍼티들이 많이 있는 객체 또한

const Person1 : {
  name: string,
  age: number,
  city : string,
  school: string,
  friends : string[],
  hobby : string,
  class : number
} = {
  name: "김철수",
  age: 10,
  city : '서울',
  school: '철수고등학교',
  friends : ['감스트', '랄로', '유투버'],
  hobby : '축구',
  class : 2
};

const Person2:{
  name: string,
  age: number
}= {
  name: "하나둘",
  age: 12
};

위와 같은 방식으로 타입을 선언하기엔 무리가 있어보인다.
일단 가독성이 많이 떨어지고 Person1과 Person2는 중복되는 프로퍼티값이 있음에도 하드코딩이 되어 있는 것을 볼 수 있다.

그 중복은 멈춰주시오 ..

1. type

위의 코드보다 훨씬 깔끔해진 것을 알 수 있 지 않나요?
Lion 의 name과 age의 프로퍼티 값이 어떤 타입인지 직관적으로 보입니다.
type을 이용하여 타입을 변수에 넣어둔 것처럼 사용할 수 있답니다 💪🏻

2. interface

interface 또한 type과 동일한 방식으로 변수에 넣어둔 것 처럼 사용할 수 있습니다.

✔ 그러면 type과 interface는 어떻게 선택적으로 사용해야할까?

보기엔 그놈이 그놈 같지만, 차이점이 존재합니다.
다시 위의 예제를 가져와보겠습니다.

공통된 부분 처리가 아주 까알끔 하다.
"extends" 를 이용해준다.
공통된 부분의 interface를 Person 으로 두고 , 나머지 부분의 interface는 person을 extends 해주면 끝이다!



그렇다면 ... type은 중복된 것들을 처리해줄 수 있는 방법이 없을까?

& 로 가볍게 해결해줄 수 있다.

똑같은거 아닐까?

🙅‍♀️ 중복선언에 대한 차이가 존재 !!!


interface는 이렇게 중복해도 extends 된 듯한 효과를 보여준다..!
type 은 불가능하니까 알아서 골라서 잘 사용하면 된다.

3. class

대망의 class다. javascript 를 베이스로 해뒀으니까 .. 모던 자바스크립트 책을 다시 열게 하는 타입스크립트의 calss 였다.
this고 super고 그게 싫어서 객체지향 언어를 도망쳐왔는데 또 다시 돌아오는 클래스..

클래스의 custom type 지정은 이렇게 해주면 된다. ⏤ 근데 이게 왜 custom type이라고 하는지 모르겠다 ... ⏤
클래스의 constructor 또한 기존 js보다 훨씬 명확하게 작성이 가능하다.

class Person {
  constructor(firstname: string, lastname: string) {}
}

const p = new Person("kim", "joomeock");

/ 타입스크립트로 작성된 constructor 의 type

class Person {
  constructor(firstname, lastname) {
  	this.firstname = firstname;
    this.lastname = lastname;
  }
}
const p = new Person("kim", "joomeock");

/ js로 작성된 contructor의 타입

상속 - extends

interface 에서 extends가 있던 것 처럼 class 또한 존재한다. ⏤ 원조는 class 일지두

상속은 흔히 부모와 자식이라고 명칭하는데, 부모의 유전자를 물려받았다고 생각하면 된다.

자식은 부모 유전자를 받아서 사용할 수 있고, 더 확장 시킬 수 있다 !

따라서 Animal 을 상속 받은 Snake 는 move 를 사용할 수 있다 .
부모 유전자에 담긴 type도 사용가능하니까 편하게 사용할 수 있다.

extends를 사용하는 class와 interface 차이두고 사용하기

그렇다면.. class와 interface의 차이는 무엇일까.
interface는 위에서도 언급했던 것처럼 변수처럼 사용할 수 있는 것이고, class는 하나의 틀을 만들고 계속 찍어내고 싶을 때 사용하면 굿이다.

public, private, protected

( 업데이트중 )


Reference |
단숨에 배우는 타입스크립트 / 영진닷컴
타입스크립트 한글판 핸드북

profile
프린이

0개의 댓글