[이펙티브 타입스크립트] 꽤나 똑똑한 타입스크립트, 더 똑똑하게 쓰기 - 타입구문의 중요성

(시작이자 끝) 타입스크립트 꼭 쓰세요

 

흔한 스타트업 취업 요구스택

 

 

타입스크립트 사용의 중요성은 프론트엔드 개발자라면 익히 들었을 것이다. 채용 공고만 봐도 알 수 있듯, 타입스크립트는 이제 선택이 아닌 필수 사항일 것이다. 이에 부트캠프를 수강하는 동안에도 혼자 열심히 타입스크립트를 공부했고, 그 덕에 타입스크립트에는 어느정도 익숙해 졌다.

 

하지만 뭐랄까.. 지금까지 탑다운 방식으로 프로덕트를 어찌저찌 만들어 내는데는 문제가 없어졌지만, 타입스크립트의 작동원리, 미처 알지 못했던 타입스크립트 사용 스킬 등에 관한 기초가 부족한 것 같다는 생각이 들게 되었고, 타입스크립트를 더 깊게 이해하기 위해 '이펙티브 타입스크립트' 라는 책을 구매해서 읽고 있다.

 

그 결과로 독후감(?)을 쓰면서 타입스크립트에 대한 이해를 높이고자한다

---

.js 를  .ts로 바꾸기만해도 오류를 찾아준다

(물론 타입스크립트를 트랜스파일 해주기위한 초기설정들은 해줘야한다)

const Cities = [
    {name:'Seoul', discription : 'capital city of korea'},
    {name:'Incheon', discription : 'where i live'},
    //...
    ]
console.log(Cities[0].description)
// 'capital city of korea' 를 기대했지만
// undefined 가 나왔다.

위 코드에서 문제를 쓱 보면서 문제를 알아차릴 수 있을까? 현명한 개발자라면 금방 문제를 알아 차릴 수 있을 것이다. 아니 사실 현명한 개발자라기 보다는 같은 실수를 몇번 해봤던 경험이 있는 개발자라면 알아 차릴 수 있을 것이다.

 

인적 오류 방지

const Cities = [
//descript 이 아닌 discripton으로 오타를 냈다.
    {name:'Seoul', discription : 'capital city of korea'},
    {name:'Incheon', discription : 'where i live'},
    //...
    ]
console.log(Cities[0].description)

// 'description' 속성이 ...형식에 없습니다
// 'ddiscription' 을 사용하겠습니까?

위와 같은 상황 개발생활을 하면서 한번은 겪어봤을 것이다. (단언컨데 한번은 있을것이다 무적권.. 없으면 댓글 주시면 영어 과외 받으러 갑니다)

개발을 시작한지 정말 얼마안됬을때 (첫 개인프로젝트 때) 위와같은 문제로 하루를 통째로 날려먹은 경험이 있다.

 

그렇다고 내가 영어와 담을 쌓고 산 것도 아니고, 호주 워킹홀리데이에 카투사 생활에 영어를 일상에서 쓴 기간이 3년은 되는데도 이런 오류를 낼 수 있다. (변명을 해보자면 둘다 한글로 읽을때는 디스크립션이다..)

 

타입스크립트는 위와 같은 오타를 내도 꽤나 똑똑하게 문제를 알려주고, 속성을 추천해주기 까지 한다. 이것이 바로 타입스크립트를 쓰는 이유라고 할 수 있을텐데,

타입구문 (description:string , name:string 과같이 타입을 명시하는 것) 을 쓰지 않더라도 타입스크립트는 오류를 찾아내서 개발자에게 알려준다.

 

위와 같은 오류를 해결해 줌으로써 개발자의 생산성을 끌어 올려줄 수 있다면 도입을 안할 이유가 없다고 생각한다.

---

그래도 허점은 있는법

const Cities = [
    {name:'Seoul', discription : 'capital city of korea'},
    {name:'Incheon', description : 'where i live'},
    //...
    ]
console.log(Cities[0].description)
// 아무 오류도 표시하지 않는다

똑똑한줄 알았던 타입스크립트도 사실은 그저 코드덩어리에 불과했던 것일까. 위와 같은 경우는 해결을 해 주지 못한다.

문제가 뭔지 알겠는가? Cities라는 배열에 name과 discription을 가진 객체와, description을 가진 객체 두가지 모두가 존재한다. 타입스크립트가 강력한 타입추론을 통해 오류를 잡아줬지만, 오타를 이렇게 딱 한군데만 내게된다면?

 

이거 디버깅하는데 하루 이상 걸릴수도 있겠다 싶다.

 

이런 상황을 방지하기 위해 명시적으로 Cities를 선언해 의도를 분명히 하는 것이 좋다.

---

타입스크립트의 꽃

명시적 타이핑

interface City{
    name:string
    description:string
}

const Cities:City[] = [
  {name:'Seoul', discription : 'capital city of korea'},
  {name:'Incheon', description : 'where i live'},
  //...
  ]
console.log(Cities[0].description)

 

위와 같이 Citiies 를 구성하는 객체의 타입을 명시적으로 지정해 준다면, 타입스크립트는 현명하게 개발자의 오류를 잡아 줄 것이고, 이로 인해 발생할 수 있는 개발생산성 저해를 막아 줄 것이다.

 

 

 

오류로 허비하는시간 vs 타입스크립트를 배우는데 쓰는 시간

---

타입스크립트 도입을 고민한다면?

타입스크립트의 도입을 선택하는 것은 자유이다. 위와 같이 타이핑을 도입해서 오류로 인해 허비하는 시간과, 타입스크립트를 익히고, 타입스크립트의 까다로운 타입검사를 통과하기위해 소모되는 시간중 무엇이 더 값진 것인지 프로젝트의 상황, 개발자의 판단에 따라 타입스크립트의 도입을 고려하면 된다.

 

개인적으로 요즘은 채용과제와 같이 비교적 프로젝트의 사이즈가 크지않고 다뤄야 하는 데이터가 한정되어 있으며 시간에 쫒기는 경우 (20분만에 뭔가 하나 만들어내는 그런 과제도 있다.) 는 타입을 만들고 명시하는 시간을 아껴 자바스크립트로 처리하고, 개인 프로젝트의 경우 무조건 타입스크립트를 사용한다.

 

해당 책 구매를 원한다면 좌측 링크를 클릭해서 구매할 수 있습니다. "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."