I recently started using TypeScript and I have been enjoying it so far. However, I came across an issue today that I couldn't solve.
Imagine a scenario where a parent component A passes a function that expects a numeric value to the child component B. Why doesn't TypeScript provide validation for the type of argument expected in this case?
A.tsx
export const A = (): ReactElement => {
const x = (n: number = 0): void => {
alert(n);
};
return (
<B x={x} />
);
};
B.tsx
export const B = ({ x }) : ReactElement => {
return (
<button type='button' onClick={() => x(`string`) /* <--- Should only accept a number */ }>
alert a number
</button>
);
};
Do I need to add typing to the destructured props? And if so, how can I do that?