TypeScript Event Handler Type Auto-Completion Tip

💡React/TypeScript Tip💡 I have seen many React developers struggling to find the exact data type to specify for the event parameter of the event handler when using TypeScript. There is an easy way to find it out. Let's say you want to find out the type of onChange handler event: const handleChange = (event) => { } // JSX <input type='text' onChange={handleChange} /> Then, instead of referring to handleChange directly in the onChange handler, change it to an inline function like this: <input type='text' onChange={(event) => {}} /> Now, If you mouse over the event parameter, you will see the exact type you can use for the event. This works because, when using inline function, the correct type is automatically passed to the function parameter. So with this trick, you will be able to quickly find the type of any of the event parameter without the need of doing a Google search. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. PS: Last 2 hours left for the Holi special offer to end. Get lifetime access to 𝗣𝗿𝗼/𝗟𝗶𝗳𝗲𝘁𝗶𝗺𝗲 𝗦𝘂𝗯𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻 - ALL My Current + Future Courses/Ebooks/Webinars at just $𝟭𝟮 / ₹𝟭𝟬𝟮𝟬 (instead of regular price $𝟮𝟯𝟲 / ₹𝟮𝟬,𝟬𝟲𝟬) 📚🚀 𝗧𝗵𝗮𝘁'𝘀 𝗮 𝗺𝗮𝘀𝘀𝗶𝘃𝗲 𝟵𝟰% 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁🎉 The offer ends at 12.30 PM IST. Hurry up! 𝘓𝘪𝘯𝘬 𝘪𝘯 𝘵𝘩𝘦 𝘤𝘰𝘮𝘮𝘦𝘯𝘵 𝘢𝘯𝘥 𝘪𝘯 𝘵𝘩𝘦 𝘧𝘦𝘢𝘵𝘶𝘳𝘦𝘥 𝘴𝘦𝘤𝘵𝘪𝘰𝘯 𝘰𝘧 𝘮𝘺 𝘓𝘪𝘯𝘬𝘦𝘥𝘐𝘯 𝘱𝘳𝘰𝘧𝘪𝘭𝘦. #javascript #reactjs #nextjs #typescript #webdevelopment

  • No alternative text description for this image

This inline hover trick is a massive time saver for tricky React forms. This has saved me so many context switches to docs or a quick Google. Fun fact, most React DOM events are actually SyntheticEvent wrappers, instead of native browser events

To view or add a comment, sign in

Explore content categories