Giter VIP home page Giter VIP logo

Comments (8)

johnsoncodehk avatar johnsoncodehk commented on May 22, 2024 2

hi @Hope410, you already can use PropType form @vue/composition-api module. I'm not sure which part you are missing, so here is a example:

import { defineComponent, PropType } from '@vue/composition-api'

export default defineComponent({
  props: {
    foo: Object as PropType<AnyTypeYouWant>
  }
})

from language-tools.

LurkingExorcist avatar LurkingExorcist commented on May 22, 2024 1

hi @Hope410, you already can use PropType form @vue/composition-api module. I'm not sure which part you are missing, so here is a example:

I use PropType from vue import and don't use defineComponent from @vue/composition-api.
image

from language-tools.

johnsoncodehk avatar johnsoncodehk commented on May 22, 2024 1

@dynamite-ready The type inference provided by Vue.extend is very limited. For example, cross-component props type-checking is not supported.

from language-tools.

johnsoncodehk avatar johnsoncodehk commented on May 22, 2024

have you try defineComponent? as I know PropType only work for defineComponent, but not Vue.extend.

from language-tools.

LurkingExorcist avatar LurkingExorcist commented on May 22, 2024

as I know PropType only work for defineComponent, but not Vue.extend.

PropType from vue works as well.

So, i used defineComponent, and prop type infered correctly, thanks. But could you add support of Vue.extend? It would be very helpful for vue2 + typescript users, i think most of them use Vue.extend

from language-tools.

johnsoncodehk avatar johnsoncodehk commented on May 22, 2024

We need $props types for element props type-checking, PropType from vue can only work for this type inside Vue.extend({ ... }), but not working for $props:

import Vue, { PropType } from 'vue';

const A = Vue.extend({
  props: {
    foo: String,
  },
  mounted() {
    this.foo // string
  }
});
const a = new A();

a.$props.foo // any

check the source code, Vue.extend seem do nothing for $props types infer: https://github.com/vuejs/vue/blob/5255841aaff441d275122b4abfb099b881de7cb5/types/vue.d.ts#L34

I'm not sure dose they have plan to improve Vue.extend types or not, anyway this is upstream problem.

from language-tools.

LurkingExorcist avatar LurkingExorcist commented on May 22, 2024

I understood, anyway, thank you!

from language-tools.

dynamite-ready avatar dynamite-ready commented on May 22, 2024

Somehow, Prop checking worked for me in Vue 2 (Nuxt), while using Vue.extends({}):

image

The docs for Volar say this shouldn't work, no?
This seems great for now, but can I always count on this behaviour?

from language-tools.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.