title: Vue 3 Typescript props validation at both compile and runtime
body: <p>My team is building a Vue 3 component library. As the project goes larger in scale, we refactored it with typescript to get a better developing experience.</p>
  <p>But here's the thing - there are teams using our lib in different environments, with or without typescript and bundler, which means for almost every component we need to validate prop types both in compile-time and runtime.</p>
  <pre class="lang-js prettyprint-override"><code>props: {
    someProp: {
      type: String as PropType&lt;'enum1' | 'enum2' | 'enum3'&gt;,
      validator: (v: string) =&gt; {
        return ['enum1', 'enum2', 'enum3'].includes(v)
      }
    }
  }
  </code></pre>
  <p>The code runs well. Teams using typescript are happy - they got their code completion and can spot potential errors ahead of time. Teams using javascript are happy - they can discover any type-related errors at runtime thanks to the <code>validator</code>. But we are not happy, since the code is duplicated. Technically <code>&lt;'enum1' | ...&gt;</code> is a type def and <code>['enum1', ...]</code> is an array, they are not the same thing - but we literally write the same string multiple times.</p>
  <p>Is there any way to implement something that can <em>define</em> a prop with <code>PropType</code> and <code>validator</code> without having to reeeeeeepeat myself?</p>