안녕하세요, 오늘은 TypeScript 를 찍먹 해보려고 합니다. 예전에 개발자로서 처음 취직 준비를 할 당시에, 포트폴리오 준비 목적으로 ASP.NET Core, TypeScript 와 Angular 6 를 이용하여 웹 애플리케이션을 만드는 코스를 수강했던 적이 있습니다. 하지만 취직 후에 써 볼 기회가 없어서 모두 까먹었는데, 최근 인터뷰 제의를 받은 회사에서 인터뷰 도중 TypeScript 를 써 본 경험이 있냐는 질문을 받았습니다. 그래서 말이 나온 김에 예전 기억도 되살릴 겸 초심자의 마음가짐 (실제로도 초심자이지만) 으로 다시 한번 찍먹 + 부먹을 해보려고 합니다. 그럼 본격적으로 찍먹을 시작 해 보도록 하겠습니다. 앞으로 TypeScript 는 TS, JavaScript 는 JS 로 표기하겠습니다.
TypeScript 란 무엇인가?
TypeScript 는 JavaScript 를 기반으로 합니다. TS 로 쓰여진 코드를 TS 컴파일러를 통해 컴파일 해서 plain JS 파일로 변환하여 줍니다.
TS 는 기본적으로 JS 문법 (syntax) 을 사용하고, 거기에 타입을 정의하는 문법을 지원합니다. 만약 JS 로 짜여진 프로그램이 있다면, 그 프로그램은 TS 프로그램이라고 할 수 있습니다. 따라서, JS 에서 TS 로 migration 을 하기에 용이하다는 장점이 있습니다.
왜 TypeScript 를 사용할까?
버그 사전 방지로 인한 생산성 향상
TS 를 사용함에 따라, 우리는 버그를 runtime 이 아닌 compile 타임에 캐치할 수 있게 되고, 이는 생산성을 향상시켜 줄 수 있습니다. 프로그램은 컴파일을 마친 후에 실행이 되기 때문에, 앞선 과정에서 버그를 발견하면 수정하기에 더 용이하기 때문입니다. 일반적인 JS 코드는 이렇습니다.
function add(x, y) {
return x + y;
}위에 정의 된 펑션에 값을 넣었을 때, 보통의 경우 + 가 있으면 우리는 덧셈을 예상할 것입니다. 하지만 아래의 코드를 보시면
const result = add(input1.value, input2.value);
console.log(result);만약 input 의 값을 HTML input 엘레멘트에서 받았다고 가정 하였을 때, input1.value 가 10 이고 input2.value 가 20 이라고 한다면, 결과값은 30 대신 1020 이 될 것입니다. 그 이유는 input.value1 과 input.valu2 값이 모두 스트링 형태의 타입이기 때문입니다. 하지만 TS 의 경우 이렇게 펑션을 정의할 수 있습니다.
function add(x: number, y: number) {
return x + y;
}보시다시피 x, y 모두 넘버라는 타입으로 정의가 되었기 때문에, 만약 스트링 타입의 값이 이 펑션으로 전달 된다면, TS 컴파일러는 에러를 발생시킬 것입니다.
출시 예정인 JS 기능 지원
TS 는 현재의 JS 엔진에 대해 ES Next (ECMAScript Next) 에 예정 된 기능을 지원합니다. 무슨 말인가 하면, 웹 브라우저 혹은 다른 환경에서 완전히 지원하기 전에 새로운 JS 기능을 미리 사용해 볼 수 있음을 의미합니다.
이번 포스트에서는 TypeScript 가 무엇인가에 대하여 정말 간단하게 찍먹 해보았습니다. 예전 같았으면 대충 훑어보고 말았겠지만, 이번 기회를 통해 이왕 다시 시작 하는거 좀 제대로 부먹까지 해보려고 합니다. 앞으로가 기대 되네요 :) 그럼 이번 포스트는 여기서 마무리 짓도록 하고 다음 포스트로 찾아 뵙겠습니다. 그럼
