2-3. 타입스크립트 확장

Mark64-1·2022년 1월 26일
0

JS

목록 보기
7/16
  1. type 통일 및 정리
type NewsFeed ={
	id:string;
    url:string;
    title: string;
    contents:string;
    comments:[];
    read?:boolean;
}
type NewsDetail ={
	id:string;
    url:string;
    title: string;
    contents:string;
    comments:[];
    level:number;
}

내가 듣고 정리하는 강의는 이것보다 더 속성이 많긴한데, 블로그에 원할하게 쓰기 위해서 이렇게 정리해봤다.
보면 id부터 comments까지는 동일한데, NewsFeed는 거기서 read값을 가지고 있고, NewsDetail은 거기서 level을 가지고있다.
(단, 강의에서는 실제로 상호 서로 다른값을 더 많이 가지고있다.)
그러면 이것을 어떻게 깔끔하게 정리할 수 있을까?

type News ={
	id:string;
    url:string;
    title: string;
    contents:string;
    comments:[];
}
type NewsFeed = News & {
    read?:boolean;
}
type NewsDetail = News & {
    level:number;
}

와!
한방에 거슬리는 중복 속성들이 깔끔하게 정리된것이다.

  1. func 정리
function getData(url){}

타입스크립트는 이렇게 생긴 함수를 매우 싫어한다.
이렇게 생긴 함수는 함수를 불러오는 쪽에서도 url에 뭘 줘야하는지 명확하지 않고 받는쪽에서도 뭘 받는지 명확하지 않기 때문이다.
url같은 string 형태는 그나마 괜찮은데, object형태이고 그 안에 접근해야하는 속성들이 있는 경우에는 더 심각하다.

function getData(url:string){}

그래서 보통 이런 형식으로 사용한다.
그러면 아까 얘기한 object형태로 가보자

 function getData(data:News){}

이러면 놀랍게도! getData안에서 News.id등이 자동으로 완성됀다.

  1. func Return값 정리
function getData(url){}

우리가 만약 이 함수를 실행했을때, 돌아오는 값도 형태가 명확하지 않으면 타입이 불명확해서 데이터가 불안해진다.
그럴땐 이렇게 리턴값을 확정할 수 있다.

function getData(url):string {
}

여기서 조금 더 추가하자면, 리턴값을 이것 or 이것도 가능하다.

function getData(url):NewsFeed[] | NewsDetail {
}

알리아스를 이용한 리턴값 확정식이다.

4.제네릭을 사용한 func 사용

상당히 어려운 문법이라고 한다.
제네릭은 언제나 상황값을 명확히 알고있어야한다.
입력이 N개의 유형일때, 출력도 N개의 유형으로 정의하는 것이다.
A가 들어오면 출력도 A, B로 들어오면 출력도 B인데 이렇게 표현한다.

function getData<AjaxResponse>(url:string): AjaxResponse{}

getData<NewsFeed[]>('url text');

이렇게 하면 반드시 NewsFeed로 받는것이다.
즉, 내가 넣어주는 입장으로 유연하게 응답값을 명확하게 유추하게 만들어준다.
AjaxResponse등의 알아듣기 쉬운 이름을 지어주는것도 매우 중요하다.
내가 호출할때마다 이것을 보고 유추해야하기 때문이다.

5.타입 명확한 유추

우리가 계산을 해야하는 상황에서 어떤값이 string으로도 들어올 수 있다는 가정을 해보자
1+1을 해야하는 상황에서 1+'안녕하세요' 가 된다면 '1안녕하세요' 가 됄것이고, 이것은 분명히 원하는 상황이 아닐것이다.
그래서 우리는 타입스크립트를 사용하고, string형을 사용한다.
그러면 만약 반대로 우리가 이것을 확신할 수 있을때 이것을 어떻게 뚫으면 됄까?

Number(1+1);
String('안녕하세요' + '반갑습니다');

이런식으로 확정하면 됀다.
즉, 내가 코드를 명확하게 이해하고 그 흐름을 안다면 타입 지정을 할때 거리낌이 없을테니, 내가 짜는 코드를 명확하게 이해하고 짜는것이 중요할 것 같다.

profile
개발자임미다.

0개의 댓글