[TypeScript] TypeScript 맛보기

개발자들은, 특히 신입 개발자들은 회사에 입사하기 위해 자신의 능력을 증명해야 한다. 이때까지 해왔던 블로그 활동이든, 프로젝트든.. 많이 쓰이는 방법이 코딩 테스트이다.

최근 한 회사에 지원을 하게 되었고, 과제가 첨부된 메일이 도착했다. 과제는 TypeScript를 사용하여 짜여진 프로그램을 리팩토링 하는 것이었다. 친구의 추천으로 이름은 들어본 언어였다. 방학중에 해보자고 다짐만 했었던 TypeScript를 공부해서, 빠른 시일 내에 리팩토링까지 한 다음 제출해야 한다니.. 

당장 구글에서 TypeScript 강의를 검색하였고, 아래 두 개의 사이트를 찾아내었다.

 

https://ahnheejong.gitbook.io/ts-for-jsdev/

자바스크립트 개발자를 위한 타입스크립트

https://typescript-kr.github.io/

TypeScript 한글 문서

위 사이트들에서 우선 ECMAScript와 TypeScript의 기초 문법을 익혔다. 수업시간에 JavaScript를 다룬 적이 있어서, 읽고 이해하는데 많은 시간이 걸리지 않았다.

 

JavaScript(이하 Js)와 다르게 TypeScript(이하 Ts)는 이름 그대로 Type이 존재한다.

//Example

//JavaScript
const num = 1;

//TypeScript
const num: number = 1;

 

그럼 Type이 존재하면 뭐가 좋은가?

function sum(num1, num2) {
  return num1 + num2;
}

sum('x', 'y'); // 'xy'

위 코드는 Js문법상 아무 오류가 없다. 함수명이 sum이고 매개변수명이 num1, num2인 것으로 보아 위 함수의 역할은 덧셈일 것이다. 하지만 매개변수로 문자열을 주었다. 에러는 안 뜨지만 개발 의도와 맞지 않는 것이다. 의도와 다른 결과를 막기 위하여, 위 코드를 Ts로 작성해보자.

 

function sum(num1:number, num2:number):number {
  return num1 + num2;
}

sum(1, 2) // 3
sum('x', 'y'); // Type Error

매개변수의 이름 뒤에 'type'이 들어갔으며, 함수의 return type 또한 선언해 주었다. 이렇게 Ts를 사용한다면 의도와 다른 결과를 막을 수 있으며, 정적 언어인 Ts는 바로바로 type error를 보여준다.

 

짧은 기간이지만 TypeScript를 공부하면서 큰 매력을 느꼈다. 이때까지 웹 언어에 욕심은 있었지만, 왜인지 거부감이 들어서 하지 않았었다. 이번 기회에 웹에 대해 다시 생각해 볼 수 있었던 것 같다.