摘要：中類型推導部分預期想實現的效果在中對應的類型是對應的類型是對應的類型是但是，我們想要實現的是轉換成小寫的所以我們寫個泛型來轉換預覽鏈接定義的類型留個泛型是給復雜類型做兼容復雜的類型定義函數接收的類型最關鍵的一步根據輸入的類型計算出來函

rfc 中類型推導部分 Type Inference

createComponent({
  props: {
    foo: {
      type: String,
      required: true
    },
    bar: {
      type: Number
    },
    boo: Boolean,
    options: (null as any) as { msg: string },
    requiredOptions: {
      type: (null as any) as { msg: string },
      required: true
    }
  } as const,
  setup(props) {
    props.foo; // string
    props.bar; // number | undefined
    props.boo; // boolean | undefined
    props.options; // {msg: string } | undefined
    props.requiredOptions; // {msg: string }
  }
});

在 ts 中

String對應的類型是StringConstructor

Number對應的類型是NumberConstructor

Boolean對應的類型是BooleanConstructor

但是，我們想要實現的是轉換成小寫的string | number | boolean

所以我們寫個泛型來轉換

type NormalizeType = T extends StringConstructor
  ? string
  : T extends NumberConstructor
  ? number
  : T extends BooleanConstructor
  ? boolean
  : T;

playground 預覽鏈接

type BuiltInType =
  | StringConstructor
  | NumberConstructor
  | BooleanConstructor
  | T;

留個泛型是給復雜類型做兼容
rfc 復雜的 prop 類型

type DefaultType = {
  [key: string]:
    | {
        type?: BuiltInType;
        require?: boolean;
      }
    | BuiltInType;
};

type ReflexType = {
  [key in keyof T]: T[key] extends { type: infer TYPE; required: true }
    ? NormalizeType
    : T[key] extends { type: infer TYPE }
    ? NormalizeType | undefined
    : NormalizeType | undefined
};

function createComponent>(props: {
  props: T;
  setup(props: ReflexType): any;
}) {}

type BuiltInType =
  | StringConstructor
  | NumberConstructor
  | BooleanConstructor
  | T;

type NormalizeType = T extends StringConstructor
  ? string
  : T extends NumberConstructor
  ? number
  : T extends BooleanConstructor
  ? boolean
  : T;

type ReflexType = {
  [key in keyof T]: T[key] extends { type: infer TYPE; required: true }
    ? NormalizeType
    : T[key] extends { type: infer TYPE }
    ? NormalizeType | undefined
    : NormalizeType | undefined
};

type DefaultType = {
  [key: string]: { type?: BuiltInType; require?: boolean } | BuiltInType;
};

function createComponent>(props: {
  props: T;
  setup(props: ReflexType): any;
}) {}

createComponent({
  props: {
    foo: {
      type: String,
      required: true
    },
    bar: {
      type: Number
    },
    boo: Boolean,
    options: (null as any) as { msg: string },
    requiredOptions: {
      type: (null as any) as { msg: string },
      required: true
    }
  } as const,
  setup(props) {
    props.foo;
    props.bar;
    props.boo;
    props.options;
    props.requiredOptions;
  }
});

playground 預覽鏈接