Question

我使用Typescript

在React中编写了一个组件

这里我有一个界面，其中包含我将使用的所有道具的类型。

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>
}

问题是其中一个道具是回调函数，如

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

如何在TableProps界面中声明handleDelete的类型？

Answer 1

如何在TableProps界面中声明handleDelete的类型？

在下面添加

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

如何在Props中指定函数的类型

1 个答案: