Skip to content

Commit 2bf0472

Browse files
authored
move proptypes section to Misc Concerns
as mentioned in #19
1 parent f4dd480 commit 2bf0472

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

README.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
* [Stateless Functional Components](#stateless-functional-components)
1414
* [Stateful Class-based Components](#stateful-class-based-components)
1515
* [Typing DefaultProps](#typing-defaultprops)
16-
* [propTypes in TypeScript](#proptypes-in-typescript)
1716
* [Extracting Prop Types](#extracting-prop-types)
17+
* [Types or Interfaces?](#types-or-interfaces-)
1818
* [Basic Prop Types Examples](#basic-prop-types-examples)
1919
* [Useful React Type Examples](#useful-react-type-examples)
2020
* [Forms and Events](#forms-and-events)
@@ -26,10 +26,11 @@
2626
* [Error Boundaries](#error-boundaries)
2727
* [Timeout/Placeholder/createFetcher](#timeout-placeholder-createfetcher)
2828
- [Section 4: Misc. Concerns](#section-4--misc-concerns)
29+
* [Writing Typescript Libraries instead of Apps](#writing-typescript-libraries-instead-of-apps)
2930
* [Component/Design System Development](#component-design-system-development)
3031
* [Building](#building)
31-
* [Prettier + TSLint](#prettier--tslint)
32-
* [ESLint + TSLint](#eslint--tslint)
32+
* [Prettier + TSLint](#prettier---tslint)
33+
* [ESLint + TSLint](#eslint---tslint)
3334
* [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
3435
- [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
3536
* [Union types](#union-types)
@@ -254,27 +255,6 @@ The problem with this approach that if we need to add another prop in the future
254255

255256
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
256257

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-
278258
## Extracting Prop Types
279259

280260
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> {
511491

512492
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.
513493

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+
514514
## Component/Design System Development
515515

516516
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

Comments
 (0)