How to use Typescript with PrimeReact Steps component

Question

I'm new with typescript use PrimeReact Steps component.

I wonder how to correct type items to pass type checking?

import React, { useState, useRef } from 'react';
import { Steps } from 'primereact/steps';
import { Toast } from 'primereact/toast';

const StepsDemo = () => {
    const [activeIndex, setActiveIndex] = useState(1);
    const toast = useRef(null);
    const items = [
        {
            label: 'step 1',
            //@ts-ignore
            command: (event) => {
                //@ts-ignore
                toast.current.show({ severity: 'info', summary: 'step1', detail: event.item.label });
            }
        },
        {
            label: 'step 2',
            //@ts-ignore
            command: (event) => {
                //@ts-ignore
                toast.current.show({ severity: 'info', summary: 'step2', detail: event.item.label });
            }
        },
    ];

    return (
        <div>
            <Toast ref={toast}></Toast>

            <div className="card">

                <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
            </div>
        </div>
    );
}

export default StepsDemo

Please provide reproducible example. – captain-yossarian from Ukraine Aug 31 '22 at 06:54 — captain-yossarian from Ukraine, Aug 31 '22 at 06:54
@captain-yossarianfromUkraine please find above – Dmitriy_kzn Aug 31 '22 at 06:58 — Dmitriy_kzn, Aug 31 '22 at 06:58

Melloware · Accepted Answer · 2022-09-05T12:29:01.147

1

These are of type MenuItem here below is the correct Typescript def for your above example

import React, { useState, useRef } from 'react';
import { Steps } from 'primereact/steps';
import { Toast } from 'primereact/toast';
import { MenuItem, MenuItemCommandParams} from 'primereact/menuitem';

const StepsDemo = () => {
    const [activeIndex, setActiveIndex] = useState(1);
    const toast = useRef<Toast>(null);
    const items = [
  {
    label: "step 1",
    command: (event: MenuItemCommandParams) => {
      toast.current?.show({
        severity: "info",
        summary: "step1",
        detail: event.item.label,
      });
    },
  },
  {
    label: "step 2",
    command: (event: MenuItemCommandParams) => {
      toast.current?.show({
        severity: "info",
        summary: "step2",
        detail: event.item.label,
      });
    },
  },
] as MenuItem[];

    return (
        <div>
            <Toast ref={toast}></Toast>

            <div className="card">

                <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
            </div>
        </div>
    );
}

export default StepsDemo

edited Sep 05 '22 at 12:29

answered Sep 03 '22 at 11:55

Melloware

10,435
2
32
62

@Mellware thank you but still recieve error on toast.current TS2531: Object is possibly 'null'. Doy you now how to fix it? Thank you in advance – Dmitriy_kzn Sep 04 '22 at 18:02
I updated my code above to use the proper `toast.current?.show` – Melloware Sep 04 '22 at 19:09
Thank you, but now is Error TS2339: Property 'show' does not exist on type 'never'. How it can be fixed? – Dmitriy_kzn Sep 05 '22 at 07:25
You need to have this `const toast = useRef(null);` you need to tell the `ref` what object its holding so TypeScript can find the `show` method. You really need to learn some basic TypeScript. I just updated my code above to be complete sample of your code. – Melloware Sep 05 '22 at 12:27

How to use Typescript with PrimeReact Steps component

1 Answers1