타입 스크립트를 이래서 쓰는 걸까

react native expo로 개발을 하면서 타입 스크립트는 잘 모르기도 하고 타입을 지정하는 것에 대한 이점을 아직 느끼지 못해서 일단 자바스크립트로 개발을 하면서 불편하면 나중에 마이그레이션해야겠다는 생각을 하고 있었다.

그러다가 오늘 API를 한 파일로 옮기면서 아 이래서 타입 스크립트를 쓰는건가 하는 이유를 하나 느꼈다.

아 이래서 쓰는 건가

// utils/api.js
...
  updateTodo: ({ accessToken, updateData }) => {
    return handleRequest(() =>
      axios.patch(API_PATH.todos, updateData, metadata(accessToken)),
    );
  },
...

예를 들어 todo를 업데이트하는 api에서 update하는 내용인 updateData가 request의 body에 들어가게 된다. 그런데 이때 updateData라는 객체에 어떤 속성이 필요한지 확인하는 방법이 없는 것이다. 매번 스웨거를 열 수도 없다.

vscode에서 함수 이름 위에 마우스를 올리면 뜨는 힌트(VSCode IntelliSense 기능이라고 한다)에서 바로 updateData에 대해 볼 수 있었으면 좋겠다.

만약 타입스크립트라면

interface를 지정해줌으로써 vscode에서 코드를 작성하면서 쉽게 어떤 속성이 필요한지 알 수 있었을 것 같다.

interface의 원래 목적이 이건 아닌 것 같기도 하다! 나중에 더 찾아보겠다.

일단 적용한 해결책

그렇다고 바로 타입스크립트로 바꾸기에는 내가 너무 타입스크립트에 대해 모른다. 그리고 저 한 이유 때문에 지금부터 작성하는 코드를 다 타입스크립트로 작성하는 건 다른 부분에서 많은 변화를 불러 일으킬 것이라 생각이 들어서 다른 해결책을 생각했다.
IntelliSense에서 보여주는 저 힌트는 타입스크립트 타입에 기반하거나 JSDoc을 기반으로 한다고 한다.
그래서 일단 함수마다 JSDoc을 작성해서 VSCode 내에서 간편하게 매개변수를 확인할 수 있게 했다.

AS IS

원래 타입스크립트 타입에 기반해서 updateData가 그냥 any라고만 나왔다

TO BE

updateData의 속성을 적어두었고 필수인 것과 선택인 것을 표시했다.

비슷하게 다른 API도 열심히 JSDoc을 작성했다.
마음이 편안해졌다.