[TIL] Typescript - type, interface

오늘 공부한것 & 기억하고 싶은 내용

객체의 모양을 알려주는 방법 2가지

type

• 사용자가 원하는 모든 것이 될 수 있다. 다양한 목적으로 사용될 수 있음
• string의 배열이 될 수도 있고, 객체가 될 수도 있다.
• interface 키워드에 비해 좀 더 활용할 수 있는게 많다.
• 같은 type 이름으로 여러개 못 만듦(이건 인터페이스가 나은듯)

type Team = "red" | "blue" | "yellow"
type Health = 1 | 5 | 10
type Player = {
	nickname:string,
  	team:Team
  	health: Health
}

----

type User = {
	name:string
}

type Player = User & {

}

const yeahapp : Player = {
	name: "yeahh"
}

interface

• 오직 한가지 용도만을 가지고 있다. (객체의 모양을 특정해주기 위함)
• 오로지 객체의 모양을 타입스크립트에게 설명해주기 위해서만 사용되는 키워드
• react.js를 이용해 작업을 할때 많이 사용할 것
• 인터페이스를 각각 만들어도 타입스크립트가 알아서 속성(Property)들을 ‘축적’시킬 수 있다.(합쳐줌)

interface Player {
	nickname:string,
  	team:Team
  	health: Health
}

----

interface User {
	name:string
}

interface Player extends User { // 클래스와 비슷 | 객체지향 프로그래밍처럼 보임~

}

const yeahapp : Player = {
	name: "yeahh"
}

둘은 거의 같지만 ... 짧고 간결하고 한번에 사용할 수 있는 interface가 좀 더 낫다는 의견이 많다.

배운점 & 느낀점

typescript의 type, interface는 리액트에서 보면 proptypes와 비슷한 기능이다.
미리 객체의 모양을 알려주고 있기 때문이다.
하지만 차이점이라고 한다면 타입스크립트 내에서 사용한 type과 interface는 타입스크립트가 실행되기 전에 확인을 해준다.
proptypes는 코드 실행 "후"에 브라우저에 에러가 나타난다.

여기서 타입스크립트의 장점이 드러나는거 같다.
자바스크립트는 콘솔창에 뜨기 때문에 런타임 오류?가 있기 때문에 사용자도 에러를 함께 확인하는데,
타입스크립트는 코드 실행 "전"에 에러가 나타나기 때문에 타입스크립트가 더 옳다(?)고 생각한다.

하지만 결론적으로 보면.... 타입스크립트 아직도 너무 어렵다.