typescript - 视觉 : Typed props interface with optional properties

Question

我创建了一个我希望在所有 Vue 实例上都可用的方法，我可以在出现错误时调用该方法并呈现特定的错误组件。类似于 vue-error-page .我正在使用 typescript ，现在我想确保使用正确类型化的 props 调用该组件，以便在传递的 props 中出现拼写错误时出现编译时错误。

目前我在 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" });
  }
});

虽然这是有效的，但如果 Prop 与组件的预期不匹配，我想得到一个编译时错误。

所以我想我会像这样更改 shims.d.ts:

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

现在，当 props 对象不匹配时，我会收到编译时错误。但是，当我不传入可选属性时，我也会出错。我的 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 组件。

Answer 1

即使您将其标记为不需要， typescript 类型仍然是 String，因此您需要在调用该方法时传递它。

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

声明一个可以为空的类型，使用别名

类型 ErrorDescriptionType = String |未定义 |空

然后将其作为 errorDescription 的类型传递给

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