Hi, I need example of** react polymorphic component** utility type in typescript.
Would best that expected usage of this polymorphic is very easy for peoples that don't have much knowledge about generics
#Polymorphic nutcase :D
sly smelt
dark surge
what exactly are you even asking for? polymorphism is an entire concept
sly smelt
for a ready to go types
marble tapir
the simplest example is:
teal girderBOT
type Identity<T> = T
type A = Identity<string>
// ^? - type A = string
type B = Identity<number>
// ^? - type B = number
type C = Identity<Identity<Identity<{ username: string, password: string }>>>
// ^? - type C = {
// username: string;
// password: string;
// }
Identity just evaluates to whatever you pass it
a slightly more interesting example is:
teal girderBOT
type Wrapped<T> = { value: T }
type A = Wrapped<string>
// ^? - type A = {
// value: string;
// }
type B = Wrapped<number>
// ^? - type B = {
// value: number;
// }
type C = Wrapped<Wrapped<Wrapped<{ username: string, password: string }>>>
// ^? - type C = {
// value: Wrapped<Wrapped<{
// username: string;
// password: string;
// }>>;
// }
that takes whatever you give it and wraps it in an object with a value property
this part of the handbook is worth a read too: https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-types
sly smelt
@marble tapir sorry I was talking about react polymorphic component
fathom ruin
@sly smelt Showing an example of what you mean would help, especially when multiple people try to help you and don't know what you mean.
I'm pretty sure you mean this sort of pattern:
<Component as="button" /* should accept <button> props here */ />
<Component as="div" /* should accept div> props here */ />
... but it'd be really nice if you had given an example.
Looks like the React/Typescript cheatsheet has an entry on this: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#polymorphic-components-eg-with-as-props
