TS2740 类型在带有 TypeScript 应用程序的 React Native 中缺少 ReadOnly<MyInterface> 错误中的以下属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53851828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TS2740 Type is missing the following properties from ReadOnly<MyInterface> error in React Native with TypeScript app
提问by romin21
Since StatelessComponentis deprecated, I am trying to turn all the components into classes.
由于StatelessComponent已弃用，我正在尝试将所有组件转换为类。
I have an interface, for example:
我有一个接口，例如：
interface MyInterface{
prop1: number;
prop2: boolean;
}
And I use it in the class:
我在课堂上使用它：
class MyComponent extends React.Component<MyInterface> {
...
public render(){...}
}
And when I try to use MyComponentlike this:
当我尝试这样使用时MyComponent：
<MyComponent
prop1={3}
prop2={false}
/>
I get this error:
我收到此错误：
TS2740: Type {prop1: 3, prop2: false} is missing the following properties from type ReadOnly: render, context, setState, forceUpdate, and 3 more.
TS2740：类型 {prop1: 3, prop2: false} 缺少 ReadOnly 类型中的以下属性：render、context、setState、forceUpdate 等。
Is there any workaround to this?
有什么解决方法吗？
回答by romin21
I finally solved the problem by changing the declaration of the class to class MyComponent extends React.Component<any, MyInterface>.
我最终通过将类的声明更改为class MyComponent extends React.Component<any, MyInterface>.
回答by lomse
To fix this issue without explicitly typing the class, simply move the stateout of the constructoras shown below:
要在不显式键入类的情况下解决此问题，只需将state移出constructor如下所示：
class MyComponent extends React.Component<any> {
state = {
key1: value1,
key2: value2
}
render(){
return(
<div>Hello World</div>
)
}
}
This approach is useful when you have a function that set the state of form inputs like this:
当您有一个像这样设置表单输入状态的函数时，这种方法很有用：
handleInputChange = (event)=>{
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
So the code below will just fine especially when you are using typescript:
所以下面的代码会很好，特别是当你使用打字稿时：
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>
)
}
}
回答by Nic Scozzaro
For others like me that found this page for other reasons -- I was getting the same typescript error (TS2740) while trying to create an HTML5 canvas like this:
对于像我这样因其他原因找到此页面的其他人——我在尝试创建这样的 HTML5 画布时遇到了相同的打字稿错误 (TS2740)：
this.canvas = document.createElement("CANVAS");
It was creating a canvas fine, but to make the error go away I had to change it to lowercase:
它正在创建一个很好的画布，但是为了使错误消失，我不得不将其更改为小写：
this.canvas = document.createElement("canvas");
回答by Bhardwaj Avasarala
I had a similar case where I have encountered this error: Type '{ label: string; value: string; }' is missing the following properties from type ReadOnly is missing the following properties from type length, pop, push, concat, and 15 more.
我有一个类似的案例，我遇到了这个错误：Type '{ label: string; 值：字符串；}' 缺少 ReadOnly 类型的以下属性 缺少 length、pop、push、concat 等类型的以下属性。
I had this following code:
我有以下代码：
interface IState {
currentEnvironment: IEnvironment;
environmentOptions: IEnvironment[];
}
interface IEnvironment {
label: string;
value: string;
}
I was initializing the states of array***(In this case environment options)*** as :
我正在初始化数组***（在这种情况下环境选项）*** 的状态为：
public state = {
currentEnvironment: { label: '', value: '' },
environmentOptions: [],
};
Initializing the state more specifically has resolved issue in my case which goes like:
在我的情况下，更具体地初始化状态已经解决了问题，如下所示：
public state = {
currentEnvironment: { label: '', value: '' },
environmentOptions: [{ label: '', value: '' }],//Also initializing the properties of the Interface
};
