epam / epam/UUI

[IClickable] Set parameter's type specific to a component

Open
#2,786 0 comments 0 reactions 0 assignees View on GitHub
improvement
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Now

Because the parameter's type is [`any` in `IClickable` interface](https://uui.epam.com/documents?id=%40epam%2Fuui-core%3AIClickable&theme=loveship) (which is used in `Button` component, for example), TypeScript doesn't warn about incorrect callback's usage.
Consider [this example](https://codesandbox.io/p/sandbox/q532pg?file=%2Fsrc%2Fapplication.tsx%3A34%2C1). There, the idea is when a button is clicked, the item's ID is set to a local state. But we (intentionally) forgot to call the setter with ID, and instead pass it as `onClick` property's value. Because of that, the ID in the state will not be the item's ID, but a click event object. The `Button` component doesn't highlight the issue, while using a native `button` element, TypeScript warns about the signature incompatibility.

## To Do

1. Set the parameter's type specific to a component (for example, by passing a generic value to `IClickable`) OR set `unknown` instead of `any` (see `ButtonCustom` in the example), so that the user could see the TypeScript warning and fix it
2. Make the parameter required (remove `?`). If necessary, set `undefined` explicitly instead

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.