Join Emmanuel Henri for an in-depth discussion in this video Implement HOCs in TypeScript, part of React: Using TypeScript.
- [Instructor] Now that we've looked into HOCs in general,…let's apply it to our application with TypeScript.…So the first thing you're going to do…is create a brand new file in the source folder.…We're going to click on source folder…and then click on New File…and we're going to call this one Hoc.tsx, like so.…And then what we're going to do is import React…and Component from react.…And then everything else that will follow…we're going to have to copy a lot of stuff…from the App.tsx.…
So let's go back to App.tsx…and first let's copy the const initialStates,…so completely remove it from this file…by doing Control + X or cut,…and then pasting it onto this file here.…And then what we're going to do, again,…we're going to go and grab our type here,…so let's go and grab this,…and do the same again.…So let's paste it here.…And then let's refactor this a little bit.…So we're going to remove those two things here,…so we'll basically cut them from here.…
And then let's go and grab the readonly state…and cut that.…And finally, let's remove all the props from Message.…
Released
2/5/2019- Basic and complex types
- Functional/stateless components
- Class/stateful components
- Interfaces with React and TypeScript
- Implementing higher-order components
Share this video
Embed this video
Video: Implement HOCs in TypeScript