[英]React-Redux TypeScript Errors
Tryign to implement TypeScript with React/Redux and I'm running into some issues with my Types. 尝试使用React / Redux实现TypeScript,我的Types遇到了一些问题。
I have these types: 我有以下几种类型:
export interface IAuthState {
isSignedIn: Boolean | null;
userId: string | null;
}
export interface IStream {
id: string;
title: string;
description: string;
userId: string;
}
export interface IStreamState {
streams: { [index: string]: IStream };
}
Then I have two components: 然后,我有两个部分:
interface IStreamsProps {
fetchStreams: () => void;
streams: IStreamState;
currentUserId: String | null;
isSignedIn: Boolean | null;
auth: IAuthState;
}
class StreamsList extends Component<IStreamsProps, IAppState> {
// Error: The Property Map does not exist on type IStreamState
renderList() {
return this.props.streams.map((stream: IStream) => (// CODE)
}
}
const mapStateToProps = (state: IAppState) => {
return {
streams: Object.values(state.streams),
currentUserId: state.auth.userId,
isSignedIn: state.auth.isSignedIn
};
};
export default connect(
mapStateToProps,
{ fetchStreams }
)(StreamsList);
Then I have another similar component: 然后我有另一个类似的组件:
const mapStateToProps = (state: IAppState, ownProps: HomeProps) => {
return {
//Error: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'IStreamState'
stream: state.streams[ownProps.match.params.id]
};
};
export default connect(
mapStateToProps,
null
)(StreamEdit);
How do I solve these two errors: 我该如何解决这两个错误:
Error 1: The Property Map does not exist on type IStreamState 错误1:IStreamState类型上不存在属性映射
Error 2: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'IStreamState' 错误2:元素隐式具有“ any”类型,因为类型“ any”的表达式不能用于索引类型“ IStreamState”
You incorrectly defined IStreamState
. 您错误地定义了
IStreamState
。 Look closely. 仔细看。 You've defined it as an object
您已将其定义为对象
export interface IStreamState {
streams: { [index: string]: IStream }[];
}
// equivalent declaration using type:
export type IStreamState = {
streams: { [index: string]: IStream }[]
}
I'm sure you mean to type it as just an array, as so: 我确定您的意思是将其键入为仅数组,如下所示:
export type IStreamState = { [index: string]: IStream }[]
EDIT: While not directly related to your question, you need to be careful with your types. 编辑:虽然与您的问题没有直接关系,但是您需要小心自己的类型。 I noticed you used
IAppState
in two different places. 我注意到您在两个不同的地方使用了
IAppState
。 The class declarations are for props and local state. 类声明适用于道具和当地状态。
IAppState
appears to be for your redux store. IAppState
似乎适用于您的Redux存储。
// the second generic argument is for `this.state`
class StreamsList extends Component<IStreamsProps, IAppState> {
EDIT2: Defining both arguments in a class is optional. EDIT2:定义一个类中的两个参数是可选的。 If you leave the second one out, it defaults to
{}
for you. 如果您省略第二个,则默认为
{}
。
It's impossible to be 100% sure as to why you're having that issue in your mapStateToProps
, because I don't know what IAppState
looks like. 无法确定您为什么在
mapStateToProps
遇到该问题,因为我不知道IAppState
是什么样子。 Just go double back and confirm your typing for state.streams
is exactly what you expect. 只需再次返回并确认您键入
state.streams
就是您所期望的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.