Dado que React 16 ahora permite atributos DOM personalizados , traté de aprovechar esto en mi código Typescript:
import * as React from 'react'; <div className="page" size="A4"> </div>pero recibe este mensaje de error:
error TS2339: la propiedad 'tamaño' no existe en el tipo 'DetailedHTMLProps< HTMLAttributes< HTMLDivElement>, HTMLDivElement>'.
Este hilo sugiere hacer un module augmentation , así que lo intenté de esta manera:
import * as React from 'react'; declare module 'react' { interface HTMLProps<T> { size?:string; } }Mismo mensaje de error.
Finalmente, también traté de declarar la page como una nueva etiqueta HTML:
declare global { namespace JSX { interface IntrinsicElements { page: any } } } <page className="page" size="A4"> </page> Elimina el mensaje de error, pero el atributo de size se ignora por completo en el código compilado y termino con:
<page className="page"> </page> Idealmente, la última es mi solución preferida. Me gustaría usar el atributo personalizado de size junto con la etiqueta personalizada de la page .
tsconfig.js
{ "compilerOptions": { "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "allowSyntheticDefaultImports": true, "noUnusedLocals": false, "noUnusedParameters": false, "allowUnusedLabels": true, "allowUnreachableCode": true } }HTML admite el tipo de atributo data-* para atributos personalizados. Puedes leer más sobre esto aquí .
Definición y uso Los atributos data-* se utilizan para almacenar datos personalizados privados para la página o la aplicación.
Los atributos data-* nos brindan la capacidad de incrustar atributos de datos personalizados en todos los elementos HTML.
Los datos almacenados (personalizados) se pueden usar en el JavaScript de la página para crear una experiencia de usuario más atractiva (sin llamadas Ajax ni consultas a la base de datos del lado del servidor).
Los atributos data-* constan de dos partes:
- El nombre del atributo no debe contener letras mayúsculas y debe tener al menos un carácter después del prefijo "datos-".
- El valor del atributo puede ser cualquier cadena.
Nota: el agente de usuario ignorará por completo los atributos personalizados con el prefijo "data-".
En lugar de simplemente usar size="A4" , puede usar data-size="A4"
Ejemplo
<div className="page" data-size="A4"> // .... </div>El archivo de definición de tipo React (por defecto, index.d.ts cuando se inicia con create-react-app ) contiene una lista de todos los elementos HTML estándar, así como atributos conocidos.
Para permitir atributos HTML personalizados, debe definir su escritura. Hágalo expandiendo la interfaz HTMLAttributes :
declare module 'react' { interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> { // extends React's HTMLAttributes custom?: string; } }Pregunta posiblemente relacionada:
¿Cómo agrego atributos a elementos HTML existentes en TypeScript/JSX?
Si está utilizando componentes con estilo, puede hacerlo aún más simple:
const App = props => { return <StyledDiv version={2.0}>My custom div</StyledDiv> } type Custom = { version?: number } const StyledDiv = styled.div<Custom>` // styles `