This Crazy Syntax Lets You Get An Array Element's Type
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
![Matt Pocock](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmatt-pocock.eb3a12a3.jpg&w=96&q=75)
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 | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; ... 266 more ...; onTransitionEndCapture?: 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; ... 264 more ...; onTransitionEndCapture?: 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; ... 264 more ...; onTransitionEndCapture?: 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'.2322Type '{ disabled?: boolean | undefined; form?: string | undefined; formAction?: string | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; ... 266 more ...; onTransitionEndCapture?: 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; ... 264 more ...; onTransitionEndCapture?: 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; ... 264 more ...; onTransitionEndCapture?: 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.7006Parameter '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 ); }}
/>;
<ButtonOrLink
as ="button"
onClick ={(e ) => {
console .log (e ); }}
/>;
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 ); }}
/>;
<ButtonOrLink
as ="a"
onClick ={(e ) => {
console .log (e ); }}
/>;
Share this article with your friends
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.
Is TypeScript just a linter? No, but yes.
It's a massive ship day. We're launching a free TypeScript book, new course, giveaway, price cut, and sale.
Learn why the order you specify object properties in TypeScript matters and how it can affect type inference in your functions.