우리가 TS로 개발하게되면 생기는 장점은 타입 지정이라고 했다.
그러면 우리는 타입을 어떻게 지정해야하는지에 대해서 조금 더 공부가 필요할 것이다.
const container = document.getElementById('root');
const ajax = new XMLHttpRequest();이런 코드가 있다고 해보자.
그러면 getElementById() 함수는 과연 무엇을 반환할까?
HTMLElement 와 null을 가질 수 있다고 가정하는 것이다.
반환형이 기본적으로는 HTMLElement 를 반환하는것이지만, 만약에 없거나 문제가 있어서 반환이 불가능한 경우에는 null을 반환하는것이다.
비슷하게 XMLHttpRequest()는 XMLHttpRequest를 반환하는데, 이것은 무엇을 반환할지가 명확하게 지정해주기때문애 null이 필요가 없다.
const container: HTMLElement |
null = document.getElementById('root');
const ajax:XMLHttpRequest = new XMLHttpRequest();이런 형태의 타입 지정이 이루어지는것이다.
그러면 객체, Object의 타입은 복잡한데 어떻게 지정하면 되는걸까?
const Store = {
currentPage: 1,
feeds: [],
}2가지 형태의 방법이 존재한다.
1.타입 알리아스
type Store = {
currentPage: number,
feeds: NewsFeed,
}
type NewsFeed = {
id: number;
url: string;
read?: boolean;
}코드를 천천히 봐보자.
일단 Store는 숫자와 배열을 가질건데,
배열에서도 이 배열이 어떤 값을 가질지 명시할 수 있다.
이것이 Ts의 타입 선언이자 장점인데 가질 값들과 가지고 있을 수 있는 값들이 명확해서 개발하는사람의 실수를 줄이고 좀더 효율적으로 개발을 진행할 수 있게 해준다.
그러면 다 알겠는데,이건 뭘까?
read?: boolean;만약에 NewsFeed를 서버단에서 받는다고 생각해보자.
이것을 선언할때 내가 지금 다 읽어왔는지 (ISLoading)의 개념이 명확해야지만 페이지를 띄우는것은 프론트의 기본이다.
그런데 이것의 값이 있을지 없을지 확신할 수 없기때문에 처음에 명확하지 않은 값의 상태일땐 이것을 빈상태로 둘 수 있게 해주는것이 ? 의 역할이다.
-
타입 추론
타입스크립트가 상황을 보고 인지한 후 for문의 i 같은 경우에는 기본적으로 어느정도 타입을 유추하고 유론할 수 있다.
그래서 for에 사용한 i에 string형태를 집어넣으면 타입을 명시하지 않아도 타입을 추론해준다. -
타입 가드
const container: HTMLElement |
null = document.getElementById('root');
container.innerHTML = 'SomeThing'이러면 컨테이너에 빨간 밑줄이 그어진다
왜일까? HTMLElement일때는 문제가 없다가, null인 경우에는 그 속성이 없을 수 있어서 비는 속성에 접근하는 경우를 걸러내기 위해서 에러를 표시해주는것이다.
이것을 해결하는 가장 쉬운 방법은 null이 아닐때만 접근하는것이다.
if(cotainer!=null){
container.innerHTML = 'SomeThing';
}else{
console.error("container is Null");
}이런식으로 Null에 의도치 않게 접근하는 것들을 사전에 방지해주는것이다.참고로 축약 됀다.
if(container){}그러면 이걸 함수로 묶어보자.
function updateView(html){
if(cotainer!=null){
container.innerHTML = html;
}else{
console.error("container is Null");
}
}이런식으로 타입스크립트를 사용할 수 있다.
이제 다음에는 함수의 규격과 Interface 형태를 알아보자
