Giving Types to Axios
In this lesson, we're assign types to Axios response
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:05] What is the point of using TypeScript? If we can't provide Type Safety to our response.
[00:06 - 00:17] So without wasting any time, let's directly jump to fix that. If you look at the response body variable, this is the only variable we are going to use for storing the response.
[00:18 - 00:32] So we can't give that any specific type and it has to be generic which can fit all our use cases. Ideally, to give type, we need to create a structure for it which is called model or entity.
[00:33 - 00:57] Since we are going to receive course list here, we need to create a course model which will have all the properties we are going to receive or going to expect. Inside the SRC directory, let's create another directory and let's call it models and create a new file here which will be called course.es.
[00:58 - 01:29] We need to write an interface which will be called course and inside the curly brackets, we just need to write the properties that we have written inside our backend. For now, we have ID which is of type string, title which is again string price which will be a number.
[01:30 - 01:50] The character will be a string, image will be a string as well and treating will be a number. That's it.
[01:51 - 02:11] We can add export in the beginning. Alright, coming back to the agent.ps file, we cannot give type course to the response body variable because it's going to be used for multiple requests and not every response is going to receive course as a response.
[02:12 - 02:32] TypeScript gives us an option to use a generic type which is dynamic. For that, after the equal to sign, write T which stands for type, then we can use this type as an XEO's response as well.
[02:33 - 02:43] Now, this one will be substituted depending on the response. For example, we are sure that in the list function, we are going to receive an array of courses.
[02:44 - 03:03] So we can write course of array. Now we just need to import course from model slash course.
[03:04 - 03:13] This T will be substituted to an array of course. We see an error because our get request doesn't have any type yet.
[03:14 - 03:37] So we can simply write T in the beginning and also after XEO's dot kit and the error is gone. Now if you hover over list, you will see rather than expecting promise of type any, it's expecting promise which is of type course array.
[03:38 - 04:00] We can do the same thing for rest of the request as well. So let's copy it and paste.
[04:01 - 04:13] By doing this, we have type safety which makes our code secure because it always knows what to expect and if something goes wrong, it will show us an error. We have XEO's setup.
[04:14 - 04:17] Let's write our home page using this list function in the next lesson.