Next.js + TypeScript 외부 패키지 유형 대응 절차

Next.js 프로젝트에 Typescript를 도입하는 것 자체는 Next.js의 공식 튜토리얼에 따라 수행하면 쉽게 할 수 있습니다.
그러나 실제 개발에서는 Firebase와 같은 외부 패키지를 추가하기 때문에 이러한 외부 패키지에 대해서도 당연히 형식 대응을 할 필요가 있습니다.

이 기사에서는 이러한 외부 패키지에 대해 어떤 순서로 형식 대응을 수행하는지, 형식 정의를 찾는 방법에 대해 요약했습니다.

외부 패키지의 형 대응은, 이하의 3개 스텝을 밟아 실시합니다.

엄격한 형태 정의 체크를 유효하게 한다

외부 패키지의 형태 정의를 준비한다

코드 수정

절차

Step1. 엄격한 형식 검사 사용

Next.js는 TypeScript를 도입 한 직후의 기본 상태에서 엄격한 유형 검사를하지 않습니다.
먼저 tsconfig.json 파일의 strict 옵션을 활성화하고 엄격한 형식 검사를 수행하도록 설정을 수정합니다.

tsconfig.json

{
  "compilerOptions": {
    "strict": true, // trueに修正
    // ...
  }
}

Step2. 외부 패키지의 형태 정의의 준비

형식 정의를 준비하는 방법에는 세 가지가 있습니다.
각 방법을 설명합니다.

방법 1. 외부 패키지에 형식 정의가 포함된 경우

미리 외부 패키지에 형식 정의가 패킹되어 있는 경우입니다.
이 경우 그대로 형식 정의를 사용할 수 있습니다.
패키지내에 형태 정의가 있는지의 확인은, 이하에서 판단이 가능합니다.

node_modules 패키지의 package.json 에 types 필드에 형식 정의에 대한 참조가 있습니까?

node_modules 패키지에 パッケージ名.d.ts 파일이 생성 되었습니까?

npm 패키지 상세 페이지 에 TS 가 표시되어 있습니까?

위 그림에서 firebase의 패키지는 TS 마크가 붙어 있으므로 패키지에 형 정의가 동봉되고 있는 것을 알 수 있습니다.

방법 2. 패키지와 다른 형식 정의 파일 찾기

방법 1에서 형식 정의를 찾을 수 없으면 패키지 이름 접두어로 @types/パッケージ名로 표시된 npm 패키지를 찾습니다.
다음의 방법으로 형태 정의가 없는지를 찾아 보겠습니다.

외부 패키지의 README 에 @types/パッケージ名 가 없는지 확인.

형식 정의 검색 사이트 TypeScript Types Search에서 검색합니다.

방법 3. 유형 정의를 직접 작성

기존 유형 정의를 찾을 수 없으면 유형 정의를 자체 작성합니다.src/types/ 폴더 아래에 파일 확장자 .ts 등으로 정의 파일을 만듭니다.

tsconfig.json

"include": {
  "types/**/*"
}

types/sample.ts

export type PersonType = {
  id: string;
  name: string;
  age: number;
};

Step3. 코드 수정

외부 패키지의 형식 정의를 준비하면 코드를 수정하는 데 걸립니다.

에디터에 VSCode 을 사용하는 경우 수정 부분을 어둠 속에서 찾을 필요가 없습니다.
코드의 유형 정의되지 않은 위치에 자동으로 빨간색 마커가 표시됩니다.
이러한 적색 마커의 개소를 차례로 수정해 나가는 것으로, 자연스럽게 외부 패키지의 형 대응은 완성합니다.

결론

Next.js의 외부 패키지의 타입 대응의 순서의 설명은 이상이 됩니다.
끝까지 읽어 주셔서 감사합니다.

참고

htps // // 네 xtjs. 오 rg / ぇ r rn / e x se l / ty pe sc pt

htps : // 기주 b. 코 m / 미 c 로소 ft / Ty 페세아 rch

WEB/DB Press vol.117 TypeScript