Skip to content

Commit 2db7f28

Browse files
author
Islam Attrash
committed
Related to [propTypes with TypeScript #17]
1 parent 860aa20 commit 2db7f28

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
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)
1617
* [Extracting Prop Types](#extracting-prop-types)
1718
* [Basic Prop Types Examples](#basic-prop-types-examples)
1819
* [Useful React Type Examples](#useful-react-type-examples)
@@ -240,6 +241,31 @@ The problem with this approach that if we need to add another prop in the future
240241

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

244+
245+
## propTypes in TypeScript
246+
247+
Since TypeScript is supporting and embracing Types in compile-time some may think that there's no need for injecting the propTypes
248+
to do the run-time type checking. While that's true in some cases (like developing an app that is totally being used by TypeScript developers),
249+
injecting the propType is still recommened and relevant in the libraries that is willing to be used
250+
by JavaScript developers because they won't gain the benefits of the type-system and will likely break things such as: passing props with
251+
not suitable types.
252+
253+
```ts
254+
interface IMyComponentProps {
255+
autoHeight: boolean;
256+
secondProp: number;
257+
}
258+
259+
export class MyComponent extends React.Component<IMyComponentProps, {}> {
260+
static propTypes = {
261+
autoHeight: PropTypes.bool,
262+
secondProp: PropTypes.number.isRequired,
263+
};
264+
}
265+
```
266+
267+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
268+
243269
## Extracting Prop Types
244270

245271
Instead of defining prop types *inline*, you can declare them separately (useful for reusability or code organization):

0 commit comments

Comments
 (0)