创建Vue props的正确方式是什么？

Question

我正在尝试为Vue js中的prop创建一个自定义类型type，我已经创建了一个types文件夹并将其添加到了tsconfig.typeRoots中，IntelliSense和所有其他内容都可以正确工作，在编译时没有问题，但是当我访问该组件时，我会收到一个错误，即Car未定义，但我已经定义了它，并且它在其他地方可以工作，但是在检查官方文档后，我了解到prop需要一个构造函数，因此我重新定义了类型为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);
}

- krypton

---

嗨，我认为你需要在组件中导入 index.d.ts文件。 - Yash Maheshwari

@YashMaheshwari 我已经在 tsconfig.json 中添加了一个条目，无需导入即可正常进行类型检查。 - krypton

Answer 1

如果您不介意使用TypeScript接口，在您的情况下，创建一个Car Interface之后：

props: {
  car: {
    required: true,
    type: Object as () => Car,
  },
},

编辑：

正如@Chin. Udara所提出的。

如果您发现验证器无法进行类型推断或成员完成不起作用，通过注释参数来指定预期类型可能有助于解决这些问题。

import Vue, { PropType } from 'vue'

const Component = Vue.extend({
  props: {
    car: {
      required: true,
      type: Object as PropType<Car>,
    }
  }
})

查看Vue.js的Typescript Support docs以获取有关注释props的更多信息。

- Oliver Cape