Question

自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个。

对此有任何解决方法吗？

Answer 1

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

Answer 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>
         )
      }
    }

Answer 3

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

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

创建一个画布很好，但是要使错误消失，我必须将其更改为小写：

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

Answer 4

我遇到过类似的错误：输入'{标签：字符串；值：字符串； }'缺少ReadOnly类型的以下属性，而缺少length，pop，push，concat等15种类型的以下属性。

我有以下代码：

DT[, {
  nms = paste0(rep(c("c", "d", "e"), each = 10), 1:10)
  lst = setNames(vector("list", 30), nms) 

  lst[["c1"]] = ifelse(num <= 7, NA, num)
  lst[sprintf("c%d", 2:10)] = shift(lst[["c1"]], 1:9)

  lst[["d1"]] = shift(lst[["c10"]], 1)
  lst[sprintf("d%d", 2:10)] = shift(lst[["d1"]], 1:9)

  lst[["e1"]] = shift(lst[["d10"]], 1)
  lst[sprintf("e%d", 2:10)] = shift(lst[["e1"]], 1:9)
  lst
}, by = group]

我正在将数组***（在这种情况下为环境选项）***的状态初始化为：

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

在我的情况下，更具体地初始化状态已解决了以下问题：

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

TS2740类型由于使用TypeScript应用程序的React Native中的ReadOnly <myinterface>错误而缺少以下属性

4 个答案: