[nextjs] globalThis 형식에 인덱스 시그니처가 없다는 타입에러가 뜰 때

  현황

next.js 강의를 듣던 중 아래와 같이 타입스크립트, nextjs 환경에서 몽고DB 를 서버와 연결 시 global._mongo 에서   globalThis 형식에 인덱스 시그니처가 없다는 타입에러가 발생 하였다. 원인을 찾아보니 , globalThis 라는 변수에 접근 시 _mongo 라는 속성이 존재하지 않음으로 이를 전역적으로 사용하고 있다는 것을 타입스크립트에 알려주어야 해결할 수 있음을 알게 되었다.

import { MongoClient } from 'mongodb'
const url = process.env.DB_URL_STRING
const options = { useNewUrlParser: true }

let connectDB; 
if (process.env.NODE_ENV === 'development') {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect()
  }
  connectDB = global._mongo
} else {
  connectDB = new MongoClient(url, options).connect()
}
export { connectDB }

 

  해결방법

이 문제가 발생한다면, 루트 경로에 global.d.ts 파일을 생성하고, 다음과 같이 전역적으로 접근하고자 하는 속성의 타입을 지정하여, 해당 속성을 사용하겠다고 타입스크립트에 알려주면 된다.

import type { MongoClient } from "mongodb";

declare global {
  namespace globalThis {
    var _mongo: Promise<MongoClient>;
  }
}

- 참고로 namespace 는 타입스크립트에서 제공하는 특수한 모듈이다. 이 모듈 내부{   }에서 선언된 변수나 함수 등은 외부에서 접근이 불가능해 진다. 즉, 외부에서 접근이 불가능한 하나의 보호막(독립적인 공간)이 형성되는 것이다.

 

참고 문헌)

https://stackoverflow.com/questions/68481686/type-typeof-globalthis-has-no-index-signature/74083358#74083358