Vue。具有可选属性的类型化道具接口

我做了一个方法,希望在所有的Vue实例上都能使用,在出现错误时可以调用它,并渲染一个特定的错误组件。类似于 vue-error-page. 我正在使用typescript,现在我想确保组件被调用时使用正确的类型化道具,如果传递的道具有错别字,就会在编译时出错。

目前,我在shims.d.ts文件中加入了这个功能。

import Vue, {VueConstructor} from 'vue'

declare module 'vue/types/vue' {
    interface Vue {
        $error (component:VueConstructor<Vue>, props:unknown) : void;
    }
}

这让我可以这样调用我的插件 传递的对象与ErrorPage组件的props定义一致。

import Vue from "vue";
import ErrorPage from "./views/ErrorPage.vue";
export default Vue.extend({
  mounted() {
    this.$error(ErrorPage, { errorTitle: "Could not load the page" });
  }
});

虽然这样做是可行的,但我希望在编译时出现错误 如果props与组件的期望值不符的话

所以我想我应该像这样修改shims.d.ts。

declare module 'vue/types/vue' {
    interface Vue {
        $error<Props> (component:ExtendedVue<Vue, unknown, unknown, unknown, Props>, props:Props) : void;
    }
}

现在,当道具对象不匹配时,我就会得到编译时错误。然而,当我没有传递可选属性时,我也会得到错误。我的ErrorPage组件看起来像这样。

import Vue from "vue";
export default Vue.extend({
  name: "Error",
  props: {
    errorTitle: {
      type: String,
      required: true,
      default: "Error"
    },
    errorDescription: {
      type: String,
      required: false,
      default:
        "Something went wrong."
    }
  }
});

如果我没有传递错误描述(errorDescription),我就不会得到错误。这就是我想达到的目的。我希望能够做以下事情。

// Should compile and does right now.
this.$error(ErrorPage, {errorTitle: "Oops", errorDescription: "Something went wrong" });

// Should compile and does not right now. Fails with error:
// Argument of type '{ errorTitle: string; }' is not assignable to parameter of type '{ errorTitle: string; errorDescription: string; }'.
// Property 'errorDescription' is missing in type '{ errorTitle: string; }' but required in type '{ errorTitle: string; errorDescription: string; }'."
this.$error(ErrorPage, {errorTitle: "Oops" });

TL;DR 问题:

我如何使我的方法调用类型安全,并将props作为参数,同时能够省略可选的属性?我能够改变shims.d.ts和ErrorPage组件。

解决方案:

即使你把它标记为不需要,类型脚本类型仍然是 String 因此,你需要在调用方法时传递它。

你可以试试这个(我还没有测试是否有效)

使用一个别名来声明一个可空的类型。

type ErrorDescriptionType = String | undefined | null

然后将此作为 errorDescription

errorDescription: {
  type: Object as () => ErrorDescriptionType,
}

给TA打赏
共{{data.count}}人
人已打赏
解决方案

当我试图更新它时,PIP说它是最新的,但随后它就不是了。

2022-5-11 15:00:36

解决方案

GET http:/0.0.0.0:8080index.html?age=8&rel= 404 (Object Not Found)

2022-5-11 15:00:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索