props로 객체가 전달될 때, 타입 체크를 더 확실히하는 방법은 없을까?

[yejineee]

vue.js에서 props에 타입 체크를 위한 기본적인 constructor로 다음을 제공한다.

String
Number
Boolean
Array
Object
Date
Function
Symbol

그러나 이것만으로는 Object안에 있는 프로퍼티의 타입 체크는 불가능하다.
props로 받는 객체의 property의 타입까지 체크하면, 개발하면서도 어떠한 프로퍼티가 있는지 바로 알 수 있고 더 안전할 것이라는 생각이 들었다.

가장 쉽게 해결할 수 있는 방법은 타입스크립트를 쓰는것이다.
안타깝게도 이 플젝은 JS를 쓴다. 타입스크립트를 쓰지 않을거라면, 그와 비슷한 역할을 하는 어떠한 장치를 두어야 한다.

💡 vue에서 그 장치로 쓸 수 있는게 props의 validator라는 프로퍼티이다. 이것은 props로 받은 것의 유효성을 확인해준다.
이 안에서 타입을 체크할 수 있을 것이다.

validator에서 Column 컴포넌트가 받는 object props의 타입 검증을 해주었다.

  props: {
    column: {
      type: Object,
      required: true,
      validator({ id, title, createdAt, cards }) {
        return (
          typeof id === 'string' &&
          typeof title === 'string' &&
          (typeof createdAt === 'string' || createdAt instanceof Date) &&
          cards instanceof Array
        );
      }
    }
  },

만약, validator가 false를 반환한다면, 브라우저에서 경고를 보여준다.

참고

https://michaelnthiessen.com/unlock-full-potential-prop-types