TSLint Error "Property 'carousel' does not exist" on Antd Carousel in ReactJs

Question

I am using the Ant Design Carousel component in React & TypeScript. The Carousel component has the methods "next" and "prev" on it.

The code runs, however TSLint is highlighting "carousel" and throwing this error "Property 'carousel' does not exist on type 'StyledCarousel'.ts(2339)". Is there some typing declaration I am missing?

Ant Design Docs Here

import React from 'react';

import { Carousel, Icon } from 'antd';

class StyledCarousel extends React.Component {

  constructor(props: any) {
    super(props);
    this.state = {};

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }

  public next = () => {
    this.carousel.next();
  };

  public previous = () => {
    this.carousel.prev();
  };

  public render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };

    return (

      <div>

        <Icon type="left-circle" onClick={this.previous} />

        <Carousel ref={node => (this.carousel = node)} {...props}>

          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>

        </Carousel>

        <Icon type="right-circle" onClick={this.next} />

      </div>

    );
  }
}

export default StyledCarousel;

Answer 1

You didn't defined type for field carousel in your component, so TSLint don't know it and also don't know methods of object assigned to it. You should define it in class like this:

private carousel: React.RefObject<Carousel>;

On the other hand you should also consider to use new syntax for creating refs in React components and use refField.current for accessing to referenced component.

Finally you're component should look like this:

import React from 'react';

import { Carousel, Icon } from 'antd';

class StyledCarousel extends React.Component {
  private carousel: React.RefObject<Carousel>;

  constructor(props: any) {
    super(props);

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }

  public next = () => {
    if (this.carousel.current)
      this.carousel.current.next();
  };

  public previous = () => {
    if (this.carousel.current)
      this.carousel.current.prev();
  };

  public render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };

    return (

      <div>

        <Icon type="left-circle" onClick={this.previous} />

        <Carousel ref={this.carousel} {...props}>

          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>

        </Carousel>

        <Icon type="right-circle" onClick={this.next} />

      </div>

    );
  }
}

export default StyledCarousel;

You can read more in this answer or in Refs docs .

Answer 2

this works for me

import React from 'react';

import { Carousel} from 'antd';
import { CarouselRef } from 'antd/lib/carousel/index';
import { LeftOutlined, RightOutlined} from '@ant-design/icons';

class StyledCarousel extends React.Component {
  private carousel: React.RefObject<CarouselRef>;

  constructor(props: any) {
    super(props);

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }

  public next = () => {
    if (this.carousel.current)
      this.carousel.current.next();
  };

  public previous = () => {
    if (this.carousel.current)
      this.carousel.current.prev();
  };

  public render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };
    return (
      <div>
        <LeftOutlined  onClick={this.previous}/>
        <Carousel ref={this.carousel} {...props}>
          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>
        </Carousel>
        <RightOutlined  onClick={this.next}/>
      </div>
    );
  }
}

export default StyledCarousel;