Back to Type Challenges

README.Pt BR

questions/00006-hard-simple-vue/README.pt-BR.md

latest3.3 KB
Original Source
<!--info-header-start--><h1>Simple Vue </h1><blockquote><p>by Anthony Fu <a href="https://github.com/antfu" target="_blank">@antfu</a></p></blockquote><p><a href="https://tsch.js.org/6/play/pt-BR" target="_blank"></a> &nbsp;&nbsp;&nbsp;<a href="./README.md" target="_blank"></a> <a href="./README.zh-CN.md" target="_blank"></a> <a href="./README.ja.md" target="_blank"></a> </p><!--info-header-end-->

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.

ts
const instance = SimpleVue({
  data() {
    return {
      firstname: 'Type',
      lastname: 'Challenges',
      amount: 10,
    }
  },
  computed: {
    fullname() {
      return this.firstname + ' ' + this.lastname
    }
  },
  methods: {
    hi() {
      alert(this.fullname.toLowerCase())
    }
  }
})
<!--info-footer-start-->

<a href="../../README.pt-BR.md" target="_blank"></a> <a href="https://tsch.js.org/6/answer/pt-BR" target="_blank"></a> <a href="https://tsch.js.org/6/solutions" target="_blank"></a> <hr><h3>Desafios Relacionados</h3><a href="https://github.com/type-challenges/type-challenges/blob/main/questions/00213-hard-vue-basic-props/README.md" target="_blank"></a> <!--info-footer-end-->