Third Party 라이브러리의 타입을 재정의 하는 법

개요

typescript를 기반으로, 다른 라이브러리에서 정의된 타입을 바탕으로 개발을 하는 경우가 있다. 이때, 개발자가 임의로 정의된 타입 말고 새로운 속성을 추가하여 리턴해야하는 객체가 필요한 경우, 이때 Third Party 라이브러리에 정의된 타입과 일치하지 않으면 타입 에러를 발생시킨다. 이런 경우 어떻게 해결할 수 있을까?

declare module

declare module 구문은 TypeScript에서 모듈이나 라이브러리의 타입 정보를 확장하거나 정의하기 위한 방법을 제공한다. 이것은 주로 외부에서 가져온 코드나 라이브러리에 대한 타입을 더 명시적으로 정의하고, ts 컴파일러가 해당 모듈을 이해하도록 돕는 데 사용된다. next-auth라는 next.js 프레임워크의 인증 라이브러리를 참고하여 아래에서 세 가지 주요 측면을 더 자세히 살펴보자.

1. 기존에 정의된 타입으로 개발

import type { Session } from 'next-auth';

const session: Session = {
    user: {
        email: 'diso592@naver.com',
        name: 'eeennsu',
        image: '...'
    },
    expires: ''
}

기존에 정의된 타입을 바탕으로 session을 설정한다. Session 타입은 위와 같이 정의할 수 있다.

2. 재정의할 타입의 형태 확인

export interface Session extends DefaultSession {}

export interface DefaultSession {
  user?: {
    name?: string | null
    email?: string | null
    image?: string | null
  }
  expires: ISODateString   // = string
}

기존에 정의된 타입을 확인하기 위해 재정의 할 타입을 ctrl + 클릭 하여 정의된 파일로 이동한다. 그곳에 위와 같이 정의된 타입을 볼 수 있다.

3. 기존 값에 임의의 속성 추가해보기

위와 같이 정의된 값에, role 과 `id' 라는 속성을 추가하려면, 정의된 타입에서 벗어나기에 타입 오류가 발생한다. 즉, 개발자가 정의된 타입을 override 해야하는 상황이 필요한 것이다.

4. 외부 모듈(라이브러리)의 타입 재정의

declare module 'next-auth' {
    interface User extends DefaultUser {
        role: string;
    }
}

정의된 기존의 DefaultUser는 그대로 사용해햐 하기에 extends 로 상속받는다. 이후 내부에서 개발자가 사용할(override할) role, id 속성을 정의한다.

• type.d.ts
  ts 전용 타입 정의 파일인 d.ts 파일을 생성하고, 그 안에서 재정의를 진행한다.

• declare module 'next-auth'
  재정의 할 라이브러리를 문자열로 선언해주고, 해당 모듈에 있는
  타입 (or interface)를 재정의한다.

이제 재정의된 타입이 전역적으로 적용되며, 정상적으로 타입 에러없이 사용 가능해졌다. 이를 통해 TypeScript는 외부 모듈과 라이브러리를 더 잘 이해하고 프로젝트 전체에서 일관된 타입 검사를 수행할 수 있게된다.