5 TypeScript Utility Types That Will Clean Up Your React Code

TypeScript has built-in utility types that save you from writing repetitive type definitions. If you use React + TypeScript daily, these five will come up again and again. Let's look at each one with a real example. 1. Partial<T> — Make everything optional When you update state, you usually only change some fields. Partial makes every property optional. type User = { name : string ; email : string ; age : number ; }; function updateUser ( current : User , changes : Partial < User > ): User { return { ... current , ... changes }; } // Only update the name — no error updateUser ( user , { name : ' Lico ' }); Without Partial , TypeScript would complain that email and age are missing. 2. Pick<T, Keys> — Take only what you need Sometimes a component only needs a few fields from a big type. Pick creates a smaller type from the original. type User = { id : string ; name : string ; email : string ; avatar : string ; role : ' admin ' | ' user ' ; }; // This component only cares about name and a