Correct typeScript Type for vue3 setup() arguments

Question

I'm using vue3 with typescript, and I'm using composition API.

export default {
    setup(props, context) {
    },
};

This throws an error as follows

Failed to compile.

src/components/LoginForm.vue:20:11
TS7006: Parameter 'props' implicitly has an 'any' type.
    18 |
    19 | export default {
  > 20 |     setup(props, context) {
       |           ^^^^^

I know this can be fixed by making props, context of type any, but that will defeat the purpose of TypeScript.

VS Code intellisense showing me the following type, but I'm not able to find the module from these type are exported.

setup?: ((this: void, props: {}, ctx: SetupContext<EmitsOptions>) => void | RenderFunction

What is the correct Type for the setup function, and from where it is exported ?.

Type of props should be inferred automatically from your component's props option... — Michal Levý
– Michal Levý, Commented Apr 3, 2021 at 7:57

Krzysztof Kaczyński · Accepted Answer · 2021-04-03 11:53:29Z

12

The props can not be inferred because you forget to use defineComponent method to create your component. To resolve this issue and let props to be infrared by Vue you need to wrap your whole object which you are exporting in defineComponent method.

More about defineComponent

The <script lang="ts"> part of example Vue 3 composition API component should look like that:

export default defineComponent({
  name: "PersonComponent",
  props: {
    firstName: {
      type: String,
      required: true
    },
    lastName: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  },
    setup(props) {
    const firstName = props.firstName;
    const lastName = props.lastName;
    const age = props.age;
    return {
      firstName,
      lastName,
      age
    };
  }
})

For more complexd types such as interfaces you need to use Object as PropType<T> (Object as PropType<IconProps>). More about PropType<T>

edited Apr 3, 2021 at 11:53

answered Apr 3, 2021 at 11:32

Krzysztof Kaczyński

5,1516 gold badges35 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Emobe Over a year ago

I thought defineComponent was for using composition API within Vue v2?

Krzysztof Kaczyński Over a year ago

@Emobe I it part of Vue3. Please take a look at this link to Vue 3 documentation: defineComponent which I added in my answer

Emobe Over a year ago

Yeah you're right, I noticed it was in there right after I commented. Nice to know it's in there :D

Collectives™ on Stack Overflow

Correct typeScript Type for vue3 setup() arguments

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related