[Next.js] Typescript 설치하기

이주희·2023년 1월 19일

typescript

TypeScript

목록 보기

2/10

1. Typescript를 설치한다.

1) [typescript 홈페이지] > 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 업데이트 이후 버전 이슈가 있을 수 있다.

types/node와 types/react를 react, react-dom과 같은 버전으로 바꿔주고

nodemodules 삭제, yarn.lock 삭제

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"
  ]
}