Traduzido pelo Google, abra um PR para ajudar a melhorar a tradução.
Implemente uma versão simplificada de suporte de digitação semelhante ao Vue.
Ao fornecer um nome de função SimpleVue (semelhante a Vue.extend ou defineComponent), ele deve inferir corretamente o tipo this dentro dos métodos computados e.
Neste desafio, assumimos que SimpleVue pega um objeto com campos data, computed e methods como apenas argumento,
data é uma função simples que retorna um objeto que expõe o contexto this, mas você não estará acessível a outros valores ou métodos computados.
computed é um Objeto de funções que toma o contexto como this, faz alguns cálculos e retorna o resultado. Os resultados calculados devem ser expostos ao contexto como valores de retorno simples em vez de funções.
methods é um objeto de funções que também considera o contexto como this. Os métodos podem acessar os campos expostos por data, computed e também por outros methods. A diferença entre computed é que methods é exposto como funções como estão.
O tipo de valor de retorno de SimpleVue pode ser arbitrário.
const instance = SimpleVue({
data() {
return {
firstname: 'Type',
lastname: 'Challenges',
amount: 10,
}
},
computed: {
fullname() {
return this.firstname + ' ' + this.lastname
}
},
methods: {
hi() {
alert(this.fullname.toLowerCase())
}
}
})
import type { Equal, Expect } from '@type-challenges/utils'
SimpleVue({
data() {
// @ts-expect-error
this.firstname
// @ts-expect-error
this.getRandom()
// @ts-expect-error
this.data()
return {
firstname: 'Type',
lastname: 'Challenges',
amount: 10,
}
},
computed: {
fullname() {
return `${this.firstname} ${this.lastname}`
},
},
methods: {
getRandom() {
return Math.random()
},
hi() {
alert(this.amount)
alert(this.fullname.toLowerCase())
alert(this.getRandom())
},
test() {
const fullname = this.fullname
const cases: [Expect<Equal<typeof fullname, string>>] = [] as any
},
},
})