Estoy tratando de integrar TypeScript en nuestro proyecto y hasta ahora me topé con un problema con la biblioteca de componentes con estilo .
Considere este componente
import * as React from "react"; import styled from "styled-components/native"; import { TouchableOpacity } from "react-native"; // -- types ----------------------------------------------------------------- // export interface Props { onPress: any; src: any; width: string; height: string; } // -- styling --------------------------------------------------------------- // const Icon = styled.Image` width: ${(p: Props) => p.width}; height: ${(p: Props) => p.height}; `; class TouchableIcon extends React.Component<Props> { // -- default props ------------------------------------------------------- // static defaultProps: Partial<Props> = { src: null, width: "20px", height: "20px" }; // -- render -------------------------------------------------------------- // render() { const { onPress, src, width, height } = this.props; return ( <TouchableOpacity onPress={onPress}> <Icon source={src} width={width} height={height} /> </TouchableOpacity> ); } } export default TouchableIcon; La siguiente línea arroja 3 errores, que son de la misma naturaleza <Icon source={src} width={width} height={height} />
Escriba {fuente: cualquiera; ancho: cadena; height: string;} no se puede asignar al tipo IntrinsicAttributes... Falta la propiedad 'onPress' en el tipo {fuente: cualquiera; ancho: cadena; altura: cadena;}
No estoy del todo seguro de qué es esto y cómo solucionarlo, ¿debo declararlos de alguna manera en Icon o algo por el estilo?
EDITAR: mecanografiado v2.6.1 , componentes con estilo v2.2.3
Ha habido algunos desarrollos recientes y con una nueva versión de Typescript (p. ej., 3.0.1) y componentes con estilo (p. ej., 3.4.5) no hay necesidad de un ayudante independiente. Puede especificar la interfaz/tipo de sus accesorios para componentes con estilo directamente.
interface Props { onPress: any; src: any; width: string; height: string; } const Icon = styled.Image<Props>` width: ${p => p.width}; height: ${p => p.height}; `; y si quieres ser más preciso e ignorar el onPress
const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>` width: ${p => p.width}; height: ${p => p.height}; `;Esta respuesta está desactualizada, la respuesta más actual está aquí: https://stackoverflow.com/a/52045733/1053772
Por lo que puedo decir, no hay una forma oficial (¿todavía?) de hacer esto, pero puedes resolverlo con un poco de truco. Primero, cree un archivo withProps.ts con el siguiente contenido:
import * as React from 'react' import { ThemedStyledFunction } from 'styled-components' const withProps = <U>() => <P, T, O>(fn: ThemedStyledFunction<P, T, O>) => fn as ThemedStyledFunction<P & U, T, O & U> export { withProps } Ahora, dentro de sus archivos .tsx , úselo así:
// ... your other imports import { withProps } from './withProps' export interface IconProps { onPress: any; src: any; width: string; height: string; } const Icon = withProps<IconProps>()(styled.Image)` width: ${(p: IconProps) => p.width}; height: ${(p: IconProps) => p.height}; `;Y deberías estar listo para irte. Definitivamente no es lo ideal y, con suerte, pronto habrá una manera de proporcionar genéricos a los literales de plantilla en TS, pero supongo que por ahora esta es su mejor opción.
El crédito se otorga donde se debe el crédito: copié esto desde aquí
componente con estilo
import styled from 'styled-components'; interface Props { height: number; } export const Wrapper = styled.div<Props>` padding: 5%; height: ${(props) => props.height}%; `;índice
import React, { FunctionComponent } from 'react'; import { Wrapper } from './Wrapper'; interface Props { className?: string; title: string; height: number; } export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => ( <Wrapper height={height} className={className}> {title} </Wrapper> );Deberia trabajar