Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 88a5cf7

Browse files
committed
Fixes 🚀
1 parent 12d1ecc commit 88a5cf7

File tree

3 files changed

+6
-12
lines changed

3 files changed

+6
-12
lines changed

.idea/inspectionProfiles/Project_Default.xml

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/vcs.xml

Lines changed: 0 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/posts/2025-01-03-styled-component-transient-props-type-mapped-type-typescript.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ element.
2222
The framework offers a couple of ways to avoid this behavior.
2323
The first one is [Transient props](https://styled-components.com/docs/api#transient-props). By using `$` as a
2424
prefix of a prop name it will not be propagated.
25-
The second one is the `shouldforwardProp`.
25+
The second one is the `shouldForwardProp`.
2626
This is a fine-grained way to prevent the prop forward with a specific filter that acts on the name of the
27-
props. You can add it using the `withConfig` api or the `shouldforwardProp` prop as in the example below.
27+
props. You can add it using the `withConfig` api or the `shouldForwardProp` prop as in the example below.
2828

2929
```tsx
3030
interface BigCardProps {
@@ -95,14 +95,13 @@ export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
9595

9696
In the last couple of years, I felt in love with the TypeScript type system.
9797
It is so powerful and flexible that it allows you to write DSL with validation that other languages would dream of.
98-
A lot of colleagues still argue that this kind of knowledge on the specific part of TypeScript, but I strongly
98+
A lot of colleagues still argue that this kind of knowledge on the specific part of TypeScript is useless, but I strongly
9999
disagree.
100100
Why? Because in this post, I will show you a practical application of the knowledge I acquired to solve the
101101
problem above.
102102
In particular, we want to avoid coding two different interfaces,
103103
but just creating a new one starting from the `OverlayProps`
104-
that adds the `$` sign to the ones that should be transient props, and skips `$`
105-
for the ones that are DOM attributes.
104+
that adds the `$` sign to the ones that should be transient props, and skips the other ones that are DOM attributes.
106105

107106
#### Implementation
108107

@@ -112,7 +111,7 @@ Based on the description above, we want to define a `TransientProps` type that i
112111
* skip the DOM props in some way, because they should still be forwarded
113112

114113
To start the implementation, we need first to check some types exposed by React.
115-
In particular for our use case it will be useful the [`ComponentProps` type](https://react-typescript-cheatsheet.netlify.app/docs/react-types/ComponentProps).
114+
For our use case it will be useful the [`ComponentProps` type](https://react-typescript-cheatsheet.netlify.app/docs/react-types/ComponentProps).
116115
This utility type lets us extract the props of a React component received as generic parameter.
117116
The other interesting type is `React.JSX.IntrinsicElements`.
118117
This is a type that declares which JSX elements are allowed/defined and their props.

0 commit comments

Comments
 (0)