reactjs - Hur TypeScript hanterar `data-*` attribut i JSX?

Tänk på detta:

import type { JSX } from 'react';

const MyComponent = (): JSX.Element => (
  <div data-attr="bar">Foo</div>
);

Detta ger ingen TypeScript-fel vilket förväntas, men jag kan inte hitta typer för data-* egna attribut, något som

interface *** {
  // other attributes...
  `data-${string}`: string
}

Kan någon snälla berätta för mig var i d.ts-filerna detta definieras?

Svar #1

Det är en del av Typescript-specifikationen för JSX, enligt dokumentationen:

Obs: Om ett attributnamn inte är en giltig JS-identifikator (som ett data-* attribut) anses det inte vara ett fel om det inte finns i elementets attributtyp.

Det gäller också för alla egenskaper med ett bindestreck - inuti, till exempel är detta giltig JSX för Typescript:

<div a-custom-attribute="hello"></div>

Relaterade artiklar