我在应用程序中使用打字稿，但发现react-redux出现了一些问题。 import React, { Component } from 'react'行报告了一个问题，由于我是打字稿和Redux的新手，所以我对此一无所知。我应该怎么做或应该在代码中的什么地方进行修改？
我从此处获取了一个轮播示例代码：https://reactstrap.github.io/components/carousel/
使用typescript @ 3.2.2，react @ 16.7.0，react-redux @ 6.0.0构建的应用程序。 CarouselComp.tsx
import React, { Component } from 'react';
import {
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption
} from 'reactstrap';
const items = [
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 1',
caption: 'Slide 1'
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 2',
caption: 'Slide 2'
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 3',
caption: 'Slide 3'
}
];
class Example extends Component {
constructor(props) {
super(props);
this.state = { activeIndex: 0 };
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this);
}
onExiting() {
this.animating = true;
}
onExited() {
this.animating = false;
}
next() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({ activeIndex: nextIndex });
}
previous() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
this.setState({ activeIndex: nextIndex });
}
goToIndex(newIndex) {
if (this.animating) return;
this.setState({ activeIndex: newIndex });
}
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous}
>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
);
}
}
export default Example;
容器使用react组件，该组件在生产中应渲染图像滑块。它会产生错误，请参见下文。
错误消息：
Severity Code Description Project File Line Suppression State
Error TS1259 (TS) Module '"C:/Users/c/Source/Repos/WebApplication6/ClientApp/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 1 Active
Error TS7006 (TS) Parameter 'newIndex' implicitly has an 'any' type. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project) C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 59 Active
Error TS7006 (TS) Parameter 'props' implicitly has an 'any' type. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project) C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 29 Active
Error TS2339 (TS) Property 'activeIndex' does not exist on type 'Readonly<{}>'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 49 Active
Error TS2339 (TS) Property 'activeIndex' does not exist on type 'Readonly<{}>'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 49 Active
Error TS2339 (TS) Property 'activeIndex' does not exist on type 'Readonly<{}>'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 55 Active
Error TS2339 (TS) Property 'activeIndex' does not exist on type 'Readonly<{}>'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 55 Active
Error TS2339 (TS) Property 'activeIndex' does not exist on type 'Readonly<{}>'. C:\Users\child\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 65 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 40 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 44 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 48 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 54 Active
Error TS2339 (TS) Property 'animating' does not exist on type 'Example'. C:\Users\c\Source\Repos\WebApplication6\ClientApp (tsconfig or jsconfig project), WebApplication6 C:\Users\c\Source\Repos\WebApplication6\ClientApp\src\components\CarouselComp.tsx 60 Active
我尝试遵循不同的指南，并查找示例实现，但是无法解决这些问题。我不理解打字稿编译器的错误消息：