함수형을 사랑하는데 요즘 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 |
단숨에 배우는 타입스크립트 / 영진닷컴
타입스크립트 한글판 핸드북
