如何使用 ReactJS 和 Typescript 定义组件实例属性？"类型'应用'上不存在属性'var'"

Question

作为参考，我使用的是 React16.9.0和 Typescript3.6.3。

在本教程中，他们建议不要在我的 react 类中定义实例属性：

只是不要。在组件实例上存储值就是这样做的：

var React = require('react/addons');
class ArbitraryWidget extends React.Component {
// ...
constructor () {
this.derp = 'something';
}
handleClick () {
this.derp = 'somethingElse';
}
render () {
var something = this.derp;
// ...
}
}

这尤其糟糕，不仅因为你打破了在this.state上存储状态的明显惯例，还因为渲染在更新this.derp时不会自动触发。

但是就我而言，我的类具有不影响组件状态的属性，然后，我可以毫无问题地将它们添加为实例属性。

但是，我不算打字稿咬屁股。如果安装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;

这将导致 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 |   }

添加以下任一内容：

interface AppProps {
var: any;
}
interface AppState {
var: any;
}

不起作用，Typescript 仍然不明白var是组件的属性，而不是this.props或this.state的属性。

---

更新

正如答案中所建议的，我尝试了这个：

private var: number;

但是现在，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 | 

如果我删除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.

Answer 1

如果var是App上的属性，那么它不是props或state的一部分，因此将其添加到AppProps或AppState接口不会让 Typescript 识别它。

相反，您应该在类中实际定义它：

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