해당 글은 한줄코딩 - 타입스크립트 공부의 일환으로 정리했습니다.
이번에 모임 내에서 타입스크립트를 하고 싶다는 분들이 많아져 타입스크립트 공부를 의도치않게(?) 공부하게 되었다.
예전에 한번 써본 적은 있는데, 처음에 잘 모르고 썼을 당시엔
'귀찮기나 하지 이런건 뭐하러 쓰는건지'
라고 푸념하며 1~2년 전 쯤에 공부를 했던 적이 있었는데,
그때 그 기억을 살리며 (하나도 기억 안나지만) 공부를 조금 해봤다.
타입스크립트는 모두가 알다시피, 자바스크립트 + Type 이다.
하지만 자바스크립트에 타입이 부여되었다는 건, String, string, number, object 같은 타입만 정의한게 아니다.
이번에 공식 문서를 보고나서 타입스크립트에 대해 한마디로 정의해보자면,
타입스크립트 코드 자체가 개발자가 다른 개발자에게 쓰는 매뉴얼 이라고 생각한다.
매뉴얼이라고 하면? 대체로 고객에게 상품에 대한 사용방법을 안내하기 위함인데,
마찬가지로 타입스크립트로 개발하면 개발자가 개발해놓은 코드를 다른 사람이 의도대로 사용하는 것이 가능해진다.
(여기에 주석까지 포함하면,, 코드를 파악하기가 더 쉬워질 것 같다.)
코드로써 가이드를 해주는 것과 동일하다.
//////////////////////////////////////////////////
// 01. never 타입을 함수 결과값으로 지정하세요.
//////////////////////////////////////////////////
function stringError(message: any): never {
throw new Error(typeof message + ": you can only 'string' type used.");
}
//////////////////////////////////////////////////
// 02. 엄격한 타입 검사를 위해 error() 함수를 사용해보세요.
//////////////////////////////////////////////////
function $(selector: string | number): HTMLElement | NodeList {
if (typeof selector === 'string') {
return document.querySelectorAll(selector);
}
stringError(selector);
}
let body = $('body');
let id = $(1988); // 오류 메시지가 출력 되어야 합니다.
해당 코드는 예시로 간단하게 작성해 보았다.
여기서 $() 는 type/jquery 의 패키지 인데 일단 무시하고
이렇듯, $() 함수에서 string 만 받게 할 수 있고, 그 의미인 즉슨 selector 는 string 타입만 오게 된다는 것이다.
타입스크립트는 문법상 잘못된 코드를 발견하면 에디터 상에서도 에러와 해결 방법을 쉽게 확인할 수 있다.
마냥 장점이 있느냐? 그건 아니다.
초기 개발자가 해야될 일들이 당연 많아진다. 그리고 코드를 작성하면서 자신의 의도가 조금 달라질 경우, 로직과 인터페이스가 둘 다 바뀌어야하는 순간이 있다. 그럼 그것과 연관된 코드 모두를 수정해야한다(!)
한 마디로 초기 설계가 굉장히 중요해진다~ 라고 보면 되겠다.
이 부분에 대해선 노하우가 아직 많지 않아 써보고 많이 다뤄봐야 알 것 같다..
다음엔 간단한 프로젝트를 하며 스터디를 할 예정이다. 🤣