|
13 | 13 | * [Stateless Functional Components](#stateless-functional-components)
|
14 | 14 | * [Stateful Class-based Components](#stateful-class-based-components)
|
15 | 15 | * [Typing DefaultProps](#typing-defaultprops)
|
16 |
| - * [propTypes in TypeScript](#proptypes-in-typescript) |
17 | 16 | * [Extracting Prop Types](#extracting-prop-types)
|
| 17 | + * [Types or Interfaces?](#types-or-interfaces-) |
18 | 18 | * [Basic Prop Types Examples](#basic-prop-types-examples)
|
19 | 19 | * [Useful React Type Examples](#useful-react-type-examples)
|
20 | 20 | * [Forms and Events](#forms-and-events)
|
|
26 | 26 | * [Error Boundaries](#error-boundaries)
|
27 | 27 | * [Timeout/Placeholder/createFetcher](#timeout-placeholder-createfetcher)
|
28 | 28 | - [Section 4: Misc. Concerns](#section-4--misc-concerns)
|
| 29 | + * [Writing Typescript Libraries instead of Apps](#writing-typescript-libraries-instead-of-apps) |
29 | 30 | * [Component/Design System Development](#component-design-system-development)
|
30 | 31 | * [Building](#building)
|
31 |
| - * [Prettier + TSLint](#prettier--tslint) |
32 |
| - * [ESLint + TSLint](#eslint--tslint) |
| 32 | + * [Prettier + TSLint](#prettier---tslint) |
| 33 | + * [ESLint + TSLint](#eslint---tslint) |
33 | 34 | * [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
|
34 | 35 | - [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
|
35 | 36 | * [Union types](#union-types)
|
@@ -254,27 +255,6 @@ The problem with this approach that if we need to add another prop in the future
|
254 | 255 |
|
255 | 256 | [Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
|
256 | 257 |
|
257 |
| - |
258 |
| -## propTypes in TypeScript |
259 |
| - |
260 |
| -`propTypes` may seem unnecessary with TypeScript, especially when building React + Typescript **apps**, but they are still relevant when writing **libraries** which may be used by developers working in Javascript. |
261 |
| - |
262 |
| -```ts |
263 |
| -interface IMyComponentProps { |
264 |
| - autoHeight: boolean; |
265 |
| - secondProp: number; |
266 |
| -} |
267 |
| - |
268 |
| -export class MyComponent extends React.Component<IMyComponentProps, {}> { |
269 |
| - static propTypes = { |
270 |
| - autoHeight: PropTypes.bool, |
271 |
| - secondProp: PropTypes.number.isRequired, |
272 |
| - }; |
273 |
| -} |
274 |
| -``` |
275 |
| - |
276 |
| -[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). |
277 |
| - |
278 | 258 | ## Extracting Prop Types
|
279 | 259 |
|
280 | 260 | Instead of defining prop types *inline*, you can declare them separately (useful for reusability or code organization):
|
@@ -511,6 +491,26 @@ class CssThemeProvider extends React.PureComponent<Props> {
|
511 | 491 |
|
512 | 492 | Sometimes writing React isn't just about React. While we don't focus on other libraries like Redux (see below for more on that), here are some tips on other common concerns when making apps with React + Typescript.
|
513 | 493 |
|
| 494 | +## Writing Typescript Libraries instead of Apps |
| 495 | + |
| 496 | +`propTypes` may seem unnecessary with TypeScript, especially when building React + Typescript **apps**, but they are still relevant when writing **libraries** which may be used by developers working in Javascript. |
| 497 | + |
| 498 | +```ts |
| 499 | +interface IMyComponentProps { |
| 500 | + autoHeight: boolean; |
| 501 | + secondProp: number; |
| 502 | +} |
| 503 | + |
| 504 | +export class MyComponent extends React.Component<IMyComponentProps, {}> { |
| 505 | + static propTypes = { |
| 506 | + autoHeight: PropTypes.bool, |
| 507 | + secondProp: PropTypes.number.isRequired, |
| 508 | + }; |
| 509 | +} |
| 510 | +``` |
| 511 | + |
| 512 | +[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). |
| 513 | + |
514 | 514 | ## Component/Design System Development
|
515 | 515 |
|
516 | 516 | For developing with Storybook, read the docs I maintain over here: <https://storybook.js.org/configurations/typescript-config/>. This includes automatic proptype documentation generation, which is awesome :)
|
|
0 commit comments