TypeScript 5.3의 Import Attributes로 JSON 모듈 안전하게 불러오기

배경

프로젝트에서 JSON 파일을 모듈로 불러올 때 import json from './config.json' 형태로 사용하고 있었다. TypeScript 5.3이 릴리즈되면서 Import Attributes가 정식 지원되어 타입 안정성을 높일 수 있게 되었다.

기존 방식의 문제

// 기존 방식
import config from './config.json' assert { type: 'json' };

assert 키워드는 Stage 3 제안이었고, TC39에서 with 키워드로 변경되었다. TypeScript 5.3부터는 with를 권장한다.

적용 과정

// 변경 후
import config from './config.json' with { type: 'json' };
import packageInfo from '../package.json' with { type: 'json' };

const version: string = packageInfo.version;

tsconfig.json에서 module 옵션 확인이 필요했다.

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true
  }
}

Vite 번들러 설정

Vite 5.0에서는 별도 플러그인 없이 동작했지만, assetsInclude 옵션으로 명시하는 것이 안전했다.

// vite.config.ts
export default defineConfig({
  assetsInclude: ['**/*.json'],
});

마이그레이션 스크립트

프로젝트 전체에 assert 구문이 20여 곳 있어서 정규식으로 일괄 변경했다.

find ./src -name '*.ts' -exec sed -i "s/assert {/with {/g" {} +

결과

JSON import 시 타입 추론이 더 정확해졌고, 런타임에서도 명시적으로 JSON임을 보장할 수 있게 되었다. assert 사용 시 발생하던 ESLint 경고도 사라졌다.

TC39 표준을 따라가는 TypeScript의 빠른 대응이 인상적이었다.