TypeScript의 강력한 형식 JSON

제가 속한 Slack 커뮤니티 중 한 사람이 오늘 TypeScript에 JSON을 입력하는 방법, 특히 JSON을 가져온 다음 입력하는 방법을 물었습니다. 그들은 JSON을 unknown로 캐스팅한 다음 소비될 때 알려진 유형으로 캐스팅하는 것이 좋은 접근 방식인지 궁금했습니다.

해결책은 그렇게 복잡하지 않습니다. 손을 좀 더럽히고 프로젝트의 TypeScript 컴파일러 옵션을 파헤쳐야 합니다.

기본적으로 JSON을 가져오면 TypeScript는 다음 오류 메시지와 함께 가져올 수 없다고 언급합니다.
Cannot find module './data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)


그래서 TypeScript는 우리에게 무엇을 해야 하는지 알려줍니다. --resolveJsonModule 플래그를 추가합니다. 이것은 TypeScript CLI를 실행하는 경우에 유용하지만 우리가 하는 일은 아닙니다. 수행해야 할 작업은 tsconfig.json 파일의 컴파일러 옵션에 resolveJsonModule 키를 추가하고 true 로 설정하는 것입니다.

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

완료되면 data. 를 입력하면 JSON 데이터가 완전히 입력되었음을 알 수 있습니다.



이는 형식화된 방식으로 데이터를 사용하는 데 유용하지만 프로젝트의 다른 위치에서 JSON 형식이 필요한 경우에는 어떻게 해야 할까요? typeof 를 사용하여 유형을 만들 수 있습니다.
type PersonalInfo = typeof data;


이 CodeSandbox를 가지고 놀 수 있고 모든 것이 작동하는 것을 보는 재미를 느낄 수 있습니다.