Typescript - 타입스크립트로 개발하기

 

 

[Typescript] 타입스크립트로 개발하기

 

 

 

Typescript 관련 글을 쓰면서 제일 먼저 써야될 '타입스크립트로 개발하는 방법'의 대해서 쓰지 않았었다. 뭔가 밥을 짓기 전 쌀을 씻지 않은 듯한 기분이 든다.

타입스크립트가 무엇인지, 어떻게 동작하는지, 또 타입스크립트를 사용할 때 무엇을 해야하는지 간략하게 쓰려고 한다.

 

What is Typescript

 

제일 처음 타입스크립트를 접했을 당시에 도대체 '타입스크립트가 뭐지?'라는 생각이 많이 들었다.

개인적으로 지금까지 개발을 하면서 타입스크립트가 어떤지의 대해 느낀건 딱 3가지다.

 

1. 타입스크립트는 자바스크립트의 변수나 class에 'Type'을 선언하면서 사용하는 것!
2. 기존 자바스크립트와는 달리 마치 Java를 사용하는 것 처럼 사용하는 것!
3. 굉장히 엄격한 Error 체크로 보다 명확하게 기능을 구현하면서 동시에 협업에 아주 유용한 것!

(Typescript 공식 홈페이지 발췌)

사실 Typescript의 정의는 개인이 내릴 수 있는게 아니라 역시 공식 홈페이지에 써있는 의미가 맞는것 같다...

 

Difference between TypeScript and JavaScript

 

자바스크립트와 타입스크립트의 가장 대표적인 차이로는 바로 '타입 시스템'의 유/무'라고 볼 수 있다.

//Javascript let a = 5 + []; console.log(a); // 결과 값 : "5" 

//Typescript let a = 5 + []; console.log(a); // 결과 값 : TS2365 Error 숫자와 배열 타입에 '+'를 적용할 수 없음. 

위 예를 들어보면 Javascript는 타입을 명시해주지 않아도 프로그램을 실행시키면 특정 데이터의 타입을 동적으로 바인딩을 하기 때문에 문자열을 그대로 return 하지만 Typescript에서는 정적 바인딩 방식으로 Type을 추론해 지정해 주긴 하지만 모든 타입을 알지 못할 때는 오류가 노출 되 'TS2365'라는 Error 코드가 return 된다.

또, 동작하는 방식 자체도 다르다.

웹 브라우저에서의 자바스크립트와 타입스크립트의 컴파일 및 실행 방식이 다르다.

 

(JS 실행 방식)

1. 자바스크립트 소스 → 자바스크립트 AST
2. AST → 바이트 코드
3. 런타임이 바이트 코드 평가

(TS 실행 방식)

1. 타입스크립트 소스 → 타입스크립트 AST
2. 타입 검사기가 AST를 확인
3. 타입스크립트 AST → 자바스크립트 소스

여기서도 타입스크립트의 가장 큰 이점은 자바스크립트 소스로 변환되기 전 '타입 검사기'가 타입을 확인해 주고 명백한 실수가 들어가지 않게 개발자가 만든 기능이 기대대로 실행하는 것을 돕는다.

 

결국엔 'Type을 활용 할 수 있냐 없냐'의 차이라는 것이다.

 

How to use Typescript

 

// Typescript 설치 npm install --save-dev typescript 

npm을 이용해 타입스크립트를 설치한다. (npm을 사용하려면 Node.js는 설치되어 있어야한다... 이건 너무 기본이라...)

그 후 Typescript로 작업을 할 디렉터리를 만들고 최상위 경로에 tsconfig.json을 만들어준다.

// Typescript tsconfig.json 생성 명령어 tsc --init 

tsconfig.json은 타입스크립트 프로젝트에서 어떤 파일을 컴파일하고 어떤 자바스크립트 버전으로 빌드하는지 등을 정의하는 역할을 한다.

 

(tsconfig.json의 기본적인 예와 설명)

 

이제 프로젝트 디렉터리 안에서 hello.ts 파일을 하나 생성 후 간단한 문법으로 동작 테스트를 해보면 알 수 있다.

 

결국 웹 브라우저에서 동작할 수 있는 코드는 '자바스크립트' 코드로 동작을 하기 때문에 타입스크립트는 자바스크립트로 변환 과정을 통해서만 웹 브라우저에서 동작을 한다. 그러기 위해서는 아래와 같은 자바스크립트 변환(컴파일) 명령어를 입력해 줘야한다.

tsc or tsc hello.ts 

 

(빌드 된 결과)

 

tsc는 타입스크립트를 자바스크립트로 변환하는(컴파일) 하는 명령어다. tsc라는 명령어 하나만 입력했을 때는 모든 ts파일을 js 파일로, tsc hello.ts 라고 입력하면 hello.ts파일 하나만 hello.js파일로 컴파일 해준다. 그 후 변환된 js 파일을 'node hello.js' 명령어로 실행시키면 정상적으로 동작하는 것을 알 수 있다.

 

이렇게 하면 기본적인 타입스크립트를 사용하기에 가장 첫 단계라고 할 수 있다.