vue.js - Korrekt TypeScript-typ för vue3 setup()-argument

Jag använder vue3 med typescript, och jag använder composition API.

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

Detta ger ett fel enligt följande

Misslyckades att kompilera.

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

Jag vet att detta kan fixas genom att göra props, context av typen any, men det skulle förstöra syftet med TypeScript.

VS Code intellisense visar mig följande typ, men jag kan inte hitta modulen från vilken dessa typer är exporterade.

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

Vad är den korrekta typen för setup-funktionen, och varifrån exporteras den ?

Svar #1

Props kan inte härledas eftersom du glömde använda defineComponent-metoden för att skapa din komponent. För att lösa detta problem och låta props härledas av Vue behöver du omsluta hela objektet som du exporterar i defineComponent-metoden.

Mer om defineComponent

Delarna <script lang="ts"> i ett exempel på en Vue 3 composition API-komponent bör se ut så här:

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
    };
  }
})

För mer komplexa typer som gränssnitt måste du använda Object as PropType<T> (Object as PropType<IconProps>). Mer om PropType<T>

Relaterade artiklar