为 Vue props 创建类型的正确方法是什么

Question

我正在尝试在 Vue js 中为我的 prop 创建一个自定义

type

，我创建了一个类型文件夹并将其添加到

tsconfig.typeRoots

中，IntelliSense 和所有其他东西都工作正常，编译时没有问题，但是当我访问该组件时，我收到一个错误

Car is not defined

但我已经定义了它并且它可以在其他地方工作，但在检查官方文档后我知道 prop 需要一个

constructor

所以我将类型重新定义为

declare class Car 

并添加了构造函数原型，但同样的问题。

以下是文件： 汽车零部件

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

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

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

Answer 1

诸如

type: Car

或

type: Object as Car

之类的类型声明将不起作用，因为在 Vue 中，它提供了额外的功能，例如 prop 验证，这超出了 Typescript 中的标准类型检查。

虽然

type: Object as () => Car

可以工作，但处理这个问题的正确方法是使用 Vue 的辅助方法

PropType

（如 @Chin.Udara 提议的）。

import { PropType } from 'vue'

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

查看 Vue.js 中的 Typescript 支持文档，了解有关注释 props 的更多信息。