by Anthony Fu @antfu
この課題はGoogleが翻訳しました。翻訳品質改善のためのPRを募集しています。
Vueのようなタイピングサポートの簡易バージョンを実装します。
関数名SimpleVue
(Vue.extend
またはdefineComponent
に類似)を提供することにより、計算済みおよびメソッド内のthis
型を適切に推測する必要があります。
この課題では、SimpleVueがdata
、computed
、およびmethods
フィールドを持つオブジェクトを、それが唯一の引数であることを前提としています。
-data
は、コンテキストthis
を公開するオブジェクトを返す単純な関数ですが、データ自体、またはdata
の他のコンピューター値またはメソッドにはアクセスできません。
-computed
は、コンテキストをthis
として受け取り、計算を行って結果を返す関数のオブジェクトです。計算結果は、関数ではなくプレーンな戻り値としてコンテキストに公開する必要があります。
-methods
は、コンテキストをthis
としても取る関数のオブジェクトです。メソッドは、data
、computed
、および他のmethods
によって公開されるフィールドにアクセスできます。 computed
の違いは、methods
が関数としてそのまま公開されることです。
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())
}
}
})