Unable to apply typescript interface correctly.

interface SizeProp {
xs?: TwStyle
sm?: TwStyle
md?: TwStyle
lg?: TwStyle
xl?: TwStyle
}

const sizeStyles: SizeProp = {
xs: tw`h-4 text-xs`,
sm: tw`h-6 text-sm`,
md: tw`h-8 text-base`,
lg: tw`h-10 text-lg`,
xl: tw`h-12 text-xl`,
}
interface SizeProp {
xs?: TwStyle
sm?: TwStyle
md?: TwStyle
lg?: TwStyle
xl?: TwStyle
}

const sizeStyles: SizeProp = {
xs: tw`h-4 text-xs`,
sm: tw`h-6 text-sm`,
md: tw`h-8 text-base`,
lg: tw`h-10 text-lg`,
xl: tw`h-12 text-xl`,
}
any work around this? I would like to use twin.macro in a good typescript way. Like trying to apply interface
({ size = 'md' }: ButtonProp) => sizeStyles[size],
({ size = 'md' }: ButtonProp) => sizeStyles[size],
Element implicitly has an 'any' type because expression of type 'string | TwStyle' can't be used to index type 'SizeProp'.
No index signature with a parameter of type 'string' was found on type 'SizeProp'.ts(7053)
Type 'TwStyle' cannot be used as an index type.
Element implicitly has an 'any' type because expression of type 'string | TwStyle' can't be used to index type 'SizeProp'.
No index signature with a parameter of type 'string' was found on type 'SizeProp'.ts(7053)
Type 'TwStyle' cannot be used as an index type.
1 Reply
Joao
Joao•2y ago
TypeScript in Tailwind?? 😱
Want results from more Discord servers?
Add your server