Concerning Function and best practices
Function in practice has unsufficient type-safety, being the super-type of all functions. You better replace it with a function type - see the "Solutions" section down under.
In above example, Function is not assignable to the more narrow onClick function type, which causes the error at hand (Playground example).
In addition to mentioned issue, here is what TypeScript docs say about Function:
This is an untyped function call and is generally best avoided because of the unsafe any return type. If need to accept an arbitrary function but don’t intend to call it, the type
() => voidis generally safer.
typescript-eslint has discarded Function with the ban-types rule, emitting following message with default configuration (see also here):
The
Functiontype accepts any function-like value. It provides no type safety when calling the function, which can be a common source of bugs. If you are expecting the function to accept certain arguments, you should explicitly define the function shape.
Better solutions
React already comes with built-in event handler-types to handle common events.
For exampleclick (Playground):
type Props = {
onClick: React.MouseEventHandler<HTMLButtonElement>
};
const Submit = ({ onClick }: Props) => <button onClick={onClick}> click </button>
type Props = {
onClick: (event: React.MouseEvent<HTMLElement>) => void
};
void is more restrictive than any. There is no chance to return a value in the callback by accident, which would be possible with any.
In summary, we embrace typing capabilities of TypeScript instead of using Function or any.
The parameter now is known to be MouseEvent and the return type void, identifying it as a callback.
Related
Typescript: How to define type for a function callback (as any function type, not universal any) used in a method parameter
Answer from ford04 on Stack OverflowConcerning Function and best practices
Function in practice has unsufficient type-safety, being the super-type of all functions. You better replace it with a function type - see the "Solutions" section down under.
In above example, Function is not assignable to the more narrow onClick function type, which causes the error at hand (Playground example).
In addition to mentioned issue, here is what TypeScript docs say about Function:
This is an untyped function call and is generally best avoided because of the unsafe any return type. If need to accept an arbitrary function but don’t intend to call it, the type
() => voidis generally safer.
typescript-eslint has discarded Function with the ban-types rule, emitting following message with default configuration (see also here):
The
Functiontype accepts any function-like value. It provides no type safety when calling the function, which can be a common source of bugs. If you are expecting the function to accept certain arguments, you should explicitly define the function shape.
Better solutions
React already comes with built-in event handler-types to handle common events.
For exampleclick (Playground):
type Props = {
onClick: React.MouseEventHandler<HTMLButtonElement>
};
const Submit = ({ onClick }: Props) => <button onClick={onClick}> click </button>
type Props = {
onClick: (event: React.MouseEvent<HTMLElement>) => void
};
void is more restrictive than any. There is no chance to return a value in the callback by accident, which would be possible with any.
In summary, we embrace typing capabilities of TypeScript instead of using Function or any.
The parameter now is known to be MouseEvent and the return type void, identifying it as a callback.
Related
Typescript: How to define type for a function callback (as any function type, not universal any) used in a method parameter
You can simply write it like this, which prevents any and is more telling. Especially for custom functions:
Interface Props { onClick: (e: Event) => void; }
This will tell the calling component, what onClick will expect and what the parameters are.
Hope this helps. Happy coding.
Function component props with typescript
How to pass function as a prop in react typescript
reactjs - how to set prop type in react + typescript - Stack Overflow
Callback props and Typescript - inline allow TypeScript to infer the parameters, or make explicit?
Videos
Hey guys, do you see any disadvantages about writing:
const Component = ({
text
}:{
text: string
}) => {
return (
<div>{text}</div>
)
}instead of:
interface ComponentProps {
text: string
}
const Component = ({text}: ComponentProps) => {
return (
<div>{text}</div>
)
}The issue isn't when passing the function, it's when destructuring the props and providing a default function:
{ createCard = f => f }: dataFormProps
This code indicates that createCard should be a function which accepts a parameter and returns a value. Which it doesn't:
createCard: ()=>void
Make the default parameter match the signature:
{ createCard = () => {} }: dataFormProps
default function createCard should has type () => void. So just update like this:
DataForm({ createCard = () => {} }: dataFormProps)
I would change it so you are passing the props down to the card that you want to use instead of a container object as the prop. That makes the typing simpler too. So you can do this:
interface MovieProps {
id: number;
title: string;
year: number;
}
function App() {
...
const movies: MovieProps[] = [
{ id:1, title: 'movie1', year: 2018 },
{ id:2, title: 'movie2', year: 2019 },
{ id:3, title: 'movie3', year: 2020 },
{ id:4, title: 'movie4', year: 2021 },
];
const renderMovies: JSX.Element[] = movies.map(movie => {
return (
<MovieCard key={ movie.id } {...movie} />
);
});
...
}
function MovieCard({ title, year }: MovieProps) { <- this part
return (
<div className="movie">
<div className="movie-title">{ title }</div>
<div className="movie-year">{ year }</div>
</div>
);
};
Just update type like this:
function MovieCard({ movie }: {movie: MovieProps })