[英]How to define component instance attributes with ReactJS and Typescript? `Property 'var' does not exist on type 'App'`
For reference, I am using React 16.9.0
and Typescript 3.6.3
. 作为参考,我正在使用React
16.9.0
和Typescript 3.6.3
。
On this tutorial , they advise to not define instance attributes in my react class: 在本教程中 ,他们建议不要在我的react类中定义实例属性:
Just don't.
只是不要。 Storing values on the instance of a component is doing this:
将值存储在组件实例上是这样的:
var React = require('react/addons'); class ArbitraryWidget extends React.Component { // ... constructor () { this.derp = 'something'; } handleClick () { this.derp = 'somethingElse'; } render () { var something = this.derp; // ... } }
This is particularly bad, not only because you're breaking the obvious convention of storing state on this.state, but because render won't automatically trigger when this.derp is updated.
这特别糟糕,不仅是因为您打破了在this.state上存储状态的明显惯例,而且还因为更新this.derp时渲染不会自动触发。
But in my case, my class has attributes which do not affect the state of the Component, then, I can add them as instance attributes without any problem. 但就我而言,我的类具有不影响Component状态的属性,那么,我可以毫无问题地将它们添加为实例属性。
But, I was not counting with Typescript bitting in the ass. 但是,我没有指责打字稿在屁股上咬人。 If you install
Create React App
and create a Typescript project, you can add the following minimal example to reproduce the problem: 如果安装
Create React App
并创建Typescript项目,则可以添加以下最小示例来重现该问题:
import React from 'react';
import './App.css';
interface AppProps {
}
interface AppState {
}
class App extends React.Component<AppProps, AppState>
{
constructor(props: AppProps) {
super(props);
this.var = 10;
this.state = {
};
}
render() {
return (
<div>
Hi!
</div>
)
}
}
export default App;
This will cause Typescript to throw the error: 这将导致Typescript引发错误:
/myfiles/src/App.tsx
TypeScript error in /myfiles/src/App.tsx(15,10):
Property 'var' does not exist on type 'App'. TS2339
13 | super(props);
14 |
> 15 | this.var = 10;
| ^
16 | this.state = {
17 | };
18 | }
Adding either: 添加:
interface AppProps {
var: any;
}
interface AppState {
var: any;
}
Does not work and Typescript still does not understand that var
is an attribute of the component and not an attribute of either this.props
or this.state
. 不起作用,Typescript仍然不了解
var
是组件的属性,而不是this.props
或this.state
的属性。
As suggested in an answer, I tried this: 如答案中所建议,我尝试了以下操作:
private var: number;
But now, Typescript throws another error: 但是现在,Typescript引发了另一个错误:
Property 'var' is missing in type '{}' but required in type 'Readonly<AppState>'. TS2741
18 |
19 | this.var = 10;
> 20 | this.state = {
| ^
21 | };
22 | }
23 |
And if I remove the this.state = {}
, it still throwing that error: 如果我删除
this.state = {}
,它仍然会抛出该错误:
Property 'var' is missing in type '{}' but required in type 'Readonly<AppProps>'. TS2741
5 | import * as serviceWorker from './serviceWorker';
6 |
> 7 | ReactDOM.render(<App />, document.getElementById('root'));
| ^
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
If var
is a property on App
, then it's not part of your props
or state
so adding it to the AppProps
or AppState
interfaces won't get Typescript to recognise it. 如果
var
是App
的属性,则它不是您的props
或state
一部分,因此将其添加到AppProps
或AppState
接口将不会使Typescript识别它。
Instead, you should actually define it in your class: 相反,您实际上应该在您的课程中定义它:
class App extends React.Component<AppProps, AppState>
{
private var: number;
constructor(props: AppProps) {
super(props);
this.var = 10;
this.state = {
};
}
render() {
return (
<div>
Hi!
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.