[TS] 타입스크립트 시작하기

mokyoungg·2021년 3월 24일

ts typescript 타입스크립트

타입스크립트 공부

목록 보기

2/10

타입스크립트 설치하기(윈도우)

Node.js 설치

타입스크립트를 설치하기 이전에 Node.js를 설치해야 한다.
https://nodejs.org/en/

Node.js를 설치하면 npm도 같이 설치되는데 설치 이후 정상적으로 설치되었는지 확인할 수 있다.

node -v

타입스크립트 설치

이후에 npm을 사용하여 타이스크립트를 설치한다.(yarn, pnpm도 가능)
https://www.typescriptlang.org/download

npm install typescript --save-dev (또는)
npm install -g typescript

마찬가지로 설치가 완료되었다면 정삭적으로 설치되었는지 확인할 수 있다.

tsc -v

타입스크립트 사용해보기

타입스크립트 변수에 타입 지정

타이스크립트에서 변수의 타입을 명시적으로 입력해야 한다.

let v1: number | string = 123
v1 = 'abc'

변수 이름 오른쪽에 콜론과 함꼐 타입을 선언한다.(number나 string 등)
변수 v1은 문자열도 포함하는 타입이므로 타입 에러가 발생하지 않는다.

타입스크립트를 자바스크립트로 트랜스파일링하기

타입스크립트 컴파일러(tsc)는 타입스크립 파일(.ts)를 자바스크립트 파일로 트랜스파일링한다.
컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다.
타입스크립트 컴파일러는 타입스크립트 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링이 보다 적절한 표현이다.
출처 : https://poiemaweb.com/typescript-introduction

자바스크립트로 트랜스파일링하는 이유는?

브라우저와 Node.js는 자바스크립트만 처리하기 때문에
타입스크립트 코드를 실행하거나 디버깅하기 전에 트랜스파일링을 해야한다.

tsc로 트랜스파일링 하기

tsc 타입스크립트파일명.ts

tsc로 타입스크립트 파일을 트랜스파일링 하면 새로운 자바스크립트 파일이 생성된다.
타입스크립트에서 작성했던 type 지정의 코드는 사라진 것을 볼 수 있다.
(만약 오류가 있었다면 터미널에서 오류가 나타난다.)

새로 생성된 using-ts.js 파일을 index.html에 사용하면 기대하는 결과를 얻을 수 있게 된다.
(문자열이 아닌 숫자로 계산함)

기억해야할 것(타입 스크립트의 역할)

바로 위에서 기대하는 결과를 얻을 수 있게 된다라고 적었지만...

타입스크립트는 컴파일하는 동안에만 도움이된다.
브라우저에는 타입스크립트가 내장되어 있지 않기 때문에 런타임시 다르게 작동하도록 자바 스크립트를 변경하지 않는다.

개발하는 동안 개발자를 돕는다. 런타임 코드는 변경되지 않는다.
기본적으로 컴파일을 차단하지 않는다. 그러나 개발자가 오류를 고칠 수 있도록 실수를 가리킨다.

즉, 컴파일(트랜스파일링)시 오류가 발생해도 이를 차단하지 않는다.
실제로 오류가 있어도 타입스크립트 파일은 자바스크립트 파일로 컴파일이 이루어지며 웹에서 동작한다.

타입스크립트는 단지 오류가 발생했다고 개발자에게 알려주는 것이다.