feat: add 0213-hard-vue-basice-props

Author: coderhyy

type-challenges/0213-hard-vue-basice-props/template.ts

@@ -0,0 +1,30 @@
+// 参考 https://github.com/type-challenges/type-challenges/issues/6557
+// 好难...
+type ClassToType<C> = C extends () => infer T // String/Number/Boolean
+  ? T
+  : C extends unknown[]
+  ? ClassToType<C[number]>
+  : C extends new (...args: any) => unknown // user defined constructors
+  ? InstanceType<C>
+  : never;
+
+// computed props
+type ComputedPropsType<P> = {
+  [key in keyof P]: P[key] extends { type: infer T }
+    ? ClassToType<T>
+    : {} extends P[key]
+    ? any
+    : ClassToType<P[key]>;
+};
+
+// computed value
+type ComputedValuesType<C> = {
+  [K in keyof C]: C[K] extends (...args: unknown[]) => infer R ? R : never;
+};
+
+declare function VueBasicProps<P, D, C, M>(options: {
+  props: P;
+  data: (this: ComputedPropsType<P>) => D;
+  computed: C & ThisType<D & ComputedPropsType<P>>;
+  methods: M & ThisType<D & ComputedValuesType<C> & M & ComputedPropsType<P>>;
+}): any;

type-challenges/0213-hard-vue-basice-props/test-cases.ts

@@ -0,0 +1,60 @@
+import type { Debug, Equal, Expect, IsAny } from "@type-challenges/utils";
+
+class ClassA {}
+
+VueBasicProps({
+  props: {
+    propA: {},
+    propB: { type: String },
+    propC: { type: Boolean },
+    propD: { type: ClassA },
+    propE: { type: [String, Number] },
+    propF: RegExp,
+  },
+  data(this) {
+    type PropsType = Debug<typeof this>;
+    type cases = [
+      Expect<IsAny<PropsType["propA"]>>,
+      Expect<Equal<PropsType["propB"], string>>,
+      Expect<Equal<PropsType["propC"], boolean>>,
+      Expect<Equal<PropsType["propD"], ClassA>>,
+      Expect<Equal<PropsType["propE"], string | number>>,
+      Expect<Equal<PropsType["propF"], RegExp>>
+    ];
+
+    // @ts-expect-error
+    this.firstname;
+    // @ts-expect-error
+    this.getRandom();
+    // @ts-expect-error
+    this.data();
+
+    return {
+      firstname: "Type",
+      lastname: "Challenges",
+      amount: 10,
+    };
+  },
+  computed: {
+    fullname() {
+      return `${this.firstname} ${this.lastname}`;
+    },
+  },
+  methods: {
+    getRandom() {
+      return Math.random();
+    },
+    hi() {
+      alert(this.fullname.toLowerCase());
+      alert(this.getRandom());
+    },
+    test() {
+      const fullname = this.fullname;
+      const propE = this.propE;
+      type cases = [
+        Expect<Equal<typeof fullname, string>>,
+        Expect<Equal<typeof propE, string | number>>
+      ];
+    },
+  },
+});