How to update VueTypes.extend?

[fcsbr]

Library version 5.1.1

Vue.js version 3.3.8

Question How can I update propTypes.extend to not get [VueTypes warn]: VueTypes.extend is deprecated. ...?

import type { StyleValue, VNodeChild } from 'vue'
import type { VueTypeValidableDef, VueTypesInterface } from 'vue-types'
import { createTypes } from 'vue-types'

export type VueNode = VNodeChild | JSX.Element

type PropTypes = VueTypesInterface & {
  readonly style: VueTypeValidableDef<StyleValue>
  readonly VNodeChild: VueTypeValidableDef<VueNode>
  // readonly trueBool: VueTypeValidableDef<boolean>;
  readonly stringNumber: VueTypeValidableDef<string | number>
  readonly Date: VueTypeValidableDef<number | Date>
}

const propTypes = createTypes({
  func: undefined,
  bool: undefined,
  string: undefined,
  number: undefined,
  object: undefined,
  integer: undefined,
}) as PropTypes

propTypes.extend([
  {
    name: 'style',
    getter: true,
    type: [String, Object],
    default: undefined,
  },
  {
    name: 'stringNumber',
    getter: true,
    type: [String, Number],
    default: undefined,
  },
  {
    name: 'Date',
    getter: true,
    type: [Number, Date],
    default: undefined,
  },
  {
    name: 'VNodeChild',
    getter: true,
    type: undefined,
  },
])
export { propTypes }

[dwightjack]

Hi, VueTypes.extend is deprecated because there are simpler and more type-friendly methods to extend or create new prop types.

In your case, to keep the namespacing, you can use a class object:

import type { StyleValue, VNodeChild } from "vue";

export type VueNode = VNodeChild | JSX.Element;

import { toValidableType } from "vue-types";

export class propTypes {
  static get style() {
    return toValidableType<StyleValue>("style", {
      type: [String, Object],
    });
  }

  static get stringNumber() {
    return toValidableType<string | number>("stringNumber", {
      type: [String, Number],
    });
  }

  static get date() {
    return toValidableType<Date | number>("date", {
      type: [Date, Number],
    });
  }

  static get VNodeChild() {
    return toValidableType<VueNode>("VNodeChild", {
      type: undefined,
    });
  }
}

[fcsbr]

Great! Tks a lot @dwightjack