typescript - Vad är ett korrekt sätt att skapa en typ för Vue-props

Jag försöker skapa en egen typ för min prop i Vue js, jag har skapat en types-mapp och lagt till den i tsconfig.typeRoots. IntelliSense och allt annat fungerar korrekt, inga problem vid kompilering, men när jag besöker den komponenten får jag ett felmeddelande att Car är inte definierad trots att jag redan har definierat den och den fungerar på andra ställen. Men efter att ha kollat den officiella dokumentationen förstod jag att prop förväntar sig en constructor, så jag omdefinierade typen till declare class Car och lade till en konstruktörsprototyp, men samma problem kvarstår.

Här är filerna: bildelskomponent

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "the-car",
  props: {
    car: {
      required: true,
      type: Car,
    },
  },
});
</script>

deklarationsfilen types/common/index.d.ts

declare class Car {
    name: String;
    image: String;
    kms: Number;
    gears: String;
    desc: String;
    fuel: String;
    engine: String;
    price: Number;
    constructor(name: String, image: String, kms: Number, gears: String, desc: String, fuel: String, engine: String, price: Number);
}

Svar #1

typdeklarationer som type: Car eller type: Object as Car kommer inte att fungera eftersom Vue tillhandahåller ytterligare funktionalitet som prop-validering som går bortom den standardtypkontroll du får i Typescript.

Även om type: Object as() => Car fungerar, är det rätta sättet att hantera detta genom att använda Vues hjälpfunktion PropType.

import { PropType } from 'vue'

props: {
  car: {
    type: Object as PropType<Car>,
    required: true,
  },
},

Kolla dessa Typescript Support-dokument (v2)(v3) från Vue.js för mer information om att annotera props.

Relaterade artiklar