Steps component PrimeReact how type in tsx

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

Answer 1

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

import { MenuItem, MenuItemCommandParams} from 'primereact/menuitem';

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[];