Vue Component の PropsDefinitionからpropsの型をrequired/optional付きで導出するやつ

test.ts

import { RecordPropsDefinition } from "vue/types/options";

// Propsの定義から、required指定されたprop名を抽出する
// const a = { foo: String, bar: { type: String, required: true as true }, baz: { type: String, required: false } }; の時、
// RequiredPropNames<typeof a> は "bar"
export type RequiredPropNames<PD extends RecordPropsDefinition<any>> = ({
  [K in keyof PD]: PD[K] extends { required: true } ? K : never
})[keyof PD];

// Propsの定義から、required指定されていないprop名を抽出する
// const a = { foo: String, bar: { type: String, required: true as true }, baz: { type: String, required: false } }; の時、
// OptionalPropNames<typeof a> は "foo" | "baz"
export type OptionalPropNames<PD extends RecordPropsDefinition<any>> = {
  [K in keyof PD]: PD[K] extends { required: true } ? never : K
}[keyof PD];

// Propsの定義から、外部公開用のPropsの型を導出する
// const a = { foo: String, bar: { type: String, required: true as true }, baz: { type: String, required: false } }; の時、
// OuterProps<typeof a> は { foo?: string | undefined, bar: string, baz?: string | undefined }
export type OuterProps<
  PropDefs extends RecordPropsDefinition<any>
> = PropDefs extends RecordPropsDefinition<infer P>
  ? { [K in RequiredPropNames<PropDefs> & keyof P]: P[K] } &
      { [K in OptionalPropNames<PropDefs> & keyof P]?: P[K] }
  : never;


  
const props = {
  foo: String,
  bar: { type: String, required: true as true },  // true as true って書かないとダメなのが悲しいところ
  baz: { type: String, required: false }
};

// { foo?: string | undefined, bar: string, baz?: string | undefined }
type Props = OuterProps<typeof props>;