by Anthony Fu @antfu
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())
}
}
})
