Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
swyxio authored Jan 15, 2019
1 parent 14699e9 commit 7b1f1f2
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -821,6 +821,33 @@ partialStateUpdate({foo: 2}) // this works
Note that there are some TS users who don't agree with using `Partial` as it behaves today. See [subtle pitfalls of the above example here](https://twitter.com/ferdaber/status/1084798596027957248), and check out this long discussion on [why @types/react uses Pick instead of Partial](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365).
</details>

## The Types I need weren't exported!

This can be annoying but here are ways to grab the types!

- Grabbing the Prop types of a component: Use `typeof`, and optionally `Omit` any overlapping types

```tsx
import { Button } from 'library' // but doesn't export ButtonProps
type ButtonProps = React.ComponentProps<typeof Button> // grab your own
type AlertButtonProps = Omit<ButtonProps, 'onClick'> // modify
const AlertButton: React.FC<AlertButtonProps> = props => (
<Button onClick={() => alert('hello')} {...props} />
)
```

- Grabbing the return type of a function: use `ReturnType`:

```tsx
// inside some library - return type { baz: number } is inferred but not exported
function foo(bar: string) {
return { baz: 1 }
}

// inside your app, if you need { baz: number }
type FooReturn = ReturnType<typeof foo> // { baz: number }
```

# Troubleshooting Handbook: TSLint

Sometimes TSLint is just getting in the way. Judicious turning off of things can be helpful. Here are useful tslint disables you may use:
Expand Down

4 comments on commit 7b1f1f2

@ferdaber
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution that React.ComponentProps is kind of problematic/will break if a user incorrectly implements its propTypes or defaultProps static properties. If those guys' types don't match exactly with the actual props of the component, the type will return an empty object {}. I have DefinitelyTyped/DefinitelyTyped#32182 open to fix that.

@swyxio
Copy link
Collaborator Author

@swyxio swyxio commented on 7b1f1f2 Jan 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have been thinking about documenting ALL the React and JSX namespace types in the Advanced section. this kind of discussion belongs there.

@ferdaber
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the types in the React namespace are not supposed to be public, but it's difficult since the entire namespace is exported. But yeah putting it in the advanced section makes sense to me.

@swyxio
Copy link
Collaborator Author

@swyxio swyxio commented on 7b1f1f2 Jan 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then we can document that too :)

Please sign in to comment.