If you are using web-pack you will need to provide typescript file extension support:
If you use 'prettier' and 'lint-staged' you will need to add some config within 'package.json', like this:
If you use 'eslint' within the '.eslintrc' file you need to add typescript file extension support:
After you have the correct config the steps to convert a component is:
- Rename a component from a file extension from 'js' to 'tsx'
- If the component has a corresponding test, rename the test files extension from 'js' to 'ts'
- Within the component, remove any prop-types, etc..
- Create an interface for the components
- Implement the interface on the class
To implement an interface on a functional component:
To implement an interface on a class component - convert it to a functional - you can: