인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.
코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)
타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자.
타입스크립트 (Typescript)
매개변수를 구조분해할때 타입 작성 방법
// (X)
function test({ a: boolean, b: number}){
//....
}
// (O)
fuction test({ a, b }: { a: boolean, b: number}){
//....
}뒤에 별도로 써야 에러가 나지 않는다.
아래와 같이 쓸 수 있다.
// 호출할때 객체로 인자값을 전달하고
connectCardDOM({ data: player.data, DOM : player.hero, hero: true});
// 구조분해를 이용해 인자를 이렇게 처리한다.
function connectCardDOM({ data, DOM, hero = false }: { data: Card, DOM: HTMLDivElement, hero: boolean}){
//...
}만약 너무 길다 싶을때에는 인터페이스로 분리하는 방법이 있다.
개인적인 견해라고 말했지만 인터페이스는 보통 객체를 만들때 사용한다고 한다.
interface A{
data: Card,
DOM: HTMLDivElement,
hero: boolean
}
// 인터페이스 A를 타입으로 선언해준다.
function connectCardDOM({ data, DOM, hero = false }: A){
//...
}
타입가드
넓은 타입을 좁은 타입으로 좁혀 사용할 수 있다.
아래 예제는 Animal을 implements한 cat과 dog 클래스에서 더 좁은 타입으로 만들기 위해 isCat을 선언한 것을 확인할 수 있다.
true일 경우 data는 cat이 된다.
class dog implements Animal{
public a: number;
}
class cat implements Animal{
public a: number;
// b는 cat 만있음
pibloc b: string;
}
// cat에는 b가 있어서 cat일 경우 true가 리턴 됨.
// return true일 경우 data is Cat이 된다.
// 이것을 타입 가드라고 한다.
function isCat(data: Animal): data is Cat{
if(data.b){
return true;
}else{
return false;
}
}Animal이라는 큰 클래스가 있다면 그 안에서 cat과 dog를 구분할 수 있다.
예제는 물론 간단히 두개로만 나누었지만 함수가 커지게 된다면 각각의 경우에 대한
타입가드를 만드는 것이 좋다.
위에서 만든 isCat을 사용하는 예제를 보겠다.
class dog implements Animal{
public a: number;
}
class cat implements Animal{
public a: number;
pibloc b: string;
}
function isCat(data: Animal): data is Cat{
if(data.b){
return true;
}else{
return false;
}
}
// 이런식으로 사용한다.
btn.addEventListener('click', () => {
// isCat 타입 가드로 data의 타입을 리턴받는다.
if(isCat(data) && 다른 조건을 추가해줘야 안전){
//....
}
});
TIP
코딩 스타일
함수 호출할 때 인자 값을 객체로 넣는다면 이점이 뭘까?
test(true, 5);
// true와 5가 무엇인지 가독성이 높아졌다.
test({ start: true, max: 5});보통 함수 정의부에서 확인을 해야하는 데 호출하는 부분만 봐도 알 수 있다.
인자가 한 없이 늘어났다면 더욱 효과적이다.
test({ start: true, puzzle: true, max: 5, currentIndex : 0 });하지만 이건 개인적인 부분이라고 한다.