typescript-tips

Cory House (@housecor) - October 31, 2022 at 7:39 AM

TypeScript tip: Sometimes a type’s name conflicts with an existing identifier.

When this happens, I alias the type’s name:

import { Link as LinkType } from “./types”; pic.twitter.com/uVENVOqUee

import { Link } from "react-router-dom"; // Aliasing Link type to avoid conflict with React Router's Link import { Link as LinkType } from "./types/Link.types"; type NavProps = { links: LinkType[]; }; export default function Nav({ links }: NavProps) { return ( <nav> <ul> {links.map((link) => ( <li key={link.id}> <Link to={link.url}>{link.text}</Link> </li> ))} </ul> </nav> ); }

Tweet link