As a superset of JavaScript, TypeScript's powerful type system makes code more robust and easier to maintain. In everyday development, custom tool types often help us efficiently address type safety issues. This article shares five practical TypeScript custom tool types that may help you avoid common pitfalls or even inspire you to create your own tool types to address business challenges.
Have you ever written such a state definition during development?
The problem with this approach is obvious: multiple conditions need to be superimposed when judging the status later, making the code redundant and error-prone. For example:
Use the status field as a "distinguishing mark" to clearly identify the only possible status and avoid overlapping multiple conditions:
In this way, you only need to check status to determine the status, and the type system will automatically infer the fields that are accessible in the current state (for example, data can only be accessed when status: "ok"):
Repeatedly defining the above state structure will generate a lot of redundant code. Customizing the Process<TData, TError> tool type can reuse the state logic of the asynchronous process:
Benefits of the optimization:
The number of state combinations has been reduced from 8 (loading × error × data) to 4, resulting in clearer logic.
This prevents common errors like "forgetting to close loading" and ensures that the type system automatically verifies state validity.
When using fetch or axios, forgetting to write .catch() will result in unhandled Promise errors. Some APIs also return non-standard error data formats, increasing processing complexity.
"Overreliance on primitive types" is a common code smell: using primitive types such as string/number to represent business concepts (such as user ID, document ID) can easily lead to type confusion. For example:
TypeScript cannot distinguish between "user ID" and "document ID" (both are strings), leading to potential bugs.
Solution: Custom Brand tool type
The five tool types introduced in this article cover common scenarios such as state management, API interaction, type safety, type display optimization, and route validation. Their core value lies in:
Reducing duplication of code improves development efficiency;
Leveraging the TypeScript type system to proactively prevent runtime bugs;
Making code more structured and reducing team collaboration costs.
The TypeScript tool type ecosystem is far more extensive than this. We recommend flexibly expanding it based on actual business needs (for example, creating dedicated tool types for form validation and permission control). AI tools (such as ChatGPT and Cursor) can help quickly generate complex tool types, but understanding their underlying principles (such as recursion, infer, and cross-types) is still key.
Mastering these tool types can make your TypeScript code more robust and easier to maintain, and better adapt to the industry trend of "type-driven development"