Vue Prop 自定义类型创建指南：你的终极解决方案

2024-03-14 10:14:38

Vue 中为 Prop 创建自定义类型：终极指南

在 Vue.js 中使用自定义类型作为 prop 可以提升代码的可读性、可维护性和安全性。然而，为 prop 定义类型有时会带来挑战。在本指南中，我们将深入探讨如何正确创建 Vue prop 类型，避免常见的编译时和运行时错误。

定义构造函数

Vue.js prop 期望类型具有构造函数。例如，如果我们要为 car prop 定义一个自定义类型，我们必须创建一个具有构造函数的 Car 类：

declare class Car {
  constructor(
    name: string,
    image: string,
    kms: number,
    gears: string,
    desc: string,
    fuel: string,
    engine: string,
    price: number
  );
  // 属性声明
}

正确配置 tsconfig.json

为了让 TypeScript 识别自定义类型，我们需要在 tsconfig.json 中配置 typeRoots。这告诉 TypeScript 从哪里查找自定义类型定义：

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

使用自定义类型

现在，我们可以使用 Car 类作为 Vue 组件中 car prop 的类型：

<script lang="ts">
import { Car } from "@/types/common";

export default {
  props: {
    car: {
      required: true,
      type: Car
    }
  }
};
</script>