타입스크립트 사용하기 및 환경설정

이전에 타입스크립에 대한 세미나를 진행한 적이 있는데, 그 중 가장 기초적인 내용인 타입스크립트 설치 및 사용법과 개발 환경설정에 대한 내용을 공유하려고 합니다.

 

타입스크립트를 처음 사용해보시는 분들에게 도움이 될 거라 생각합니다. 😁

 

 

1. 타입스크립트 설치

타입스크립트 사용을 위해, 프로젝트 내에서 타입스크립트를 설치합니다. yarn이나 npm 명령어로 설치할 수 있습니다.

(저는 npm을 사용했습니다.)

이 때, tsc(컴파일러)도 같이 설치됩니다.

npm install typescript

 

타입스크립트를 컴파일 하기 위해서는 타입스크립트 프로젝트 초기 설정 파일인 tsconfig.json 파일이 필요합니다. 이를 생성하기 위해 아래의 명령어를 입력합니다. 프로젝트 루트 디렉토리에 tsconfig.json 파일이 생성됩니다.

tsc --init

단일 js 파일을 브라우저가 아닌 터미널에서 실행해 출력할 때처럼, 타입스크립트 파일을 컴파일을 거치지 않고 코드 실행을 해보기 위해서는 아래 명령어를 입력하여 ts-node를 설치해줍니다.

npm install ts-node

//코드파일 실행 시
npx ts-node src/index.ts

 

타입스크립트 컴파일 명령어는 `tsc` 입니다. 뒤에 파일명을 입력하지 않으면 현재 디렉토리에 있는 모든 ‘.ts’ 확장자 파일을 찾아 컴파일 합니다.

tsc index.ts

tsc index.ts -w => watch 옵셥을 주면 ts파일이 변경 될 때마다 자동으로 컴파일 합니다.

 

 

2. Webpack 사용 시 설정

webpack과 타입스크립트를 사용하는 경우 개발환경 세팅은 다음과 같이 할 수 있습니다. (webpack이 설치되었다는 것을 전제로 합니다.)
타입스크립트 설치는 위와 같지만, 웹팩고 함께 사용할때 ts-loader 를 함께 설치해주어야 합니다.

npm install ts-loader

ts-loader는 webpack에서 타입스크립트 파일을 처리하기 위한 도구입니다. 
ts-loader는 내부적으로 ‘tsc’를 사용하여 타입스크립트 파일이 컴파일 되게 하고 컴파일 된 자바스크립트와 그 외의 소스 코드들을 번들링 합니다.
빌드를 하지 않고 `npm start` 명령어를 실행하면 컴파일된 자바스크립트 파일을 실제로 저장하지 않고 개발 서버에서 코드를 실행할 수 있습니다. 

 webpack.config.js 에서 웹팩 설정도 변경해 줍니다. 아래 코드를 참고해 주세요.

module.exports = {
  entry: "./src/index.ts", // 번들링 시작 위치
  output: {
    path: path.join(__dirname, "/dist"), // 번들 결과물 위치
    filename: "bundle.js",
  },
  module: {
    rules: [
		 {
        test: /[\.js]$/, // .js 에 한하여 babel-loader를 이용하여 transpiling
        exclude: /node_module/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.ts$/, // .ts 에 한하여 ts-loader를 이용하여 컴파일
        exclude: /node_module/, //제외되는 파일
        use: {
          loader: "ts-loader",
        },
      },
    ],
  },
  resolve: {
    modules: [path.join(__dirname, "src"), "node_modules"], // 모듈 위치
    extensions: [".ts", ".js"], //모듈 해석 시 파일 검색 순서
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", // 템플릿 위치
    }),
  ],
};

덧붙여, node_module를 사용할 때 써드파티 라이브러리를 사용하는 경우가 있습니다.

당연한 얘기겠지만 자바스크립트로 만든 라이브러리 (jQuery, lodash 등...)은 타입스크립트에서 작동하지 않습니다.

이 라이브러리들의 코드는 타입이 정의되어 있지 않기 때문에 타입스크립트가 타입 추론을 할 수 없기 때문입니다.

 

이런 경우에는 @types/~를 붙여 라이브러리의 타입을 따로 설치해줍니다.

npm i -D @types/jquery

대부분의 라이브러리는 @types 라는 별칭으로 타입 추론이 가능한 보조 라이브러리를 제공합니다. 
없는 경우에는... 직접 타입 어노테이션을 추가해주는 수 밖에 없습니다. 😱

 

 

 

3. .d.ts 와 tsconfig.json

.d.ts 파일은 타입스크립트 선언 파일로, 타입스크립트의 타입 추론을 돕는 파일입니다. 자세히 말하면, 자바스크립트 기반의 서드파티 모듈들을 타입스크립트에서도 사용할 수 있도록 따로 타입만 정리해 넣어둔 파일로 볼 수 있습니다. (위에서 말한 @type 보조 라이브러리가 없는 경우가 해당합니다.)

 

.d.ts 파일에는 타입의 선언만 작성되어 있어야 합니다.

이 때, “declare”라는 키워드를 사용하는데 컴파일러에게 해당 변수나 함수의 존재 여부를 알릴 수 있게 되고, 타입 정보를 알릴 수 있습니다. .d.ts의 내용은 컴파일되지 않습니다.

//'my-library'라는 모듈의 인터페이스 작성
declare module 'my-library' {
  export interface MyLibrary {
    foo(): string;
  }
}

//전역 변수 타입 작성
declare global {
  interface Window {
    config: any;
    ethereum: any;
    log_config: Object;
  }
}

 

tsconfig.json은 타입스크립트 프로젝트 루트 디렉토리에 위치한 파일로, 타입스크립트 컴파일러 옵션 및 타입 검사 옵션을 설정하는 파일입니다. 주요 옵션은 다음과 같이 구성되어 있습니다.

{
  //컴파일러 옵션을 설정하는 항목입니다...

  "compilerOptions": {
    
		/* 기본 설정 */
    "target": "es2016", //컴파일 될 ECMAScript 버전
    "lib": ["dom", "es6", "jquery"], //컴파일에 포함될 라이브러리 항목                                        
    "module": "commonjs", //컴파일된 자바스크립트의 모듈 시스템 설정
    "rootDir": "src", //타입스크립트 소스파일의 위치를 알려 줄때의 기준이 되는 경로
		"outDir": "./dist", //결과물(컴파일된 자바스크립트 파일)의 위치 경로
		"declaration": true, //.d.ts 파일 생성 여부

    /* JavaScript Support */
    "allowJs": true, 
    "esModuleInterop": true, 

    /* Type Checking */
    "strict": false,   //엄격한 타입 검사 활성화 여부            

    /* Completeness */
    "skipLibCheck": true, /* Skip type checking all .d.ts files. */
  },

	//컴파일에서 제외될 파일들
	"exclude": ["node_modules", "dist", "build", "*.test/**/*.ts"],

	//컴파일 대상으로 포함할 파일들
  "include": ["src/*.ts"]

}

 

 

코드안의 설명들을 보시고 자신의 개발 환경에 맞게 설정들을 수정하면 되겠습니다.

tsconfig.json에는 위의 언급한 것보다 더 많은 설정 옵션들이 있으니 시간 되실 때 한번 참고해보세요! 😄