ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 6 React – How To Convert ReactJs To Typescript)


In the last article ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 5 NSwag – Setting up Swagger and Auto generate API client code) we used NSwag to generate our client API code. Currently, we can’t use the generated client code. The generated code was written in typescript while our ClientApp is using javascript.

Honestly, I might feel uncomfortable using javascript in a react app. These past few years, I always used typescript whenever I worked on a front-end application. This is the major reason, why I want to convert the ClientApp to a typescript.

Advertisements

If you asked me, why I choose to create the react app as a javascript just to convert them to typescript later. I actually, have no choice. When I started this project, I used the ASP.NET Core template with authentication and reactjs.

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.

Advertisements

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.

Advertisements

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.

Advertisements

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.

Advertisements

RELATED ARTICLES:

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 1)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 2 Auditing in EF Core with CreatedBy and LastModifiedBy)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 3 MediatR and FluentValidation)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 4 AutoMapper – Map object properties to another object)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 5 NSwag – Setting up Swagger and Auto generate API client code)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 6 React – How To Convert ReactJs To Typescript)

ASP.NET Core 3.1 Clean Architecture – Invoice Management App (Part 7 React – Create And List Invoice)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s