Orpheus UI (Raef) I will definitely check it out. Thanks for very helpful information.

Hi Orpheus UI (Raef) , thanks for your comment! I didn't build this blog with Headless Hashnode. I did some research after your comment and unfortunately can't find a way to implement the comments feature. Have a good day!

I recommend you share the codes as snippets instead of images so we can easily copy-paste them. For more information about code snippets, you can refer to Hashnode Markdown Guide and Neptun Editor Guide .

For the first part of your question, the reason why I didn't use Array.includes is because of a problem with TypeScript. As far as I understand, TypeScript doesn't allow us to use a more generic typed search parameter for a more explicitly typed array in the Array.includes . So we can't use the type string with an array typed ("External Editor" | "External Administrator")[] . As a workaround we can set the parameter type as any , but I thought Array.some is more straightforward to work with (we don't need to disable type checking), and also I couldn't find any performance difference between the two. For the second part of the question, returning a boolean doesn't give us any type narrowing. If you use the function with an if statement, inside the statement, the type of data.collaborator.type is still string . On the contrary, returning type predicate gives us type narrowing. If we call this function with an if statement, inside the statement, the type of data.collaborator.type is narrowed to "External Editor" | "External Administrator" . There is a visualization in the TS Playground that shows the result of narrowing the type. As I said, I think this approach is more suitable for the TypeScript side, for the JavaScript side there is nearly no difference.

Thanks for the great article Ákos Kőműves . I've played with your example and converted it to a type predicate function. The isCollaboratorExternal function accepts a collaborator parameter with type string and uses the Array.some function (because of this issue ) to check if externalCollaboratorTypes has the collaboratorType and returns the type predicate. Thus, after the check operation the type of data.collaborator.type will be "External Editor" | "External Administrator" . I think types are more aligned with the logic in this solution. Here is the link for TypeScript Playground: TS Playground

Thanks for the comment Ákos Kőműves ! I'm glad you got this feature. Regarding the comment section, It feels very overwhelming due to the API design. So I didn't prefer to integrate it.

This is such an inspiring story. Thanks!

Thanks for the article! It nicely shows what makes a developer a senior.

Thanks Hoh Shen Yien . I had saw it when I researched the dotenv-expand package, but I didn't pay much attention. With this information, I'd like to try it in my future projects. (By the way, I like your custom design much.)

Thanks for the comment Ender. As I have mentioned in the article, If I didn't use the "Cancelling the button during the ongoing request" approach, I would use AbortController with Axios. But I didn't choose this approach for simplicity.