[TypeScript/ Error] styled-components DefaultTheme 형식에 속성이 없습니다

1. 문제상황

/src/styles에 공통 theme을 적용하기 위하여 theme.ts를 작성하였다.

export const theme = {
  colors: {
    standard: '#1E40AF',
    background: '#1e3a8a',

    // 생략
} as const;

export type Theme = typeof theme;

export default theme;

하지만 위 사진처럼 theme에서 DefaultTheme 형식에 'colors' 속성이 없다는 오류가 발생하였다.
기존에 진행하는 프로젝트에서는 따로 styled.d.ts를 지정하지 않아도 정상적으로 읽어와졌었지만,
신규프로젝트를 생성하면서 읽어오지 못하는 오류가 발생하였다.

DefaultTheme 형식에 'colors' 속성이 없다는 오류는 타입을 인식 못하는 것이기 때문에, styled.d.ts를 작성하였지만,

이처럼 styled-components에서 DeFaultTheme은 빈 객체이기 때문에, 빈객체 오류가 발생하게 되었다.

import 'styled-components';
import { Theme } from './src/styles/theme';

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface DefaultTheme extends Theme {}
}

그렇기에 이처럼, eslint에서 빈 객체 무시하는 주석을 따로 추가하고, 기본적으로 루트경로에 d.ts파일이 있는 경우 tsconfig에 따로 추가하지 않아도 된다고 알고 있었기에 재시작을 실행하였다. Vscode실행 > TS서버 재시작을 통해 캐시를 초기화했음에도, 문제는 해결되지 않았다.

Theme이라는 타입 자체가 혹시 예약어와 같이 이미 존재하는 타입이라 충돌이 나는것일까? 해서 다르게 선언해보았지만, 의미가 없었다.

import 'styled-components';
import { Theme } from './src/styles/theme';

type CustomTheme = typeof Theme;

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface DefaultTheme extends CustomTheme {}
}

그렇기에 라이브러리 버전 문제를 생각하여 기존에 styled-components라이브러리의 버전과 TypeScript 버전을 확인해보았다.
styled-components의 경우 6.1.14 > 6.1.17로 변화한것이기 때문에, 문제가 없을것이라 판단하였고,
TypeScript의 경우 5.6.3 > 5.7.3으로 차이점이 있기 때문에, TypeScript의 버전을 변경시켜보았지만 문제가 해결되지는 않았다.

2. 해결방법

루트에 styled.d.ts를 선언해 두어도 변경되지 않았던 이유는
tsconfig에서 include가 src로 명시되어있었기 때문이였다.

include설정이 없었다면, 루트에 있는 *.d.ts파일들을 ts가 알아서 파악했겠지만, vite로 생성한 ts프로젝트의 tsconfig는 기본적으로 "include": ["src"]을 가지고 있기 때문에, 루트에 styled.d.ts를 자동으로 인식하지 못한것이다.

그렇기에 아래와 같이 styled.d.ts를 styles폴더안에 작성하고, tsconfig에 해당 경로를 추가한 뒤 Ctrl + Shift + P> TS서버 재시작으로 재시작한 이후로 이 문제를 해결할 수 있게 되었다.

// /src/styles/styled.d.ts
import 'styled-components';
import { Theme } from './theme';

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface DefaultTheme extends Theme {}
}

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",

    // 생략

  },
  "include": ["src", "src/styles/styled.d.ts"]
}