You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+30-1
Original file line number
Diff line number
Diff line change
@@ -139,6 +139,7 @@ The former pattern is shorter, so why would people use `React.FunctionComponent`
139
139
- If you need to use `children` property inside the function body, in the former case it has to be added explicitly. `FunctionComponent<T>` already includes the correctly typed `children` property which then doesn't have to become part of your type.
140
140
- Typing your function explicitly will also give you typechecking and autocomplete on its static properties, like `displayName`, `propTypes`, and `defaultProps`.
141
141
-_In future_, it will also set `readonly` on your props just like `React.Component<T>` does.
142
+
- HOWEVER, there are currently known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/sw-yx/react-typescript-cheatsheet/issues/87) - scroll down to our `defaultProps` section for typing recommendations there.
@@ -387,9 +388,25 @@ class App extends React.Component<{
387
388
388
389
## Typing defaultProps
389
390
390
-
For Typescript 3.0+, type inference [should work](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html), although [some edge cases are still problematic](https://github.com/sw-yx/react-typescript-cheatsheet/issues/61). Just type your props like normal.
391
+
For Typescript 3.0+, type inference [should work](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html), although [some edge cases are still problematic](https://github.com/sw-yx/react-typescript-cheatsheet/issues/61). Just type your props like normal, except don't use `React.FC`.
391
392
392
393
```tsx
394
+
// ////////////////
395
+
// function components
396
+
// ////////////////
397
+
typeProps= { age:number } &typeofdefaultProps;
398
+
const defaultProps = {
399
+
who: 'Johny Five',
400
+
};
401
+
402
+
const Greet = (props:Props) => {
403
+
/*...*/
404
+
};
405
+
Greet.defaultProps=defaultProps
406
+
407
+
// ////////////////
408
+
// class components
409
+
// ////////////////
393
410
exporttypeProps= {
394
411
name:string;
395
412
};
@@ -405,6 +422,18 @@ export class Greet extends React.Component<Props> {
405
422
// Type-checks! No type assertions needed!
406
423
let el = <Greet />;
407
424
```
425
+
<details>
426
+
<summary>Why does React.FC break defaultProps?</summary>
0 commit comments