You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 19, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: src/posts/2025-01-03-styled-component-transient-props-type-mapped-type-typescript.md
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,8 +51,7 @@ The `StyledOverlay` component receive all the props of the container component,
51
51
52
52
* avoid the forward for `zIndex` and `delay` because they are not DOM attributes.
53
53
This is why they are contained again in the `StyledOverlayProps` interface with the `$` transient prop prefix.
54
-
* forward the `onClick` prop to the underling DOM element (and so we don't add the property to the `StyledOverlayProps` but
55
-
we still pass it to the component).
54
+
* forward the `onClick` prop to the underling DOM element (and so we don't add the property to the `StyledOverlayProps` but we still pass it to the component).
56
55
57
56
```tsx
58
57
interfaceStyledOverlayProps {
@@ -149,13 +148,12 @@ Now we are ready to create the `TransientProps` type.
149
148
This type receives two generic parameters:
150
149
151
150
* the `CustomProps` interface for which we want to remap the properties as transient ones.
152
-
* the `IntrinsicElements` if needed to get the type of the underlying dome element. If not passed it will have a default `false` value and all the props will become transient.
151
+
* the `IntrinsicElements` if needed to get the type of the underlying DOM element. If not passed it will have a default `false` value and all the props will become transient.
153
152
154
153
This type will use TypeScript mapped types to remap the properties of `CustomProps` received.
155
154
The utility types created before are used to conditionally filter out DOM properties if needed.
156
155
We can add our utility type to the `styled-components` module.
157
-
In this way,
158
-
thanks to [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation),
156
+
In this way, thanks to [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation),
159
157
we will have the `TransientProps` type exposed as it is a type from the framework itself.
0 commit comments