Requisiten, die Vue.js 3 mit TypeScript eingeben

Question

Ich versuche, hinweis meine Requisiten in eine Vue 3-Komponente mit Kompositions-API einzugeben.

Also mache ich das:

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: FlashInterface,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
            // Stuff
        }
};

Mein FlashInterfacesieht so aus:

export default interface FlashInterface {
    level: string,
    message: string,
    id?: string
}

Diese Schnittstelle funktioniert gut, außer in diesem Fall, in dem ich diesen Fehler erhalten habe:

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here.
    18 |    props: {
    19 |        message: {
  > 20 |            type: FlashInterface,
       |                  ^^^^^^^^^^^^^^
    21 |            required: true
    22 |        }
    23 |    },

Ich verstehe nicht, warum Typoskript dies für einen Wert hält.

Was vermisse ich ?

Answer 1

Der Compiler beschwert sich über das Fehlen einer Referenz für einen (benutzerdefinierten) Konstruktor während der Typprüfung (Links zu älteren Dokumenten, funktioniert jedoch genauso mit der neuesten Version von Vue).

In Typescript möchten Sie sich Schnittstellen möglicherweise als einen Vertrag vorstellen, dem eine Entität entsprechen sollte, damit sie nicht wirklich ein Konstruktor sind. Daher müssen wir eine Implementierung dieser Schnittstellen bereitstellen.

Wenn Sie Typescript verwenden und die Schnittstelle beibehalten müssen, sollten Sie das Klassenäquivalent verwenden:

// Name the constructor whatever you like,
// but I would personally prefix interfaces with an "I"
// to distinguish them with the constructors

class Flash implements FlashInterface {
  level: string;
  message: string;
  id?: string

  constructor() {
    // Be sure to initialize the values for non-nullable props
    this.level = '';
    this.message = '';
  }
}

export default {
  name: 'Home',

  props: {
    message: Flash
  }
}

Ein Auszug aus dem Dokument:

Darüber hinaus typekann es sich auch um eine benutzerdefinierte Konstruktorfunktion handeln, und die Bestätigung erfolgt mit einer instanceofPrüfung. Zum Beispiel existiert die folgende Konstruktorfunktion:

props: {
  message: {
    type: function Person(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }
  }
}

Und natürlich wäre eine andere Alternative, wie im anderen Beitrag mit vorgeschlagen PropType. Entweder wird man tun. Es ist nur eine Frage der Präferenz, denke ich.

Answer 2

Sie sollten es mit PropTypeaus vue importierten verwenden wie Object as PropType<FlashInterface>:

import FlashInterface from '@/interfaces/FlashInterface';
import { ref,PropType } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: Object as PropType<FlashInterface>,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
            // Stuff
        }
};