asset declaration

파일 import는 선언 파일이 타입을, 번들러가 값을 맡는다

TypeScript는 png, svg, css 같은 파일 import 결과를 스스로 알지 못한다. `declare module '*.ext'`는 import 결과 타입을 알려주고, 실제 URL·클래스 맵·데이터 변환은 번들러가 처리한다.

source

파일 import

`logo.png`, `main.css`를 모듈처럼 가져온다.

.d.ts

타입 계약

확장자별 default export 타입을 선언한다.

compiler

타입 검사

컴파일러는 import 결과 사용이 맞는지만 본다.

bundler

런타임 값

Vite, Webpack, Next.js가 실제 값을 만든다.

*.png 
const value: string

번들링된 URL 문자열

이미지 최적화 방식은 프레임워크 설정을 따른다.

*.svg

src 문자열 또는 컴포넌트

SVGR 사용 여부에 따라 타입이 달라진다.

URL과 React 컴포넌트를 혼동하지 않는다.

*.css 
{ [className: string]: string }

`styles.container` 같은 클래스 맵

CSS Modules일 때만 맵 타입이 자연스럽다.

*.json

설정 객체 또는 좁힌 schema

데이터 파일을 직접 import

`any`로 열면 필드 오류를 놓친다.

선언은 타입 전용

`.d.ts`는 JS 변환 코드를 만들지 않는다.

변환은 번들러 담당

실제 URL, class name, 데이터 로딩은 빌드 도구가 만든다.

와일드카드는 좁게

확장자 전체에 적용되므로 프로젝트 규칙과 맞춘다.