d.ts // its corresponding type declarations.

타입스크립트가 적용된 CRA 프로젝트를 생성해서 사용하지 않는 파일들을 없애던 도중

갑자기 App.tsx에서 다음과 같은 에러가 발생했다

결론부터 말하면 react-app-env.d.ts 파일을 삭제해서 생긴 문제였고 다시 복구해주면 된다

그렇다면 이 파일은 무슨 역할을 하고 있었길래 삭제했을 때 이런 에러를 발생시키는 걸까?

d.ts

d.ts 파일은 전역에서 사용할 수 타입 유형만 선언할 수 있는 파일이다

이 파일은 출력에서 JavaScript 코드를 생성하지 않는 TypeScript 코드만 포함할 수 있으며 이 때문에

d.ts 파일은 컴파일 이후 js코드로는 생성되지 않는다

또한 이 때문에 타입 유형이 아닌 const나 let 를 파일 내부에 선언하면 에러가 발생되고

함수의 타입은 선언할 수 있지만 본문을 작성하는 순간 에러를 발생시킨다

declare function sum(x: number, y: number): number; // OK
declare function sum(x: number, y: number): number{...}//  error

declare type sumArgs = {firstNumber: number, secondNumber: number};

이렇게 선언한 타입들은 파일에서 import 해서 사용할 수 있다

CRA에서는 내부 설정으로 인해서 react-app-env.d.ts에 타입을 선언하면 임포트가 필요 없이 바로 사용이 가능하다

react-app-env.d.ts

그렇다면 Cannot find module './logo.svg' or its corresponding type declarations. 에러 또한 어느정도 유추해 볼 수 있는데

logo.svg를 import 하는 과정에서 타입을 찾을 수 없어 발생하는 거라고 생각해볼 수 있다

그렇다면 react-app-env.d.ts에 logo.svg에 대한 타입 선언이 존재하는 걸까?

/// <reference types="react-scripts" />

파일 내부에 있는 이 코드를 힌트로 node-modules/react-scripts/lib/react-app.d.ts경로에 가서 어느정도 해답을 찾을 수 있었다

react-app.d.ts 파일에는 다음과 같은 코드가 들어있었는데

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

주로 이미지와 스타일 관련된 파일 확장자들에 대한 타입이 선언되어 있는 것을 볼 수 있었고 이를 react-app-env.d.ts에서 참조하는 것으로 유추할 수 있을 것 같다