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 />
);
9 Answers
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> {... }
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);
}
}
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>
);
In tsconfig.json set "noImplicitAny": false,
this worked for me
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.
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,
}));
};
}
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:
In function Component just give any at props
const CustomImage = (props: any) => {
return <Image
{...props}
loader={customLoader}
unoptimized={true}
/>
}
