[Typescript] JS에서 TS 로!

eunniverse·2024년 7월 14일

글쓰게된 계기

javascript에서 typescript로 변환해야할 일이 있어서 마이그레이션에 대해 찾아보았다. 그러면서 좀 정리해야겠다~ 싶어서 쓰는 글!

마이그레이션 하는 이유?

Typescript를 더 많이 써야겠다는 생각이 든 이후로, 적용하기 위해 열심히 노력하고 있다. 그러면 왜 Typescript를 쓰는게 좋을까?
이전 글에서도 말했다시피 Typescript는 데이터에 대한 명시적 타입을 정의하여 컴파일러를 통해 타입 정의를 실행하기 전 오류를 찾을 수 있기 때문에 코드 안정성을 높일 수 있다는 장점이 있다.
따라서 요새 많은 사람들이 Typescript를 더 지향하고, 나도 트렌드에 맞춰서 혼자하는 여러 프로젝트에 적용해보려 노력하고 있다!

JS에서 TS로, 마이그레이션 방법

1. Typescript 설치

typescript 설치

npm install typescript

tsconfig.json 파일 생성하는 방법

tsc --init

(✔️ tsconfig.json 는 typescript를 설정하는 파일이다.)

2. tsconfig.json 설정 파일 작성

위의 이미지처럼 작성을 해주면 되는데, 빨간 박스 부분의 내용은 필요한 compilerOptions으로 보인다. 이외에도 typescript의 세부 설정을 할 수 있다.

3. 빌드 툴 통합
(✔️ 나는 이 과정이 필요없었는데, typescript 정리 문서(?)에서 작성되어 있길래, 혹시나 필요한 분이 계실까 적는다...)
Webpack 을 자주 쓰기 때문에 Webpack 기준으로 작성했다!

ts-loader 설치

npm install ts-loader --save-dev

webpack.config.js 설정 방법

module.exports = {
    entry: "./src/index.tsx",
    output: {
        path: '/',
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".json"]
    },
    module: {
        rules: [
            // '.ts' 또는 '.tsx' 확장자를 가진 모든 파일은 'ts-loader'에 의해 처리됩니다.
            { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ }
        ]
    }
}

❗️(여기서 잠깐) 어쩌다 알게된 여러 지식들...

ts-loader 개선한 사례
ts-loader -> esbuild-loader 로 마이그레이션한 사례를 보면서, ts-loader의 단점(?)을 알게되었다. 지금은 어떤지 모르겠지만..
❓ source-map-loader
TypeScript의 모든 source map 출력을 사용하여 자체 source map을 생성할 때 webpack에게 알리는 패키지이다. 원래 TypeScript 소스 코드를 디버깅 하듯이 최종 출력 파일을 디버깅 할 수 있다.

❓ source map
배포용으로 빌드한 파일과 원본 파일을 연결해주는 기능이다. 서버 배포 시 HTML, CSS, JS를 압축한다. 이 파일에서 에러가 날 경우 source map을 통해 배포용 파일의 특정 부분이 어떤 부분인지 확인 할 수 있다.

4. npm @Types 설치
typescript는 javascript와 환경이 다르기 때문에, Typescript 지원하는지 확인하여 라이브러리를 따로 설치해야한다.
npm 라이브러리 상단에 TS 마크가 있다면 Typescript 지원한다. 이외에 DT 마크로 표시된 라이브러리는 Typescript를 지원하지 않기 때문에 @types 붙여서 따로 설치해야한다.