React接入TS报错Property 'identifier'不存在于string类型怎么解决

你遇到的TS报错根源是类型推导不符合实际业务逻辑：

1. 初始状态里currentBroker被赋值为空字符串，TS自动将其类型推导为string
2. 业务逻辑中currentBroker实际会存储两种类型的值：空字符串（清空/初始状态）、带identifier属性的broker对象
3. UPDATE_BROKER分支直接访问state.currentBroker.identifier，但TS认为currentBroker是字符串类型，不存在identifier属性，因此抛出2339错误。

1. 定义业务实体类型 #

先明确broker对象的结构，定义对应的TS接口：

// 按实际业务字段补充完整
interface Broker {
  identifier: string;
  // 其他属性比如name、id之类的都可以加在这里
}

2. 显式定义State类型 #

不要让TS自动推导初始状态的类型，手动声明完整的state结构，明确联合类型：

interface SelectionState {
  currentBroker: string | Broker;
  // 其他state字段比如currentSite、currentCamera等也一起在此定义类型，避免后续出现同类错误
}

// 给初始状态指定类型
const initialSelectionState: SelectionState = {
  currentBroker: "",
};

3. 类型收窄后再访问属性 #

访问identifier之前先判断currentBroker是不是broker对象类型，避免空字符串场景下的非法访问，你可以写一个简单的类型守卫实现：

// 类型守卫：判断值是不是Broker类型
function isBroker(val: string | Broker): val is Broker {
  return typeof val === 'object' && val !== null && 'identifier' in val;
}

修改UPDATE_BROKER分支的代码，先做类型判断再访问属性：

case ActionType.UPDATE_BROKER:
  const ucurrentBroker =
    isBroker(state.currentBroker) && state.currentBroker.identifier === action.payload.identifier
      ? action.payload
      : state.currentBroker;
  return { ...state, currentBroker: ucurrentBroker };

如果你的业务逻辑允许，初始值和清空值用null代替空字符串会更符合语义，类型可以写成currentBroker: null | Broker，类型判断逻辑也更简单。

内容的提问来源于stack exchange，提问作者user10727450