score:2
First, let's fix your example:
interface TestProps {
Hello?: { (name: string): void };
}
export class TestComp extends React.Component<TestProps, {}> {
public static defaultProps: Partial<TestProps> = {
Hello: name => console.log(name)
};
public render() {
this.props.Hello("world");
return <div>test</div>;
}
}
The way that you had it written before meant that your component couldn't see TestProps
(it wasn't passed in from anywhere) and that Hello
was a required prop. I used an interface with Hello?
to make it optional, rather than using typeof
.
The compiler error came from the fact that Hello
was required, so you would have needed to use:
ReactDOM.render(<TestComp Hello={() => {}} />, document.getElementById("page"));
// ^ pass Hello as a prop here
Doing this would fix the compile error, but you would still be left with incorrect behaviour, as the object TestProps
in your example would never be used.
If you are using strictNullChecks
, then you will have to work your way around the type system a little bit, since Hello
is an optional property:
if (this.props.Hello) this.props.Hello("world");
// or
this.props.Hello && this.props.Hello("world");
By checking whether this.props.Hello
is truthy, the type is narrowed from (name: string) => void | undefined
to just (name: string) => void
, so you can call the function.
Source: stackoverflow.com
Related Query
- Default function value in React component using Typescript
- Default property value in React component using TypeScript
- Default property value in React component with extended props using TypeScript 3
- How to use jest.spyOn with React function component using Typescript
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Default function parameter value from React component state
- How to set default value of props if not passed to functional component in NextJS using Typescript
- How to use an enum in typescript as a default prop value for a react component
- Using value returned from function in react component (auto-update)
- setting default value for react class component state in typescript
- React function component prop default with TypeScript
- How could I use typeScript in function component for type limit and default value
- How create React Typescript component with required and optional values but required value without default value?
- Passing any arbitrary function as a property value to Typescript React Component
- How to test a function call after state receive value inside expression in React function component using Jest
- Providing default value for function prop in React
- How to attach drag event handlers to a React component using TypeScript
- How to get value from a react function within a react component
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Arrow function is considered unexpected token in React component using babel
- Sending event handlers as props into a React component using TypeScript
- Type annotation for React Higher Order Component using TypeScript
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- React 16: Call children's function from parent when using hooks and functional component
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React-Testing-Library: using typescript can't pass component to render function
- how to set default value in select using react js
- Passing a function as a prop to a Typescript React Functional Component
- Using TypeScript To Create A React Stateless Functional Component That Accepts Array
- How to test with jest and typescript with types a basic react function component
More Query from same tag
- React POST request, how to reconcile a timing error?
- React-Router Router.HistoryLocation refreshes the page
- How can I execute more than one thing onDateChange react native?
- How to activate a single div using React.js and setActive?
- Stale data shown in react component
- Building a table using material ui In react
- How can I update an object in a nested array when an input value changes?
- Modal Window not detect well I click on the Login or Sign up button
- How can I keep the data after hiding it?
- How dispatch function with Redux-thunk
- POST request response undefined , but REQUEST works
- REACT: How to update the list after click button EDIT?
- React Props wont update in Child Components
- Iterate through a dictionary with React to construct a Table
- Trouble getting react-suite to work within Gatsby project
- EventEmitter vs facebook's dispatcher
- Error: Cannot find module 'react-router/lib/getRouteParams'
- react-router and pretty URLs
- React table how to show 3 items each row using map loop
- React - JSX conditional tags
- How can i change this Firebase version 8 code to version 9
- Highcharts with react Error: "missingModule" with chart type of "timeline"
- How to dispatch a action in React js after one action is completed?
- React Constants inside a Function
- Aggregation if local field exist in foreign field
- How to move uncontrolled component to controlled component
- Can I convert a reference to a React Component into JSON code?
- Changing deep copy value using Spread operator
- Semantic UI (React): Responsive vertical menu by changing to horizontal on mobile devices
- Module not found: Error: Cannot resolve 'file' or 'directory'