typescript questions

[omerbrandis]

Hello,

I'm trying to use this wonderful library with typescript. encountered the following errors on build :

1. tried following https://github.com/akiran/react-slick/blob/master/examples/CustomArrows.js function SamplePrevArrow(props) { .... resulted in : Type error: Parameter 'props' implicitly has an 'any' type.

I worked around it by explicitly writing props:Any. should i have instead written interface MyInt { className style onClick } SamplePrevArrow(props:MyInt) ? ( but that raises the question of which types must i have used for each variable ?)

2. <Slider {...settings} style={{display:"inline-block",width:"100px",height:"200px",border:"1px solid black"}} > led to Type error: No overload matches this call. Overload 1 of 2, '(props: Settings | Readonly): Slider', gave the following error. Type '{ children: Element[]; style: { display: string; width: string; height: string; border: string; }; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; arrows: boolean; prevArrow: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error. Type '{ children: Element[]; style: { display: string; width: string; height: string; border: string; }; dots: boolean; infinite: boolean; speed: number; slidesToShow: number; slidesToScroll: number; arrows: boolean; prevArrow: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

if possible, I would also greatly appreciate some tutoring regarding how i could figure this out for my self. ( teach a man to fish and all that) :-)

[MonicaPArroyo]

Hi! I made it work installing the types npm install @types/react-slick and then using it like this:

import Slider, { CustomArrowProps } from 'react-slick';
...
const PrevArrow = (props: CustomArrowProps) => {
...

If you look at the interface CustomArrowProps, you will find something like this:

export interface CustomArrowProps {
    className?: string | undefined;
    style?: React.CSSProperties | undefined;
    onClick?: React.MouseEventHandler<any> | undefined;
    currentSlide?: number | undefined;
    slideCount?: number | undefined;
}

Hope it helps!

[omerbrandis]

Thanks Monica. Can you please tell me how to find this by myself next time ?

Omer.

[MonicaPArroyo]

Well... When I found the same issue about types on a third-party package I asked Chat-GPT, haha. It told me to install the @types package. Since then, when I don't know the types of the props i research for the @types Package. Some times the packages already have the types on the main pakage, but it depends of the author. When I already have the types installed, I only write the name that I guess they used to describe the types. In this case I wrote ArrowProps and Visual Studio found the CustomArrowProps for me. I hope I've explained myself well. If not, let me know ;)