模拟 vue3.0 rfcs `createComponent` api 中的`props`类型推导

摘要：中类型推导部分预期想实现的效果在中对应的类型是对应的类型是对应的类型是但是，我们想要实现的是转换成小写的所以我们写个泛型来转换预览链接定义的类型留个泛型是给复杂类型做兼容复杂的类型定义函数接收的类型最关键的一步根据输入的类型计算出来函

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 预览链接