1. 기존 프로젝트에서의 문제점

React 및 Next.js 프로젝트를 TypeScript로 구현하면서 각기 다른 위치에 커스텀 타입 선언이 생겨나서 관리가 힘들어지는 문제가 발생했다. 이러한 문제를 해결하기 위해 타입 관련 파일을 분리하기로 했다.

2. 타입 관련 파일 분리하기

src 디렉토리 내부에 @types 라는 디렉토리를 생성하고 컴포넌트의 Props의 타입을 제외한 모든 타입을 @types 디렉토리에서 관리한다. 이것을 위해서는 TypeScript 컴파일러가 인식할 수 있도록 @types를 포함해주어야 한다.

/* tsconfig.json */

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
		// ...
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./src/@types"],  // 추가
  "exclude": ["node_modules"]
}

3. .ts와 .d.ts

.ts는 JavaScript로 컴파일 되는 일반적인 TypeScript 파일이고 .d.ts는 선언한 내용이 TypeScript 컴파일 시의 문맥에 자동으로 추가되지만 JavaScript로 컴파일 되지는 않는 파일이다.

.ts 나 .d.ts는 큰 차이는 없지만 .d.ts를 사용하면 module 키워드를 사용해서 절대경로로 import할 수 있는 장점이 있다.

.d.ts 사용해보기

// src/@types/index.d.ts

declare module 'Type' {
  export namespace stateType {
    interface reduxState {
      user: {
        value: {
          displayName: string;
          email: string;
          emailVerified: boolean;
          isOauth: boolean;
          photoURL: string;
          uid: string;
        };
      };
    }
  }
}

// src/pages/Main