[TypeScript] TypeScript 사용하기

---

 

#1. TypeScript 사용하기

1. TypeScript의 개념

1) TypeScript란?

• 기존 자바스크립트는 동적언어로 자바나 기타 언어들처럼 변수나 함수를 선언할 때 타입을 따로 지정하지 않고, 변수에 값을 대입시 타입이 지정된다. (런타임에 타입이 결정)
  • 또, Dynamic Typing을 제공하여 5 - "2"를 출력하면 "2"를 숫자로 인식해 3이 출력된다.
  • 이러한 자바스크립트는 자유도와 유연성이 좋아 작은 프로젝트할 때는 좋다.
• 하지만 크기가 큰 프로젝트에서는 자바스크립트의 자유도와 유연성이 큰 오류를 발생시킬 가능성이 높아 타입스크립트를 사용하여 변수 선언 시 타입을 지정한다.
  • 즉, 자바스크립트에 타입을 부여하여, 타입으로 인한 코드가 오류를 발생시킬 가능성을 최소한으로 낮춰주는 확장 버전이다.
  • 에러메세지도 자세하게 나와서 코드 에디터 부가 기능으로서의 역할도 한다.

 

2) 장점

• 타입스크립트는 자바스크립트의 상위 호환으로 자바스크립트를 사용할 줄 안다면 쉽게 접근할 수 있다.
• 본래 취지에 맞게 기존 자바스크립트의 타입으로 인한 오류를 최소한으로 낮춰준다.
• 타입스크립트를 컴파일하여 es5 보다 낮은 버전으로도 컴파일이 가능하다.
• 정적 타입을 지원하여 컴파일 단계에서 오류를 발견할 수 있다.

 

3) 단점

• 타입스크립트는 독자적인 언어가 아니기 때문에 자바스크립트로 변환하여 사용해야 한다.
  • 이로 인해 초기 세팅 시 설치해야 하는 모듈 및 옵션 설정들이 존재한다.
• 자바스크립트에서 생기는 오류를 피할 수 없다. (자바스크립트의 상위 호환이지만 원초적인 에러까지는 해결하지 못한다)
• 적응하는데 시간이 필요하다.
  • 기존 자바스크립트의 자유도 높은 코딩에 익숙해져 있다면 타입을 지정한다는 것은 불편한 일이다.

 

2. 개발환경 구축

앞서 말했듯이 타입스크립트는 독자적인 언어가 아니기 때문에 브라우저에서 동작하지 않는다.

따라서 컴파일러를 이용해 자바스크립트 파일로 변환해서 사용해야 한다.

1) Node.js 설치

• 타입스크립트에 대해 관심이 생기거나 공부를 시작했다면 Node.js는 당연히 설치되어 있을 것이다.

(생략)

 

2) TypeScript 설치

$ npm install -g typescript

• npm을 통해 타입스크립트를 전역에 설치해준다.
• "-g" 는 global의 약자로 전역을 뜻한다.

 

$ tsc -v

Version 4.8.4

• 설치가 완료되면 제대로 설치되었는지 확인해준다. (tsc -v 명령어 실행)
• 작성일 기준 4.8.4 버전이 설치되어있다.

 

※ 에러가 발생한다면?

에러 예시

에러가 발생하는 이유는 여러가지가 있겠지만,

앞에 sudo 를 붙여서 명령어 실행하면 웬만한건 해결된다.

$ sudo npm install -g typescript

 

3) 프로젝트 생성

$ tsc -init

• 타입스크립트를 사용할 디렉토리에서 위의 명령어를 실행해 준다.

 

위의 명령어를 실행하면 tsconfig.json이라는 파일이 생성된다.

tscconfing.json 파일

• 위의 명령어를 실행하면 tsconfig.json이라는 파일이 생기는데, 타입스크립트를 설정하는 파일이다.

{
  "compilerOptions": {
    "target": "es5",       // ECMAScript 버전 지정 : 'es3' (default), 'es5'등
    "module": "commonjs",  // 모듈 코드 생성 지정 : 'none', 'commonjs', 'amd'등
    "sourceMap": true,     // '.map' 소스맵 파일 생성 (난독화한 코드 다시 복구) 
    "outDir": "dist",      // 출력 결과 저장 장소 지정.
    "strict": true,        // 엄격한 유형 검사 옵션 활성화.
  }
}

• 타입스크립트에서 제공하는 많은 기능 설정 중에 대표적인 몇 가지 정리해 보았다.
• 여기에 적용된 설정은 타입스크립트에서 자바스크립트로 컴파일 될 때 사용된다.

 

4) 자동으로 컴파일 시키기

$ tsc -w

• 타입스크립트를 변경해서 저장할 때 마다 자동으로 컴파일 시켜준다.

위의 명령어를 입력하면 .js 파일이 생성된 것을 볼 수 있다.

 

 

이제 초기 세팅은 끝났다.

.ts 파일에 타입스크립트 코드를 작성해주면 된다.