React-如何用打字稿定义道具

时间:2019-11-24 22:15:40

标签: reactjs typescript

我有一个演示here

这是一个使用打字稿在React中简单的待办事项应用程序。

我正在尝试在打字稿中定义道具。

我在Todo组件中有一个接口,用于传入的道具

如果我尝试访问Todo组件中的文本,则会显示一条错误消息

Property 'text' does not exist on type 'string'.

如何使用打字稿正确定义道具

2 个答案:

答案 0 :(得分:2)

您正在将todo定义为字符串,但是您将其用作包含text属性作为字符串的对象。因此,您的道具定义应如下所示:

interface IProps {
  index: number,
  todo: { text: string }
}

答案 1 :(得分:1)

您需要使用界面来定义道具。看下面的例子:

isActive

<input matInput #inputSearch> @ViewChild('inputSearch', { static: false }) input: ElementRef; fromEvent(this.input.nativeElement, 'keyup') .pipe( filter((val: any) => val.target.value.length > 3), debounceTime(500), distinctUntilChanged(), switchMap((val: any) => this.userService.get(val.target.value)) ) .subscribe(data => { console.log(data); }); 是必需的,但不是{{1}}