All Articles

Polymorphic Link/Button Components in React & TypeScript

Matt Pocock
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts.
import React from "react";

type ButtonOrLinkProps =
  | React.ButtonHTMLAttributes<HTMLButtonElement>
  | React.AnchorHTMLAttributes<HTMLAnchorElement>;

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if ("href" in props) {
    return <a {...props} />;
  }
  return <button {...props} />;
};
import React from "react";

type ButtonOrLinkProps =
  | React.ButtonHTMLAttributes<HTMLButtonElement>
  | React.AnchorHTMLAttributes<HTMLAnchorElement>;

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if ("href" in props) {
    return <a {...props} />;
  }
  return <button {...props} />;
Type '{ disabled?: boolean | undefined; form?: string | undefined; formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined; formEncType?: string | undefined; ... 283 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; } | { ...; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; ... 279 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
    Type '{ download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; ... 279 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
      Types of property 'type' are incompatible.
        Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'.
          Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.2322
Type '{ disabled?: boolean | undefined; form?: string | undefined; formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined; formEncType?: string | undefined; ... 283 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; } | { ...; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; ... 279 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
    Type '{ download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; ... 279 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
      Types of property 'type' are incompatible.
        Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'.
          Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.};
import React from "react";

type ButtonOrLinkProps =
  | React.ButtonHTMLAttributes<HTMLButtonElement>
  | AnchorPropsWithRequiredHref;

type AnchorPropsWithRequiredHref =
  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
    href: string;
  };

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if ("href" in props) {
    return <a {...props} />;
  }
  return <button {...props} />;
};
<ButtonOrLink href="/" onClick={(e) => {}} />;
Parameter 'e' implicitly has an 'any' type.7006
Parameter 'e' implicitly has an 'any' type.
import React from "react";

type ButtonOrLinkProps =
  | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
      as: "button";
    })
  | (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
      as: "a";
    });

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if (props.as === "a") {
    return <a {...props} />;
  }
  return <button {...props} />;
};
<ButtonOrLink
  as="a"
  href="/"
  onClick={(e) => {
    console.log(e);
               
(parameter) e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
  }}
/>;

<ButtonOrLink
  as="button"
  onClick={(e) => {
    console.log(e);
               
(parameter) e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  }}
/>;
import React from "react";

type ButtonOrLinkProps =
  | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
      as?: "button";
    })
  | (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
      as: "a";
    });

const ButtonOrLink = (props: ButtonOrLinkProps) => {
  if (props.as === "a") {
    return <a {...props} />;
  }
  return <button {...props} />;
};
<ButtonOrLink
  onClick={(e) => {
    console.log(e);
               
(parameter) e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  }}
/>;

<ButtonOrLink
  as="a"
  onClick={(e) => {
    console.log(e);
               
(parameter) e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
  }}
/>;
Matt's signature

Polymorphic Link/Button Components in React & TypeScript

share on blueskyshare on twittershare on linkedinshare on reddit

Cursor Rules for Better AI Development

Finding existing community .cursor/rules for TypeScript lacking, I'm sharing my own set to hopefully kickstart a discussion on what makes effective AI coding guidance. These rules focus purely on TypeScript language features, documentation, structure (like Result types), teaching the AI specific nuances (like noUncheckedIndexedAccess), and practical habits, rather than specific frameworks. I also distinguish between shareable, project-specific Workspace Rules (versioned in Git) and personalized Global Rules (living in your IDE) to tailor the AI to your individual style and workflow. You can download my current ruleset using the link in the original post.

Matt Pocock
Matt Pocock

Should You Declare Return Types?

Here's a quick .cursor/rules addition you can make for handling return types in TypeScript.

# Return Types

When declaring functions on the top-level of a module,
declare their return types. This will help future AI
assistants understand the function's purpose.

```ts
const myFunc = (): string => {
  return "hello";
};
```

One exception to this is components which return JSX.
No need to
Matt Pocock
Matt Pocock

TypeScript Announces Go Rewrite, Achieves 10x Speedup

TypeScript announced a full rewrite of TypeScript in Go. In testing, this rewrite has achieved a 10x speedup in some repositories - and up to 15x in others.

Matt Pocock
Matt Pocock

TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums

TypeScript 5.8's new erasableSyntaxOnly flag enforces pure type annotations by disabling enums, namespaces, and parameter properties.

Matt Pocock
Matt Pocock