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} /> } 
