Skip to content

Change "Nothing or All" to "All or Nothing" for poetic reasons. #717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 23, 2024
Merged

Change "Nothing or All" to "All or Nothing" for poetic reasons. #717

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb2262c
refactor: change "nothing or all" to "all or nothing" for poetic reas…
Jun 26, 2024
5f68eff
fixed invalid prop def
Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/advanced/patterns_by_usecase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,19 +714,19 @@ const Component = () => (

[View in the TypeScript Playground](https://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSYBPMJOABRzAGcBGOAXjgG84qaAuApggR8AbjjCIgpjCjAAdgHM4AXzEVqtBhGYAmDt15bB+AEYoo4uBagy5ilevJoIC2XADyCpJ6gAVAAtfGGCoQwAKMEYmQR1mNgAfehi9AEoOAD5uUjg4YEw4KJiAOj5adkqhEXwMrly8uAB6JrgAA2jdJhLbNrgAEwgkJjgFCHgkAA9gWQa8ohgAVygFOAAeTK5O5hKpVTWmzI081QaW9u3uqT7B4dHxuCmZmAaF5dWNrdLbfcONZ1c7ngAGFcJAfAp4JwIhl2NkIg0NnN1t5fAFgp5QkhwuV2PgpPhmtkuE0AFSPKA4cKkpqnRoonx+IIhMLGGh4gmSER4wmHbhkuAQADWcBpdMaa1RTIxWJxWg5NRslh5RP55OxVNFtORksZ6JZ2LZSAVoi5EBVthVfJJ6sp0C14ryurRzMxrNx5ksvOJAo19rFOql+rdho9tkJUitPttmoD9Od0oNcvZnqsSqgUbVgpFcYlQddsqNePDZotyvw3qzfup2qdh1IaTEQA).

## Props: Pass nothing or all
## Props: Pass all or nothing

Passing no props is equivalent to passing an empty object. However, the type for an empty object is not `{}`, which you might think. [Make sure you understand what empty interface, `{}` and `Object` means](/docs/basic/getting-started/basic_type_example#empty-interface--and-object). `Record<string, never>` is probably the closest you can get to an empty object type, and is [recommended by typescript-eslint](https://typescript-eslint.io/rules/ban-types/). Here's an example of allowing "nothing or all":

```tsx
type Nothing = Record<string, never>;

interface All {
a: string;
b: string;
}

const NothingOrAll = (props: Nothing | All) => {
type Nothing = Record<string, never>;

const AllOrNothing = (props: All | Nothing) => {
if ("a" in props) {
return <>{props.b}</>;
}
Expand All @@ -735,10 +735,10 @@ const NothingOrAll = (props: Nothing | All) => {

const Component = () => (
<>
<NothingOrAll /> {/* ok */}
<NothingOrAll a="" /> {/* error */}
<NothingOrAll b="" /> {/* error */}
<NothingOrAll a="" b="" /> {/* ok */}
<AllOrNothing /> {/* ok */}
<AllOrNothing a="" /> {/* error */}
<AllOrNothing b="" /> {/* error */}
<AllOrNothing a="" b="" /> {/* ok */}
</>
);
```
Expand All @@ -753,7 +753,7 @@ interface Props {
};
}

const NothingOrAll = (props: Props) => {
const AllOrNothing = (props: Props) => {
if (props.obj) {
return <>{props.obj.a}</>;
}
Expand All @@ -762,10 +762,10 @@ const NothingOrAll = (props: Props) => {

const Component = () => (
<>
<NothingOrAll /> {/* ok */}
<NothingOrAll obj={{ a: "" }} /> {/* error */}
<NothingOrAll obj={{ b: "" }} /> {/* error */}
<NothingOrAll obj={{ a: "", b: "" }} /> {/* ok */}
<AllOrNothing /> {/* ok */}
<AllOrNothing obj={{ a: "" }} /> {/* error */}
<AllOrNothing obj={{ b: "" }} /> {/* error */}
<AllOrNothing obj={{ a: "", b: "" }} /> {/* ok */}
</>
);
```
Expand Down
Loading