类型"字符串"上不存在。ts(2339)

Question

我新的typescript，在这里我一直在添加ts到我的反应项目，我得到这种错误:属性'标识符'不存在类型'string'.ts(2339)，代码工作，因为它是，但当添加ts它给出了错误，我可以这样解决它:currentBroker: "" as any,但那不是正确的方式。有什么帮助/建议吗?

我代码:

const initialSelectionState = {
currentBroker: "",
};
export function selectionReducer(
state = initialSelectionState,
action: selectionReducerAction
) {
switch (action.type) {
case ActionType.CHANGE_SITE:
return {
...state,
currentSite: action.payload,
};
case ActionType.CHANGE_CAMERA:
return {
...state,
currentCamera: action.payload,
};
case ActionType.CHANGE_ANALYSER:
return {
...state,
currentAnalyser: action.payload,
};
case ActionType.CHANGE_PLATFORM:
return {
...state,
currentPlatform: action.payload,
};
case ActionType.CHANGE_BROKER:
return {
...state,
currentBroker: action.payload,
};
case ActionType.CLEAR_ANALYSER_DATA:
return {
...state,
currentAnalyser: "",
};
case ActionType.CLEAR_CAMERA_DATA:
return {
...state,
currentCamera: "",
};
case ActionType.CLEAR_PLATFORM_DATA:
return {
...state,
currentPlatform: "",
};
case ActionType.CLEAR_BROKER_DATA:
return {
...state,
currentBroker: "",
};
case ActionType.UPDATE_BROKER:
const ucurrentBroker =
state.currentBroker.identifier == action.payload.identifier
? action.payload
: state.currentBroker;
return { ...state, currentBroker: ucurrentBroker };
}
}

Answer 1

currentBroker是字符串类型，它不是对象，typescript告诉你不能访问属性，因为它没有属性。

如果你使用typescript，我建议你先声明你的状态接口:

interface IState {
currentBroker: string;
}
const initialSelectionState: IState  = {
currentBroker: "",
};

如果你需要你的代理有一个identifier属性，你可以根据需要修改状态接口:

interface IState {
currentBroker: {
identifier: string;
}
}
const initialSelectionState: IState  = {
currentBroker: {
identifier: ""  
};
};

有了这个，你应该不会再出现错误了(如果我理解正确的话)

Answer 2

初始化"currentBroker"作为字符串。

const initialSelectionState = {
currentBroker: "",
};

然后尝试访问currentBroker，就好像它是一个具有identifier属性的对象

state.currentBroker.identifier == action.payload.identifier

转换为any将允许代码运行，并且在尝试获取该属性时很可能只返回undefined。

如果所有你想做的是更新一个字符串在状态对象，肯定不需要逻辑?

const initialSelectionState = {
currentBroker: "",
};
export function selectionReducer(
state = initialSelectionState,
action: selectionReducerAction
) {
switch (action.type) {
case ActionType.UPDATE_BROKER:
return { ...state, currentBroker: action.payload};
}
}

既然你提到了有效负载的结构如下;

{
identifier: 'b9b6381e-2d42-4953-b747-4b25fd382a04', 
name: 'Broker 244', 
host: 'localhost', 
port: 1783, 
site_id: '0-0-0-0'
}

那么你的currentBroker应该在某种程度上匹配这个结构。或者，如果"初始没有当前代理"，您应该将其设置为undefined。在任何一种情况下，它绝对不应该是一个空字符串，即""，因为这是一个完全不同的数据类型。