Para implementar un componente de clase React, las clases a extender son React.Component o React.PureComponent.
Estos son tipos genéricos en TypeScript que proporcionan una manera fácil de sustituir los tipos. Por ejemplo, una definición de tipo simplista para React.Component
se vería como:
123declaración de claseComponente<P};{propósito:P}tipografía
Puedes leer esta sintaxis en voz alta como «Componente de P» donde P será el tipo de utilería sustituido donde se hace referencia dentro de la definición de la clase. P puede ser cualquier nombre, no hay ninguna regla, pero una convención común para nombrar es usar T como prefijo, como TProps.
En el caso de React.Component, cada argumento genérico corresponde a los tipos de soporte y de estado respectivamente. No hay diferencias en el uso de TypeScript entre un componente normal o puro.
A continuación se presenta un componente de la cesta de la compra que proporciona una lista de productos con las cantidades deseadas. Los accesorios y el estado se describen como interfaces de TypeScript:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546interfaceProps{ products:string[];}interfaceState{ quantities:{[key:string]:number};}classShoppingBasketextendsReact. Componente<Props,Estado,} {defecto estáticoProps:Props={ productos:[]} estado:Sólo lectura<Estado,} {cantidades:esto.props.productos. reducir((acc, producto)={ { acc[producto]=1;return acc;},{})}render(){const{ productos }=esto.props;const{ cantidades }=este.estado;return(<div><ul};{productos.
tipografía
Fíjate en cómo tanto el interfaz de Props como el de State se especifican como los parámetros genéricos del tipo de clase. Ambos son opcionales y serán un objeto vacío ({}) por defecto. Al especificar un tipo, TypeScript es capaz de escribir fuertemente this.props y this.state.
La siguiente línea anota explícitamente el tipo de propiedad de clase estatal del componente:
1state:Readonly<State;={tipografía
Al escribir explícitamente la propiedad estatal, nos aseguramos de que el compilador arroje un error si el objeto de estado inicializado no coincide con la interfaz estatal. El uso del ayudante de tipos incorporado de sólo lectura asegura que TypeScript arrojará un error si intenta modificar este.state directamente.
La misma claridad se aplica a la propiedad de clase estática ShoppingBasket.defaultProps:
123 defaultProps_Props={ productos:[]}tipografía