[TS] Typescript 로 마이그레이션

🐾설치

npm i -D typescript ts-loader

ts-loader를 통해 모든 .ts 및 .tsx 파일을 로드한다.

🐾tsconfig.js

{
  "compilerOptions": {
    "target": "ESNext", //ts 파일을 js 어떤 버전의 코드로 변환해줄지
    "module": "ESNext", //js 파일 간 import 문법 구현시 어떤 문법 쓸지
    // "useDefineForClassFields": true, if target is ES2022 or higher, including ESNext,
    // "lib": ["DOM", "DOM.Iterable", "ESNext"], //js로 컴파일할 때 포함될 라이브러리 목록
    "outDir": "./dist/", //js파일 아웃풋 경로 설정
    "allowJs": true, //js 파일들 ts에서 import해서 쓸 수 있는지
    "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
    "moduleResolution": "node", //모듈 해석 방법
    "baseUrl": ".", //paths 사용시 필수
    "paths": {
      // 긴 상대 경로 피하는 방법
      "@api/*": ["src/api/*"],
      "@utils/*": ["src/utils/*"],
      "@/*": ["src/*"]
    },
    "strict": true //강하게 타입을 정의. 아래 주석 처리한 옵션을 모두 활성화한 것과 같은 옵션
    // "noImplicitAny": true, //any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정
    // "strictNullChecks": true,
    // "strictFunctionTypes": true,
    // "strictBindCallApply": true,
    // "strictPropertyInitialization": true,
    // "noImplicitThis": true,
    // "alwaysStrict": true,
  },
  "include": ["src", "**/*.ts"], //ts 적용할 파일 이름이나 패턴을 배열로 지정
  "exclude": ["node_modules", "dist"] //컴파일에서 제외할 파일 및 디렉토리의 패턴
}

내 프로젝트의 환경에 맞게 설정해줬다. lib 옵션을 설정하지 않으면 target에 맞게 default 값을 ts가 알아서 지정해준다고 하여 제외하였다.

🐾webpack.config.js

entry: {
    main: './src/main.ts',
},

파일명 ts로 변경

{
  test: /\.ts$/,
  use: 'ts-loader',
  exclude: /node_modules/,
},

ts-loader를 통해 모든 .ts 파일을 로드할 수 있도록 설정

resolve: {
  extensions: ['.ts', '.js'],
  alias: {
    '@api': path.resolve(__dirname, './src/api'),
    '@utils': path.resolve(__dirname, './src/utils'),
    '@': path.resolve(__dirname, './src/'),
  },
},

• resolve : 모듈 해석 방법 방식 변경
  • alias : 특정 모듈의 별칭
  • extensions : import 할 때 확장자 생략 가능하도록 함

🐾package.json

"build": "tsc && webpack"

• tsc : 프로젝트에 있는 TypeScript 파일을 컴파일하여 JavaScript 파일을 생성
• webpack : 여러 모듈 및 종속성을 하나의 파일로 결합하여 최적화된 번들을 생성

🐾맞닥뜨린 에러!

Typescript를 적용하는 과정에서 에러를 만나 삽질했지만 결국 해결! main.ts 에 import한 파일들을 모두 찾을 수 없다는 에러가 있었다. 아래 사진은 상세 에러를 띄운 화면!

• 처음엔 tsconfig.json의 paths 설정에서 @을 쓰는게 node_modules 안에서 특정 기능을 하는 다른 파일과 겹쳐 인식하지 못하는 건가 싶었고, 다른 문자로 바꿔서 시도해봤지만 실패.
• Field 'browser' doesn't contain a valid alias configuration에 대해 검색해봤으나 해결할 만한 방법을 찾지 못함. 그러다가 main.ts에서 import 하는 파일들을 ts paths 설정이 아닌 상대경로로 바꿔주니 에러가 해결됨
• 위 방법은 근본적으로 해결한 게 아니라서 찝찝했음. 그러나 문제가 ts.config.json의 resolve paths 설정에 있다는 것을 확실히 알게됨. webpack typescript의 키워드로 검색했고 typescript 에서 paths로 단축어로 경로를 지정한다면, webpack 에서도 설정을 해줘야함을 알게됨.

//webpack.config.js![](https://velog.velcdn.com/images/eun0leee/post/85c24a14-00df-425e-b522-6e2787b6838f/image.png)


resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@api': path.resolve(__dirname, './src/api'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@': path.resolve(__dirname, './src/'),
    },
  },

원래 있던 extensions에 alias를 추가해주니 에러가 해결됐다.

2시간 삽질의 보람!!!!!!! 여러 프로그램을 사용할 때 하나의 기능을 사용하려면 여러 프로그램들을 모두 연결해줘야한다는 것을 깨달았다.