[TypeScript] 프로젝트를 위한 타입스크립트 초기 설정

▶프로젝트를 위한 타입스크립트 초기 설정

 

가장 먼저 node와 npm이 설치되어 있는지 확인해 줍니다.

$ node -v

$ npm -v

 

NodeJS를 설치하면 노드 패키지 관리자인 npm도 같이 설치되게 되는데요.

 

NPM(Node Packaged Modules)는 node.js에서 사용되는 모듈을 패키지로 모아둔 곳입니다.

필요한 모듈이 있다면 npm을 통해 간편하게 다운받을 수 있습니다.

 

🔎 TypeScript 설치

$ npm i typescript -g

 

🔎 간단하게 타입스크립트 컴파일러 사용해 보기

타입스크립트 컴파일러가 뭔데? 왜 쓰는건데?

 

💡컴파일(compile)?

일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정의 의미

 

브라우저에서 실행되던 자바스크립트는 컴파일이 필요없는 대표적인 인터프리터(interpreter)언어입니다.

브라우저나 node.js는 우리가 작성한 자바스크립트 코드를 있는 그대로 이해하고 바로 실행할 수 있기 떄문입니다.

 

하지만 우리가 타입스크립트 코드는 브라우저가 그대로 해석할 수가 없습니다..😓

따라서 개발 단계에서는 타입스크립트 코드로 작성하지만, 배포할 때는 반드시 코드를 자바스크립트로 변환해줘야 합니다.

 

이렇게 타입스크립트 코드를 자바스크립트 코드로 변환할 때 필요한 도구가 타입스크립트 컴파일러입니다!

 

📄index.ts 파일

function adding(a: number, b: number): number {
  return a + b;
}
adding(10, 20);

타입스크립트 코드를 tsc로 넘겨주기만 하면 해당 파일에 저장되어 있는 소스 코드가 자바스크립트로 변환됩니다.

$ tsc index.ts

컴파일의 결과물로 동일한 디렉토리에 파일 이름은 같지만, 확장자가 .js인 파일이 만들어질 것입니다.

 

📄index.js 파일

function adding(a, b) {
    return a + b;
}
adding(10, 20);

 

🔎 타입스크립트 컴파일러 설정 - tsconfig.json

해당 프로젝트에서 타입스크립트 파일을 컴파일할 때 옵션들을 설정할 수도 있습니다.

즉, 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능합니다.

 

tsconfig.json 파일 생성하기

프로젝트 폴더에 tsconfig.json 파일을 하나 생성해 줍니다.

tsconfig.json 파일 안에 내용 작성하기

이제 파일 안에는 세부설정 내용을 적어주면 되는데요. 다음과 같이요!

{
    "compilerOptions": { // 프로젝트 컴파일 옵션
        "allowJs": true, // 타입스크립트 파일 안에서 자바스크리븥 허용
        "checkJs": true, // @ts-check와 같은 기능
        "noImplicitAny": true, // 어떠한 타입이라도 지정해주어야 함
    }
}

더 많은 옵션들에 대한 설명은 타입스크립트 공식 홈페이지에 있습니다.

JavaScript With Syntax For Types.

홈페이지에 들어가 Tools를 클릭해 줍니다.

오른쪽 TSConfig Reference를 클릭해 줍니다.

다양한 내용을 볼 수 있습니다.