반응형
최근에 react-i18next(react-i18next)의 translation.json을 타이핑 한 경험이 있습니다.
물론 공식문서에 방법이 상세하게 잘 적혀있는데요,
다른 JSON 타이핑에도 응용할 수 있지 않을까 해서 비슷한 예제를 찾아봤습니다.
원문 : https://dev.to/nickytonline/strongly-typed-json-in-typescript-5gb2
1. 타입스크립트 옵션을 켭니다.
json을 임포트할 수 있도록 합니다.
{
"compilerOptions": {
"resolveJsonModule": true,
// more awesome compiler options
}
}
2. JSON을 import 합니다.
음? 그냥 임포트만 했는데 타입이 지원되네요?
그럼 해당 JSON의 타입을 다른곳에서 활용하려면 어떻게 할까요?
3. typeof JSON을 export 합니다.
type PersonalInfo = typeof data;
정말 쉽군요!
이제 JSON을 타입 안전하게 사용할 수 있게 되었습니다!
반응형
'FrontEnd' 카테고리의 다른 글
리액트 테스트 : 브라우저 API와 서드파티 모듈 mocking (0) | 2022.07.23 |
---|---|
리액트 테스트 : MSW를 사용하여 HTTP Requests 모킹하기 (0) | 2022.07.23 |
타입스크립트 : 파라미터 타입(Parameters)과 리턴 타입(ReturnType) (0) | 2022.07.22 |
디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개 (0) | 2022.07.21 |
리액트 국제화(i18n, internationalization) translation key 설계 (0) | 2022.07.21 |