[Next.js] Typescript 설치하기

1. Typescript를 설치한다.

1) [[typescript 홈페이지]] (https://www.typescriptlang.org/) > Docs > 하단의 [Installation] 접속해서 설치 명령어를 확인한다.

 

2) yarn 설치 명령어를 TS를 이용할 프로젝트에서 입력한다.

yarn add typescript --dev

 

3) 설치가 완료되면, package.json파일의 devDependencies에 typescript가 추가된다.

 

💡 dependencies VS devDependencies

설치 명령어에 --dev를 붙이면 package.json의 devDependencies에 추가된다.

• dependencies: 실제로 브라우저에서 실행할 때 필요한 것들
• devDependencies: VSC(개발)을 위해 필요한 것들 (실행할 때는 불필요)
• 배포 시 사용하는 yarn install --production 명령어를 사용하게 되면 devDependencies에 있는 것들은 설치되지 않는다.

 

2. tsconfig.json 설정 파일을 만든다.

1) 프로젝트 최상단에 tsconfig.json 파일을 생성한다.

 

3. tsconfig.json의 내용을 입력한다.

Next 프로젝트가 아닌 경우

[Docs] 👈🏻 docs에서 Node 버전 별 tsconfig.json 파일에 채울 내용의 예시를 확인할 수 있다.

Next 프로젝트인 경우

Next를 사용하는 경우, 프로젝트를 실행하면 tsconfig.json 파일을 감지해서 자동으로 기본 설정을 채워준다! 짱 편함😆

터미널에서 yarn dev를 입력하기만 하면 tsconfig.json 파일 안에 내용이 입력된다.

 

yarn dev 명령어 입력 시 에러가 발생하면 4번 진행!

 

4. types/node, types/react를 설치한다.

1) 3번 단계에서 yarn dev를 했을 때 Please install ~ 이 뜨면 yarn add --dev @types/node를 복사해서 입력한다.

 

🚨 react 18 업데이트 이후 버전 이슈가 있을 수 있다.

1. types/node와 types/react를 react, react-dom과 같은 버전으로 바꿔주고
2. nodemodules 삭제, yarn.lock 삭제
3. yarn install을 다시 해서 버전을 맞춰준다.
   

 

2) 그리고 다시 yarn dev를 하면 프로젝트가 무사히 실행되고, tsconfig.json 파일 안에 내용이 채워지는 것을 볼 수 있다.

 

5. tsconfig.json를 수정한다.

1) "strict": false -> true로 변경해 타입을 엄격하게 체크하도록 한다.

{
  "compilerOptions": {
    "target": "es5", // TS 코드가 실행될 때는 JS 코드로 변환되어서 실행되는데, 이때 어떤 버전의 JS로 변환할 지 지정
    "lib": [ // window.alert 등과 같은 것들에 대한 타입도 체크할 것인지
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, // TS 파일에서 JS 파일을 import할 수 있게 할 것인지 (혼용 사용)
    "skipLibCheck": true, // node_modules의 library도 체크할 것인지
    "strict": true, // 타입을 엄격하게 체크
    "forceConsistentCasingInFileNames": true, // 대소문자 구분 무시
    "noEmit": true, // TS를 JS로 변경할 때 변경한 파일을 생성하지 않고 실행만
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext", 
     // esnext: 모듈 방식. JS 최신 버전으로 다른 파일을 불러올 때 import 사용 | commonjs 방식. require 사용
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [ // 검증할 파일
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

 

6. _app.js를 수정한다.

1) 설정 파일인 _app.js의 확장자를 tsx로 변경한다.
_app.js --> _app.tsx

 

2) Component와 pageProps의 타입을 지정해준다.
👉🏻 Docs의 안내에 따라 AppProps로 지정하면 된다. ('next/app'에서 import 받는다.)