Vue: типизированный интерфейс реквизита с дополнительными свойствами

Question

Я создал метод, который хочу, чтобы он был доступен во всех моих Vue экземплярах, который я могу вызвать в случае ошибки и отобразить определенный c компонент ошибки для этого сценария. Что-то вроде vue -error-page . Я использую машинопись, и теперь я хочу убедиться, что компонент вызывается с правильными реквизитами, чтобы получить ошибку времени компиляции, если в переданных реквизитах есть опечатка.

В настоящее время у меня есть это в шимме Файл .d.ts:

import Vue, {VueConstructor} from 'vue'

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

Что позволяет мне так называть свой плагин. Переданный объект соответствует определению реквизитов компонента ErrorPage:

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

Пока это работает, я хочу получить ошибку времени компиляции, если реквизиты не соответствуют ожиданиям компонента.

Поэтому я решил изменить 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, я не должен получить ошибку. Это то, что я пытаюсь сделать sh. Я хочу иметь возможность делать следующие вещи:

// 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 Вопрос:

Как я могу сделать тип вызова моего метода безопасным, используя в качестве аргумента реквизиты, и в то же время иметь возможность опустить необязательные свойства? Я могу изменить как shims.d.ts, так и компонент ErrorPage.

Answer 1

Даже если вы отметите его как необязательный, тип машинописного текста по-прежнему будет String, и вам нужно будет передать его при вызове метода.

Вы можете попробовать это (я не проверял, если это работает)

Объявите тип, который можно обнулять, используя псевдоним

type ErrorDescriptionType = String | undefined | null

И затем передайте его как тип для errorDescription

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