TS2740 Type 在带有 TypeScript 应用程序的 React Native 中缺少 ReadOnly<MyInterface> 错误中的以下属性答案

【问题标题】：TS2740 Type is missing the following properties from ReadOnly<MyInterface> error in React Native with TypeScript appTS2740 Type 在带有 TypeScript 应用程序的 React Native 中缺少 ReadOnly<MyInterface> 错误中的以下属性
【发布时间】：2019-05-19 23:32:11
【问题描述】：

由于StatelessComponent 已被弃用，我正在尝试将所有组件转换为类。

我有一个接口，例如：

interface MyInterface{
    prop1: number;
    prop2: boolean;
}

我在课堂上使用它：

class MyComponent extends React.Component<MyInterface> {
   ...
   public render(){...}
}

当我尝试像这样使用MyComponent 时：

<MyComponent 
    prop1={3}
    prop2={false}
/>

我得到这个错误：

TS2740：类型 {prop1: 3, prop2: false} 缺少 ReadOnly 类型的以下属性：render、context、setState、forceUpdate 和另外 3 个。

有什么解决办法吗？

【问题讨论】：

似乎可以使用您提供的代码：stackblitz.com/edit/react-ts-o7jxrp（假设 MyComponent 在您的 jsx 标记中是 TravelChange）
@TitianCernicova-Dragomir 是的，它有效。但是我在 IDE 中遇到了这个错误，我想让它消失。
我的特定代码也有错误，因为prop2 应该是string，但如果我纠正它一切正常并且我在我的IDE（或stackbliz）中看不到任何错误。你用的是什么IDE？也许重新启动它？也许您没有导入相同的组件？您的代码看起来不错。
是的，我更新了问题（现在prop2 是boolean），但即使在重新启动IDE 后我仍然收到错误消息。我正在使用 WebStorm。

标签： typescript react-native

【解决方案1】：

我终于解决了这个问题，把类的声明改为class MyComponent extends React.Component<any, MyInterface>。

【讨论】：

很确定这是错误的，第一个参数是道具，第二个是状态
是的，你是对的@dmo。我无法删除此答案，因为它已被接受。

【解决方案2】：

要在不显式键入类的情况下解决此问题，只需将state 移出constructor，如下所示：

class MyComponent extends React.Component<any> {
    state = {
        key1: value1,
        key2: value2
    }
    render(){
        return(
           <div>Hello World</div>
        )
    }
}

当你有一个像这样设置表单输入状态的函数时，这种方法很有用：

handleInputChange = (event)=>{
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

所以下面的代码会很好，尤其是当你使用打字稿时：

class MyComponent extends React.Component<any> {

      state = {
          key1: value1,
          key2: value2
      }

      handleInputChange = (event: React.ChangeEvent<HTMLInputElement>)=>{
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value // no typing error
        });
      }

      render(){
         return(
            <div>Hello World</div>
         )
      }
    }

【讨论】：

【解决方案3】：

对于像我这样因其他原因发现此页面的其他人 - 我在尝试创建这样的 HTML5 画布时遇到了相同的打字错误 (TS2740)：

this.canvas = document.createElement("CANVAS");

它可以很好地创建画布，但为了消除错误，我不得不将其更改为小写：

this.canvas = document.createElement("canvas");

【讨论】：

【解决方案4】：

我有一个类似的情况，我遇到了这个错误：输入'{标签：字符串；值：字符串； }' 缺少类型 ReadOnly 中的以下属性缺少类型长度、pop、push、concat 等 15 中的以下属性。

我有以下代码：

interface IState {
  currentEnvironment: IEnvironment;
  environmentOptions: IEnvironment[];
}
interface IEnvironment {
  label: string;
  value: string;
}

我将数组***（在本例中为环境选项）*** 的状态初始化为：

public state = {
    currentEnvironment: { label: '', value: '' },
    environmentOptions: [],
  };

更具体地初始化状态已经解决了我的问题，如下所示：

public state = {
    currentEnvironment: { label: '', value: '' },
    environmentOptions: [{ label: '', value: '' }],//Also initializing the properties of the Interface
  };

【讨论】：