如何使用ReactJS和Typescript定义组件实例属性？ 属性“ var”在类型“ App”上不存在

Question

作为参考，我正在使用React 16.9.0和Typescript 3.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时渲染不会自动触发。

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

但是，我没有指责打字稿在屁股上咬人。 如果安装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>
    )
  }
}