README.Ja

Vue ライクな型付けの簡略化されたバージョンを実装してください。

関数名 SimpleVue (Vue.extend や defineComponent のようなもの) を与えることで、computed や methods の中の this 型を適切に推論できます。

この課題では、SimpleVue が data、 computed、 methods フィールドを持つオブジェクトを唯一の引数として受け取れることにします。

• data はコンテキスト this を公開するオブジェクトを返す単純な関数ですが、自身や算出プロパティ、メソッドにアクセスできません。

• computed は、コンテキストを this として受け取り何らかの計算をし、その結果を返す関数のオブジェクトです。計算された結果は、関数ではなくプレーンな戻り値としてコンテキストに公開されなければなりません。

• methods は同様に this をコンテキストとする関数のオブジェクトです。メソッドは他の methods と同様に data、 computed、 methods で公開されているフィールドにアクセスできます。computed と異なるのは、method がそのまま関数として公開されている点です。

SimpleVue の戻り値の型は任意です。

const instance = SimpleVue({
  data() {
    return {
      firstname: 'Type',
      lastname: 'Challenges',
      amount: 10,
    }
  },
  computed: {
    fullname() {
      return this.firstname + ' ' + this.lastname
    }
  },
  methods: {
    hi() {
      alert(this.fullname.toLowerCase())
    }
  }
})

<a href="../../README.ja.md" target="_blank"></a> <a href="https://tsch.js.org/6/answer/ja" target="_blank"></a> <a href="https://tsch.js.org/6/solutions" target="_blank"></a> <hr><h3>関連する課題</h3><a href="https://github.com/type-challenges/type-challenges/blob/main/questions/00213-hard-vue-basic-props/README.ja.md" target="_blank"></a> <!--info-footer-end-->