TypeScript 적용하기

포스팅을 시작하기 전 저의 경우 회사내에서 앞으로 코드리뷰 과정을 진행하기 위해 기존 보기 힘들었던 자바스크립트 코드에 TypeScript를 적용하기로 했습니다.

기존 안드로이드 개발자라서 타입 명시를 할 수 없었던(?) 자바스크립트가 상당히 어색했는데, 이번 기회에 TypeScript를 바로 적용해보기로 했습니다.

TypeScript를 적용한 이유를 설명드리자면, 안드로이드 개발시 혼자 코드를 작성하더라도 타입명시를 꼭 하는 편입니다.

혼자 개발하는 경우에도 작성하다가 이 변수의 타입이 뭐였더라 찾는 경우가 많았습니다. 하물며 대규모 인원이 투입된 프로젝트라면... 더 심하겠죠. 그래서 적용해보기로 했습니다. ( 정말 쉽습니다. 해보세요! )

적용하기전에 TypeScript '너무 생소한데... 써도되나..?' '언제 없어질지 모르는데..' 생각이 들어서 검색해봤습니다.

아래 이미지는 2019.9.23 기준입니다.

TypeScript는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어입니다.

어플리케이션 규모가 커지면서 분업화되고, 모듈별 서로다른 팀에서 개발을 진행하다보면 자바스크립트가 불편한 경우가 많습니다.

( 실제로 명시되어 있는 타입이 아니다보니 작성한지 꾀나 오래된 코드의 경우 기대값과 다른 값들을 넣을때가 많았습니다. )

안드로이드 개발자 입장에서 TypeScript는 정말 당연한 것이었습니다. ( 당연한게 없이 개발하다니... 자스 개발자분들 존경을 표합니다. )

TypeScript는 JavaScript + 타입 끝!!

TypeScript를 설치하는 방법은 크게 두가지입니다.

1. NPM을 통해 (Node.js 패키지 매니저)

2. TypeScript의 Visual Studio 플러그인 설치

npm install -g -typescript 명령어를 통해 TypeScript를 설치합니다.

단지 확장자만 .ts 일뿐 코드는 완전 JavaScript입니다. 저는 test.ts 파일을 만들고 다음 코드를 작성했습니다.

function greeter(name : string){
  return 'Hello '+name
}

greeter(1)

작성하면서 보셨겠지만 greeter(1) 1아래에 빨간줄이 뜨는 것을 확인하실 수 있습니다.

드디어 자바스크립트에서도!!

function greeter(name : string) {
    return 'Hello ' + name;
}
greeter("seonoh");

위와 같은 코드를 test.ts 파일에 작성하고 tsc test.ts 명령어를 입력하면 test.js파일이 생기는 것을 확인할 수 있습니다.

엄코딩의 개발 일지