SharePoint React Web Part报错：Property 'show'不存在于Readonly<{}>类型

报错原因 #

这个报错是TypeScript类型校验触发的，React.Component泛型接收两个参数，第一个是props的类型，第二个是state的类型，你的代码里第二个参数传了空对象类型{}，相当于告诉TypeScript当前组件的state没有任何属性，后续给state赋值show字段、读取show字段都会触发类型不匹配错误。

解决方案 #

方案1：快速修复（适合state字段少的简单场景） #

直接在组件声明的泛型位置补全state类型即可，修改组件类定义行：

// 修改前
export default class SpetSelfServiceQuestionnaire extends React.Component<ISpetSelfServiceQuestionnaireProps, {}> {
// 修改后
export default class SpetSelfServiceQuestionnaire extends React.Component<ISpetSelfServiceQuestionnaireProps, { show: boolean }> {

方案2：规范的单独定义state接口（适合state字段多、后续会扩展的场景） #

和自动生成的props类型文件对应，单独维护state的类型定义：

1. 在ISpetSelfServiceQuestionnaireProps.ts同级目录新建ISpetSelfServiceQuestionnaireState.ts，写入以下内容：

export interface ISpetSelfServiceQuestionnaireState {
  show: boolean;
  // 后续新增的state字段都可以在这里加类型定义
}

2. 在组件文件头部引入这个state接口：

import { ISpetSelfServiceQuestionnaireState } from './ISpetSelfServiceQuestionnaireState';

3. 修改组件类的泛型参数：

export default class SpetSelfServiceQuestionnaire extends React.Component<ISpetSelfServiceQuestionnaireProps, ISpetSelfServiceQuestionnaireState> {

可选优化 #

• constructor的入参props可以补上类型，避免隐式any报错：constructor(props: ISpetSelfServiceQuestionnaireProps)
• 你已经用了箭头函数定义toggleDiv，箭头函数会自动绑定this，constructor里的this.toggleDiv = this.toggleDiv.bind(this)代码可以删除，不会影响功能。

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