CODEWITHSUNDEEP
typescript
Knows Not Much
Knows Not Much

Reputation: 31546

How to specify the type of a function in Props

I have written a component in React using Typescript

Here I have an interface which contains the types of all the props I will be using.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Task } from './Models';

export class TaskTable extends React.Component<TableProps, any> {
   constructor(props: TableProps){
      super(props);
   }
   render() : JSX.Element {
      console.log('came inside render method');
      return (
         <div>
            {this.props.taskList.map((t: Task, index: number) => 
               <div key={t.taskid}>
                  <span>{t.taskvalue}</span>
                  <button onClick={this.props.handleDelete(index)}>Delete</button>
               </div>
            )}
         </div>
      );
   }
}

interface TableProps {
   taskList: Array<Task>
}

The problem is that one of the props is a callback function like

<TaskTable taskList=[{taskid: 1, taskvalue: 'foo'}] handleDelete={this.handleDelete} />

How do I declare the type of handleDelete in my TableProps interface?

Upvotes: 2

Views: 269

Answers (1)

basarat
basarat

Reputation: 275867

How do I declare the type of handleDelete in my TableProps interface?

Added below 🌹

interface TableProps {
   taskList: Array<Task>,
   handleDelete: (index: number) => void,
}

Upvotes: 3

Related Questions