CODEWITHSUNDEEP
reactjstypescriptaxios
user9998823
user9998823

Reputation: 1

Translating React + Axios from Javascript > Typescript

I'm trying to translate this highly useful codepen from Chris Coyier from JS to TS and running into some issues.

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

Early days with Typescript and not sure what Class extend declaration to use.

I'm getting a Property or signature expected.ts(1131) on "const th = this" below.

Not sure whether it's the way I've defined the Class extend for React declaration because typically in TS declaring this const would work without the extend React call. 

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

Upvotes: 0

Views: 585

Answers (1)

Estus Flask
Estus Flask

Reputation: 222865

function1 : () => { } syntax is valid for object literals, not for classes. In case it's an arrow, it should be TypeScript public property, also known as JavaScript class field.

const th = this recipe is obsolete when arrows can be used instead.

It should be:

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

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

Upvotes: 1

Related Questions