Possible forwardRef solution

Author: mattpocock

src/08-advanced-patterns/72-as-prop-with-default.problem.tsx

@@ -10,7 +10,7 @@ export const Link = <T extends ElementType>(
   return <Comp {...rest}></Comp>;
 };
 
-// Should be a 'a' tag by default!
+// 1. Should be a 'a' tag by default!
 <Link href="/"></Link>;
 
 const Custom = (props: { thisIsRequired: boolean }) => {
@@ -22,6 +22,7 @@ const Custom = (props: { thisIsRequired: boolean }) => {
 // @ts-expect-error Property 'thisIsRequired' is missing
 <Link as={Custom} />;
 
+// 2. Should still give you autocomplete options!
 <Link
   as="button"
   onClick={(e) => {

src/08-advanced-patterns/72-as-prop-with-default.solution.tsx renamed to src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx

@@ -1,6 +1,9 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * This NEARLY works, but removes autocomplete for the 'as' prop.
+ */
 export const Link = <T extends ElementType = "a">(
   props: {
     as?: T;

src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Function overloads are another solution which work. We're getting
+ * closer to extreme verbosity, but it works!
+ *
+ * Though - the error at the bottom of the file becomes much
+ * harder to read.
+ */
+
+function Link<T extends ElementType>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+): React.ReactNode;
+function Link(props: ComponentPropsWithoutRef<"a">): React.ReactNode;
+function Link<T extends ElementType>(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;

src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx

@@ -1,16 +1,23 @@
-import { ComponentPropsWithoutRef, ElementType, forwardRef } from "react";
+import {
+  ComponentPropsWithoutRef,
+  ElementType,
+  JSXElementConstructor,
+  forwardRef,
+} from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = forwardRef(
-  <T extends ElementType = "a">(
-    props: {
-      as?: T;
-    } & ComponentPropsWithoutRef<T>,
-  ) => {
-    const { as: Comp = "a", ...rest } = props;
-    return <Comp {...rest}></Comp>;
-  },
-);
+function UnwrappedLink<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+>(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+const Link = forwardRef(UnwrappedLink);
 
 <Link href="/"></Link>;
 
@@ -30,8 +37,5 @@ const Custom = (props: { thisIsRequired: boolean }) => {
   }}
 ></Link>;
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;

src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx

@@ -1,7 +1,9 @@
 import {
   ComponentProps,
+  ComponentPropsWithRef,
   ComponentPropsWithoutRef,
   ElementType,
+  JSXElementConstructor,
   forwardRef,
   useRef,
 } from "react";
@@ -13,23 +15,28 @@ type FixedForwardRef = <T, P = {}>(
 
 const fixedForwardRef = forwardRef as FixedForwardRef;
 
-export const Link = fixedForwardRef(
-  <T extends ElementType = "a">(
-    props: {
-      as?: T;
-    } & ComponentProps<T>,
-  ) => {
-    const { as = "a", ...rest } = props;
-    const Comp = as as any;
-    return <Comp {...rest}></Comp>;
-  },
-);
-
-const Test = () => {
-  const ref = useRef<HTMLAnchorElement>(null);
-
-  return <Link as="a" href="/" ref={ref}></Link>;
-};
+type Constraint = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+
+type Props<
+  T extends Constraint,
+  P = ComponentProps<Constraint extends T ? "a" : T>,
+> = P;
+
+type Example = Props<"button">;
+
+function UnwrappedLink<T extends Constraint>(props: { as?: T } & Props<T>) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+const Link = fixedForwardRef(UnwrappedLink);
+
+<Link
+  href="/"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>>;
+  }}
+></Link>;
 
 const Custom = (props: { thisIsRequired: boolean }) => {
   return null;
@@ -40,18 +47,29 @@ const Custom = (props: { thisIsRequired: boolean }) => {
 // @ts-expect-error Property 'thisIsRequired' is missing
 <Link as={Custom} />;
 
-const ref = useRef<HTMLButtonElement>(null);
-
 <Link
   as="button"
   onClick={(e) => {
     type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
   }}
-  ref={ref}
 ></Link>;
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+const ref = useRef<HTMLAnchorElement>(null);
+const wrongRef = useRef<HTMLDivElement>(null);
+
+Link({
+  ref,
+});
+
+Link({
+  as: Custom,
+  thisIsRequired: true,
+});
+
+Link({
+  // @ts-expect-error
+  ref: wrongRef,
+});
+
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;