Home > Blockchain >  Type for basic HTML tags?
Type for basic HTML tags?

Time:06-03

I have an exported type called Tags that defines available tags for some components:

export type Tags =
  | 'div'
  | 'article'
  | 'section'
  | 'aside'
  | 'nav'
  | 'figure'
  | 'main'
  | 'header'
  | 'footer';

Obviously, this is something that I've written myself and have to update anytime I want to add a tag; does something like this exist already? Similar to React's HTMLAttributeAnchorTarget?

CodePudding user response:

Looking through React's index.d.ts, I see an interface ReactHTML that looks to contain many (and only) built-in HTML tags as keys. The values of the object type are DetailedHTMLFactorys, but you can ignore those and just look at the keys.

import { ReactHTML } from 'react';

type BuiltInHTMLTag = keyof ReactHTML;
const div: BuiltInHTMLTag = 'div'; // OK
const nope: BuiltInHTMLTag = 'doesntexist'; // Error
  • Related