본문 바로가기

FrontEnd

타입스크립트 : typescript with JSON (JSON에 타입 지원)

반응형

타입스크립트

최근에 react-i18next(react-i18next)의 translation.json을 타이핑 한 경험이 있습니다.

물론 공식문서에 방법이 상세하게 잘 적혀있는데요,

다른 JSON 타이핑에도 응용할 수 있지 않을까 해서 비슷한 예제를 찾아봤습니다.

 

원문 : https://dev.to/nickytonline/strongly-typed-json-in-typescript-5gb2

 

Strongly Typed JSON in TypeScript

Someone in one of the Slack communities I'm a part of asked today how to type JSON in TypeScript,...

dev.to

1. 타입스크립트 옵션을 켭니다.

json을 임포트할 수 있도록 합니다.

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // more awesome compiler options
  }
}

2. JSON을 import 합니다.



음? 그냥 임포트만 했는데 타입이 지원되네요?

그럼 해당 JSON의 타입을 다른곳에서 활용하려면 어떻게 할까요?


3. typeof JSON을 export 합니다.

type PersonalInfo = typeof data;

정말 쉽군요!

이제 JSON을 타입 안전하게 사용할 수 있게 되었습니다! 

반응형