Extending Types

Estimated reading time: 2 minutes

Kita Html's type system can be extended to support custom elements, custom attributes, or both.

Custom elements

Declare new entries in JSX.IntrinsicElements to add custom HTML elements with typed attributes.

declare global {
  namespace JSX {
    interface interface JSX.IntrinsicElementsIntrinsicElements {
      'user-card': interface JSX.HtmlTagHtmlTag & {
        'user-id': number
        children: stringchildren: string
      }
    }
  }
}

const const html: JSX.Elementhtml = <JSX.IntrinsicElements['user-card']: JSX.HtmlTag & {
    'user-id': number;
    children: string;
}
user-card 'user-id': numberuser-id={42}>Arthur</JSX.IntrinsicElements['user-card']: JSX.HtmlTag & {
    'user-id': number;
    children: string;
}
user-card>

<user-card user-id="42">Arthur</user-card>

Capitalized tags are components

JSX interprets capitalized tags as components. Use lowercase custom element names for intrinsic elements. When the tag name cannot be written directly in JSX, use <tag of="..."> instead.

declare global {
  namespace JSX {
    interface interface JSX.IntrinsicElementsIntrinsicElements {
      JSX.IntrinsicElements.Example: HtmlTagExample: interface JSX.HtmlTagHtmlTag
    }
  }
}

const const html: JSX.Elementhtml = <Example />Cannot find name 'Example'.

Custom attributes on all elements

Extend the HtmlTag interface to add attributes to every native HTML element.

declare global {
  namespace JSX {
    interface interface JSX.HtmlTagHtmlTag {
      'data-testid'?: string
    }
  }
}

const const html: JSX.Elementhtml = <JSX.IntrinsicElements.div: JSX.HtmlTagdiv JSX.HtmlTag['data-testid']?: string | undefineddata-testid="header">content</JSX.IntrinsicElements.div: JSX.HtmlTagdiv>

<div data-testid="header">content</div>

Allow any tag and attribute

If you need to bypass type checking entirely, add a triple-slash directive to your src/kita.d.ts file. This is not recommended for production code.

Without the unrestricted type extension, unknown tags are rejected:

const const html: JSX.Elementhtml = <myrandomtag myrandom-attribute="value" />Property 'myrandomtag' does not exist on type 'JSX.IntrinsicElements'.

Add @kitajs/html/all-types to allow any tag and attribute:

/// <reference types="@kitajs/html/all-types" />

const const html: JSX.Elementhtml = <IntrinsicElements[string]: anymyrandomtag myrandom-attribute: stringmyrandom-attribute="value" />

<myrandomtag myrandom-attribute="value"></myrandomtag>

#Extending Types

#Custom elements

#Custom attributes on all elements

#Allow any tag and attribute

Extending Types

Custom elements

Custom attributes on all elements

Allow any tag and attribute