ch1. 타입스크립트를 사용하는 이유 (수정중)

본 포스트는 타입스크립트 공식홈페이지와 인프런 강의를 참고합니다.

본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/TypeScpt2021

CheoljongPaek/TypeScript2021

타입스크립트?

 

본 포스팅은 시작하기 전에 비쥬얼 스튜디오(VS Code)와 ESLint 플러그인 설치를 적극권장합니다.

 

 

배울 내용

1. 타입스크립트는 어떤 언어인가?
2. tsconfig.json을 통한 기본 설정

1. 타입스크립트는 어떤 언어인가?

 

공식홈페이지 메인에 표현한 한 문장은 아래와 같다.

By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.

TS는 자바스크립트의 기능에 타입을 지정하여, 코드를 실행하기 전에 에러를 찾고 수정 사항을 제공한다.

자바스크립트의 확장된 언어로, TS는 브라우저에 실행할 때 .js파일로 컴파일된다.

아래와 같이 JSDoc으로 자바스크립트에서 타입을 지정해 사용은 가능하지만 재활용성과 확장성이 저하된다.

// @ts-check

/**
 * @param {number} a 숫자에대한설명
 * @param {number} b 숫자에대한설명
 * @returns 
 */

function sum(a, b) {
  return a + b;
}

위의 JS코드를 index.ts 파일로 변경하면 아래와 같다.

function sum(a: number, b:number): number {
  return a + b;
}

우리는 .ts파일을 브라우저에 실행하기 위해, .ts파일을 브라우저가 인식할 수 있게 .js파일로 변경하는 컴파일이 필요하다.

npm과 node가 깔려있는지 확인한 후 터미널에 아래의 명령어를 입력한다.

npm i typescript -g

그리고 터미널에 'index.ts파일을 .js파일로 컴파일한다.'의 명령어 tsc index.ts 를 입력한다.

입력 후 새로 생성된 index.js 파일을 확일할 수 있다.

그 후 같은 디렉토리에 tsconfig.json 파일을 생성한다.

tsc 파일명.ts 를 매번 입력하는 과정은 생산성을 떨어뜨린다. 

필자는 'webpack' 모듈 번들러를 사용해 반복적인 일의 자동화를 추천한다.

차후에 React를 배울 예정이 있으면 여기서 (링크 예정) 웹팩의 기본을 익혀라.

 

2. tsconfig.json을 통한 기본 설정

 

tsconfig.json 파일은 컴파일을 위해 필요한 파일들과 컴파일러 옵션들을 설정한다.

tsconfig.json에 일단 다음과 같이 key: value 형태로 정의를 해보자.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  }
}

compilerOptions는 문자 그대로 컴파일을 할 때의 부가적인 옵션을 뜻한다.

1. allowJS : .js파일의 컴파일을 허용한다.
2. checkJS:  .js파일의 오류를 보고한다. allowJS와 함께 사용한다.
3. noImplicityAny: any 타입으로 암시한 표현식과 선언에 오류를 발생시킨다. 직접 any타입으로라도 지정해야만한다.

옵션들은 포스팅의 진행에 따라 추가될 것이고, 컴파일러 옵션에 대한 공식 핸드북은 여기서 확인한다.

마지막 타입스크립트 포스팅에 쓰이는 최종 tsconfig.json 파일은 아래와 같다.

 

(추가 예정)

 

 

👏이제 답할 수 있어야 하는 것들

하나, 자바스크립트와 타입스크립트의 차이점은?
둘, tsconfig.json의 역할은?