TypeScript 편하게 사용하기

 

 

 

인터페이스 생성 - transform.tools

---

 

기존 자바스크립트 코드를 타입스크립트로 수정하거나 별도의 타입 선언을 추가하는 작업을 할 경우 인터페이스를 생성하여 해당 인터페이스로 타입을 명시해주는 경우가 많습니다.

 

 

 

JSON to TypeScript

transform.tools를 사용하면 편하게 데이터 기반 인터페이스 생성이 가능합니다.

 

 

사용법

 

{
  photo:
    "https://w.namu.la/s/401a6229d082812558c9839860bfae5f1593d144e839c71196bd081fb77cfe39c9ae00743f5990a6baf2d3d6f8fccc1cedadfc039d73cd0271054a1423ca0f49762169e64fa97583f8dfe592bc9e138beb52e5e931a63104a31d442443b92e39",
  name: "개발자 그 잡채 / LeeSeoungHyun",
  email: "lshsh5656@naver.com",
  blog: "https://nicehyun12.tistory.com/",
  github: "https://github.com/ish1610",
  repository: "https://github.com/ish1610/Moive-app-JS",
}

저의 경우 위의 객체 데이터를 기반으로 인터페이스를 생성하려고 합니다.

 

우선 transform.tools에서 to typeScript 카테고리를 선택합니다. 

 

ransform.tools는 JSON 타입의 데이터를 변환해주기 때문에 개발자 도구의 콘솔에서 JSON.stringify를 통해 객체를 JSON 타입으로 변환해 줍니다.

 

 

변환된 JSON 데이터를 복사하여 붙여줍니다.

 

이렇게 객체 데이터를 기반으로 편리하게 인터페이스 생성이 되었습니다. 생성된 인터페이스는 코드의 필요한 부분에 다시 붙여 넣어서 인터페이스 이름만 수정해주시면 됩니다.