status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update readme - typing injected props (#375)

This commit is contained in:
James Prado 2017-11-14 20:17:43 -05:00 committed by Daniel Ternyak
parent 31b9f29bbb
commit 7581dc7838
1 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -165,13 +165,13 @@ export * from './actionTypes';
### Higher Order Components ### Higher Order Components
#### Typing Injected Props #### Typing Injected Props
Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e), you will be forced to supply all required props whenever you compose the component. Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1), you will be forced to supply all required props whenever you compose the component.
```ts ```ts
interface MyComponentProps { interface MyComponentProps {
name: string; name: string;
countryCode?: string; countryCode?: string;
router: InjectedRouter; routerLocation: { pathname: string };
} }
... ...
@ -182,13 +182,13 @@ class OtherComponent extends React.Component<{}, {}> {
<MyComponent <MyComponent
name="foo" name="foo"
countryCode="CA" countryCode="CA"
// Error: 'router' is missing! // Error: 'routerLocation' is missing!
/> />
); );
} }
``` ```
Instead of tacking the injected props on to the MyComponentProps interface itself, put them on another interface that extends the main interface: Instead of tacking the injected props on the MyComponentProps interface, put them in another interface called `InjectedProps`:
```ts ```ts
interface MyComponentProps { interface MyComponentProps {
@ -196,29 +196,26 @@ interface MyComponentProps {
countryCode?: string; countryCode?: string;
} }
interface InjectedProps extends MyComponentProps { interface InjectedProps {
router: InjectedRouter; routerLocation: { pathname: string };
} }
``` ```
Now you can add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to the component to derive the injected props from the props object at runtime: Now add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to cast `this.props` as the original props - `MyComponentProps` and the injected props - `InjectedProps`:
```ts ```ts
class MyComponent extends React.Component<MyComponentProps, {}> { class MyComponent extends React.Component<MyComponentProps, {}> {
get injected() { get injected() {
return this.props as InjectedProps; return this.props as MyComponentProps & InjectedProps;
} }
render() { render() {
const { name, countryCode } = this.props; const { name, countryCode, routerLocation } = this.props;
const { router } = this.injected;
... ...
} }
} }
``` ```
All the injected props are now strongly typed, while staying private to the module, and not polluting the public props interface.
## Event Handlers ## Event Handlers
Event handlers such as `onChange` and `onClick`, should be properly typed. For example, if you have an event listener on an input element inside a form: Event handlers such as `onChange` and `onClick`, should be properly typed. For example, if you have an event listener on an input element inside a form: