从 Javascript > Typescript 翻译 React + Axios答案

【问题标题】：Translating React + Axios from Javascript > Typescript从 Javascript > Typescript 翻译 React + Axios
【发布时间】：2019-03-29 16:37:08
【问题描述】：

我正在尝试将 Chris Coyier 的这个非常有用的 codepen 从 JS 转换为 TS，但遇到了一些问题。

https://codepen.io/chriscoyier/pen/jqyWXo

早期使用 Typescript，不确定要使用什么类扩展声明。

我在下面的“const th = this”上获得了一个属性或签名 expected.ts(1131)。

不确定这是否是我为 React 声明定义类扩展的方式，因为通常在 TS 中声明此 const 将在没有扩展 React 调用的情况下工作。

interface Props {
}

interface State { 
}

class App extends React.Component<Props, State>{
    function1 : () => { }
    function2 : () => { 
      const th = this;
      this.serverRequest = 
          axios.get(this.props.source).then(function(result) {    
              th.setState({ jobs: result.data.jobs});
              })    
    }
}

【问题讨论】：

标签： reactjs typescript axios

【解决方案1】：

function1 : () => { } 语法对对象字面量有效，对类无效。如果是箭头，则应该是 TypeScript public property，也称为 JavaScript 类字段。

const th = this 配方在可以使用箭头代替时已过时。

应该是：

class App extends React.Component<Props, State>{
    function1 = () => { }

    function2 = () => { 
      this.serverRequest = axios.get(this.props.source).then((result) => {    
          this.setState({ jobs: result.data.jobs});
      })    
    }
    ...
}

【讨论】：