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.