console.log("Hello World");타입스크립트란?
타입스크립트는 2012년 마이크로소프트에서 발표한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어이다. 확장자로 .ts를 사용하며, 컴파일하여 사용하는 컴파일 언어이다. 다만 다른 컴파일 언어와는 달리 컴파일의 결과로 machine code를 출력하는 것이 아니라 컴파일의 결과물로 JavaScript 코드를 출력한다. 출력된 JavaScript 코드는 Node.Js로 실행된다.
타입스크립트는 Javascript에 정적 타입 문법을 추가하였으며 그로인해 높은 수준의 코드 탐색과 디버깅을 지원하고 Javascript 사용시 런타임에 잡압던 버그들을 컴파일 타임에 잡아낼 수 있게 되어 각광을 받게 되었다.
나는 어떻게 타입스크립트를 공부하게 되었나...
학생일 때 타입스크립트를 잠깐 접해본 적 있다. 그때는 자바스크립트를 많이 사용해본적도 없었고 타입스크립트를 사용하는 곳에 대해서도 알지 못했다. 졸업을 한 이후로 웹 프론트엔드 분야에 대해 html -> css -> javascript -> 리액트 순으로 공부하고 실습을 하면서 자바스크립트가 가지고 있는 단점인 타입이 없다는 점에 대해 공감을 하면서 다시금 typescript를 공부하게 되었다.
자바스크립트로 리액트 코드를 작성을 하면서 리덕스를 이용한 비동기 처리와 null 값 처리를 할 때, 타입이 없다는 것이 굉장히 힘들게 느껴졌다.
{
"name": "",
"age": 0,
"phoneNumber": ""
}만약에 비동기 처리를 통해 백엔드에서 해당 데이터를 json으로 받아왔다고 가정해보자.
자바스크립트 객체는 해당 객체를 아래와 같이 해석할 수 있다.
{
name:"",
age:"0",
phoneNumber:""
}또는
{
name:""
age:null,
phoneNumber:""
}으로 해석할 수 있다. 물론 이렇게 들어오는 경우는 잘 없을 것이다. 그러나 나는 프로젝트를 하면서 이 두가지 사례를 전부 봤다...
😱😱😱이것 말고도 javascript는 객체에 대한 명세가 제대로 되어있지 않아서 프론트엔드에서 리덕스를 다룰 때, 팀원 간의 객체에 대한 명세가 달라서 객체의 내용이 달라 객체가 제대로 맵핑이 되지 않거나 랜더링에 실패했을 때 사유가 제대로 뜨지 않는다는 문제점이 산재해 있었다.
위의 타입이 모호해서 발생하는 버그들과 객체에 대한 명세가 되어있지 않다는 점과 디버깅의 어려움 때문에 고통을 받고 타입과 인터페이스를 통해 객체를 관리하는 타입스크립트 도입 필요성을 느끼게 되었다.
