CODEWITHSUNDEEP
twitter-bootstrapreactjstypescriptredux
newgrad
newgrad

Reputation: 547

react/typescript: Parameter 'props' implicitly has an 'any' type error

When I try this sample code from react-bootstrap, I keep getting errors such as " Parameter 'context' implicitly has an 'any' type; "Property 'value' does not exist on type 'Readonly<{}>'."

in form.tsx:

class FormExample extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    };
  }

  getValidationState() {
    const length = this.state.value.length;
    if (length > 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
    return null;
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <form>
        <FormGroup
          controlId="formBasicText"
          validationState={this.getValidationState()}
        >
          <ControlLabel>Working example with validation</ControlLabel>
          <FormControl
            type="text"
            value={this.state.value}
            placeholder="Enter text"
            onChange={this.handleChange}
          />
          <FormControl.Feedback />
          <HelpBlock>Validation is based on string length.</HelpBlock>
        </FormGroup>
      </form>
    );
  }
}

export default FormExample;

in Jumbo.tsx:

const Jumbo = () => (
   <FormExample />
);

Upvotes: 51

Views: 96529

Answers (9)

Abdelghani Bekka
Abdelghani Bekka

Reputation: 684

The easiest and most straightforward solution I found is using PropsWithChildren:

import { PropsWithChildren } from 'react'

export const Foo = (props: PropsWithChildren) => {
    return props.children
}

Other approaches are listed here though:

https://blog.logrocket.com/using-react-children-prop-with-typescript/

Upvotes: 3

shujaat ahmed
shujaat ahmed

Reputation: 1

for Functional Components

just add like this:

function name (props:any)

{ return (<> </>) }

Upvotes: -5

Ayaan Kaifullah
Ayaan Kaifullah

Reputation: 81

In tsconfig.json set "noImplicitAny": false, this worked for me

Upvotes: 3

Pickachu
Pickachu

Reputation: 37

In function Component just give any at props

const CustomImage = (props: any) => {
    return <Image
        {...props}
        loader={customLoader}
        unoptimized={true}
    />
}

Upvotes: -2

Tushar Prajapati
Tushar Prajapati

Reputation: 141

Within TypeScript a React.Component is a generic type (aka React.Component<PropType, StateType>). So you want to provide it with (optional) prop and state type parameters.

It would look like this:

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

Don't forget that you can export/import/extend these types/interfaces to reuse them.

Class Methods: You could do it in the normal way. Just remember that any arguments for your functions also need to be typed.

This would be the code for a class:

class App extends React.Component<{ message: string }, { count: number }> {
  state = { count: 0 };
  render() {
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
  increment = (amt: number) => {
    // like this
    this.setState((state) => ({
      count: state.count + amt,
    }));
  };
}

Upvotes: 0

Harish
Harish

Reputation: 1911

In typeScript you should install @types/react and while extending the React.Component you need to specify the props and state types. Here is the example

import * as React from 'react'

interface Props {
  ... // your props validation
}

interface State {
  ... // state types
}

class FormExample extends React.Component<Props, State> {... }

Upvotes: 53

Stephen Paul
Stephen Paul

Reputation: 39075

I just got this error on a functional component.

In order to get information such as props.children as well as custom props, you should do the following.

import { FunctionComponent } from 'react';

const Layout: FunctionComponent<{ hello: string }> = props => (
  <div style={layoutStyle}>
    <Header />
    {props.hello}
    {props.children}
  </div>
);

Upvotes: 11

Ozgur Sahin
Ozgur Sahin

Reputation: 1473

Specifying the type of the constructor parameter resolved this issue in my case.

class Clock extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }
}

Upvotes: 34

Sujit.Warrier
Sujit.Warrier

Reputation: 2889

in type script you need to specify the type of props you are going to send or it takes the default type defined tin @types/react. if you dont want to specify any type then explicitly ask the component to expect state and props of 'any' type.

class FormExample extends React.Component<any,any> {

the first type argument is for defining the type of props you are expecting , the other is for type of state of the component.

Upvotes: 2

Related Questions