So, if you are like me who used that template and still want to use typescript instead of js. Then, you can used this as reference, after all I haven’t done any change in the ClientApp other than generating the api client code. So the output of this can be use in your other project that used the same template.
Let’s start converting our ClientApp to typescript. First, Install the node packages.
npm install -D @types/react @types/react-dom @types/react-router-bootstrap @types/react-router-dom @types/reactstrap
Then rename your files, just like the image below.
It’s basically, changing all react components file extension from .js to .tsx. Then the services and constant to .ts. For now, I just ignore the App.test.js, setupTests.js and registerServiceWorker.js.
I didn’t do much in the code. I created an interface for component properties and state. I called them IProps and IState. Then I give a type to the variables, and in some cases which I’m not sure what type they should have. I just give it a type any. Just like the image below.
There is a lot of files that I changed on this part, but basically they are just renaming the file then adding a type to variables. So, instead of writing here the steps, it is better if you watch the video.
You can also get the code from my github repository. https://github.com/alexcalingasan/InvoiceManagementApp/tree/feature/convert_client_app_to_typescript
In the next article, we will start working on the frontend of our Invoice Management App.