? And why I’m starting my post like this? I read too many self-help books I guess.

consider using type for your React Component Props and State, for consistency and because it is more constrained. - 

Always use interface for public API’s definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing - 

type level can also be extended by using the intersection syntax 

notice the type annotation User & { posts: Post[ ] } this is the syntax for intersecting two interface / type

you can also do something like this, making it more readable

In the end, it depends if you want to use 

as a rule of thumb is to use them consistently within your code. Whether you use only 

.Using them both will have no issue except for your code consistency.

When do we use type vs interface? Which should we use? When do we use type and interface? And why I’m starting my post like this? I read too many self-help books I guess.

TS Basic: Type VS Interface

What if our data is coming from an API? How do we make sure we have type-safe on our 

 function that fetching simple data and returning it to the client as json.

Let us say we already know what properties we wanted from our API.

Already Typescript will suggest ( if we hover ) to use 

We assign the typescript interface to the data itself.

 this is the best way to use if we don’t really know what result in our API when we fetch is going to be. 

But casting allows us to make anyone become a 

this would give us errors because the object doesn’t include the appropriate properties.

 syntax, and is probably what you should do in most cases.

What if our data is coming from an API? How do we ensure we have type-safe on our `async` function data? 

TS Basic: Typing Promises and Async Request

I never really created my own loading and error handling before without using React query. I know you can achieve the loading and error state using 

 method is also great when you want to accomplish this loading and error state for your UI.

React-query has a lot of great lifecycle methods, but I usually use the 

 methods. There are lot more state to use actually but these 3 will do for achieving the loading and error state you want for your UI.

Here’s how you would do it ( a straightforward use )

So very straight forward as I said, you can get the 

 from your fetching method. Then just use them to generate your component as such.

 if your fetching is still in progress or not.

 to check if your API fetching returns an error.

Sometimes our internet and server fail us and we want something to show users that there’s a delay in “loading” or there is an error on the data that they want to see. So with react-query lifecycle method can help us make sure that we make it so.

I never really created my own loading and error handling before without using React query.

React Query Basic: Query Lifecycle

At the moment the missus uses a worksheet to store her tasks and meeting notes for her work. This application will help her store it on a cloud database for portability and additional features that she wants like sorting by categories or adding priority level to her task.

My goal for this project is to learn the NextJs Server Component use Appwrite as my database and do all my code using Typescript.

A task list application for storing work-related tasks and notes. Unlike a simple to-do list application this will be able to add categories and priorities for sorting and reporting purposes. 

Tasks List

After 4 years of Front-end Development, I decided to update my old portfolio website. 

For my new portfolio website, I planned to incorporate Nextjs and Sanityio. Additionally, I aim to include a feature where I can share updates on my web development journey, including blogs and showcase my work.

I am currently updating my portfolio website after three years of working as a front-end developer, utilizing ReactJs and NextJs.

Hi, I'm Owa Aquino.

👉 This website is here to help me become a better developer.

💻 What I'm working on

Tasks List

Portfolio v3

📝Latest Posts

TS Basic: Type VS Interface

TS Basic: Typing Promises and Async Request

React Query Basic: Query Lifecycle