vue-class-compoentで書いたコンポーネントをTSXで扱うためのヘルパ（考え中）

vue-class-component-tsx.tsx

import Component from "vue-class-component";
import { Base, PropsDef, ScopedSlots } from "vue-tsx-support/lib/experimental";

@Component
class App extends Base {
  // decoratorの引数に入れる代わりにここで指定する
  // $propsの型が { message: string, important: boolean } として推論される
  // 外部のtsxからAppを使う場合はimportantは省略可能になる
  //
  // static propsDef = { ... } にしていないのは、App<T>みたいなコンポーネントを書いたときに
  // staticだとTを使えないから
  @PropsDef
  propsDef() {
    return {
      // required: true as true はrequiredの型をtrueにするため。
      // required: true だけだと型としてはbooleanになり、messageが省略不可であることをコンパイル時に推論できない
      message: { type: String, required: true as true },
      important: { type: Boolean, default: false }
    }
  }

  // scoped slotを使う場合は $scopedSlotsにも型を与える
  // これを定義すると呼び出し元でもscopedSlotsの指定が強制される
  // $scopedSlots!: ScopedSlots<{ default: { param: string } }>;

  get className() {
    return {
      "message-important": this.$props.important
    };
  }

  render() {
    return <span class={this.className}>{ this.$props.message }</span>;
  }
}

new Vue({
  el: "#app",
  render() {
    // messageは省略不可、importantは省略可能
    return <App message="Hello world" />
  }
});