score:1

Accepted answer

For React class components, you will generally need to supply the generic prop parameters with the types for the props and state respectively.

class App extends Component<AppProps, AppState> {

  ...

}

For your case, since there are no props for the App component, you will only need to do this:

class App extends Component<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state: AppState = {
      input: "",
      imageUrl: "",
    };
  }    
  ...

}

score:1

if you want to try it with the hooks then you can do this.

import React, { useState } from "react";

interface AppState {
  input: string;
  imageUrl: string;
}

const App: React.FC<AppState> = () => {
  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const handleOnButtonSubmit = () => {
    setImageUrl(input);
    clarifaiApp.models
      .predict(
        Clarifai.COLOR_MODEL,
        // URL
        "https://samples.clarifai.com/metro-north.jpg"
      )
      .then(
        function(response: any) {
          console.log("This is your response: ", response);
        },
        function(err: Error) {
          console.log("There was an error: ", err);
        }
      );
  };

  return (
    <Container>
      <ImageLinkForm
        onInputChange={(e: any) => setInput(e.target.value)}
        onButtonSubmit={handleOnButtonSubmit}
      />
      <FaceRecognition imageUrl={imageUrl} />
    </Container>
  );
};

export default App;

score:2

If you want to initialize the state inside the constructor of a class component you have to provide two type argument to the React.Component generic. The first argument is meant to provide type information about the props and the second argument is meant to provide the type information about the state. For example,

interface AppProps {
  // props 
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps,AppState> {
  // you don't need any more explicit type annotation here
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      imageUrl: "",
    };
  }

  // rest of the app logic
}

This would not have caused any issue if you would have initialized the state in the state field outside the constructor.

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component {
  state: AppState = {
    input: "",
    imageUrl: ""
  }


  // rest of the app logic
}

In the second case, you can choose to provide a type argument for the props if the component is expecting some props. For example,

interface AppProps {
  // type info for props
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps> {
   state: AppState = {
      input: "",
      imageUrl: ""
   }

   // rest of the app logic
}

Related Query

More Query from same tag