How to type React events with TypeScript
Vložit
- čas přidán 18. 05. 2021
- 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
What type to use for your React event handlers if you use TypeScript
Twitter: / ivanov_dev
Discord: / discord
Heu?! I think there's a way-way easier method to know what a function or method (or any type) is returning, in this case onChange... Hover over the word onChange, and it should show up. If it doesn't, select it and then press ctrl-k, ctrl-i . This works for everything! So if you're calling a function, and you're not sure what signature it has, just select it, and press ctrl-k, ctrl-i. (And there is some additional help: sometimes, when you want to know what options you have to add in as a parameter or attributes there are on an object, just press ctrl-space at the spot where you want to type, and it will come up with the best answer... Well, if you did your best at typing your stuff...) (Actually the hardest part is to know how to read the all those types)
ooooh, love it, great comment, pinning it
Thank you Maxim, I have been waiting for TypeScript series for a long time. I hope this will become a regular thing.
I hope so too. Trying to find a regular schedule, like i did with streams
Thanks Maksim, this is what i’ve been looking for
Максим, спасибо за видео, добра и развитие каналу!
Приятно на английском смотреть, развиваю его на слух.
Добавляю, попробовал, все работает!!Спасибо еще раз, жпт который грозился нас заменить, не заменил Максима:D
Have a nide day!
Really I am too much tried with TypeScript event type.
Thanks you so much 10000000000000000......... times
Help Full Thanks!
0:50 that tip was what i were needing
Good information. And how to use one event handler for multiple event types if I dont want to duplicate code in seperate event handlers but implement a generic handler?
Thanks for sharing
1:07 what did you click to display the dropdown to import the ChangeEvent?
Thank you very much
Thanks master!
You are welcome 😊
lovely, thanks
Коротко и ясно, без воды.
Прекрасный ролик
Thanks for this.
I'm still getting my head wrapped around Typescript in React. The conversion from es6 has been... difficult. Things that just work (like spreading props into a component) is a real PITA in Typescript.
What are you struggling with right now?
@@satansdeer1 A lot of it is just trying to get typings right. Things like spreading props into a returned component or trying to map over an object's keys are way more difficult than they should be.
I feel like I spend hours boxing with the compiler instead of adding value to the project.
I've tried this a few times and each time I inevitably throw my hands up in frustration and go back to native es6 after several days of getting nothing done.
That said, I'm going to check out your 1.5 hr live stream and see if I can get an "a-ha!" moment. 😂😂
@@tgoyer hm yoy can also check out the first chapter of the Fullstack React Typescript book, it's free.
Also if you have specific struggles - i would be grateful if you'd share them, so I can make more useful tutorials
@@satansdeer1 thanks! I'll take a look at that resource. If I can come up with some concrete examples of where I struggle, I'll let you know.
Thanks!
Should I use typescript in my next projects?
I see you're using the Vim extension, would appreciate it a ton if you could do a tutorial about that!
Most posts and videos online just cover the basic navigation keys (h,j,k,l and e b w) and not the combos and other possibilities as much! (yap, yip, ciw, caw etc.)
Whilst that's good too, Vim shines more once you know the combos and all the quick tips/tricks you can do with it, in my opinion.
Thank you макс братан)
Пожалуйста 🙂
Awesome stuff thank you!
What i don't get about typescript is, why bother? Adding types to stuff just feels like extra steps?
And it's just one extra thing to Google in addition to potential logical problems or other frameworks or whatever.
I've asked my teacher but he hasn't managed to convey the benefits of typescript
@ThunderstruckElectronix I just started using Typescript and feel exactly the same way! Now that your post is 2 years old I would like to ask you now: which benefits do you see now? Would you say it is worth learning?
@vronus007 good question
Its actually really good and absolutely worth learning.
It can feel like a lot to learn typescript before you're comfortable with javascript, but it's not hard.
Typescript basically do what alot of other languages already do natively.
By setting up types for variables you can catch errors and adds clarity and structure.
And from what I've seen it's being used in projects depending in where you work, so it's probably a + to have it in your resume when looking for jobs
@@ThunderstruckElectronix ah ok, I see what you're saying.
I totally understand the benefits of setting a fixed data type (since I started coding in MATLAB before JS) - however, right now I am annoyed why I have to write additional code for events like onClick which was super easy with plain JS/React before. Now that my file is a tsx the onClick events simply dont work anymore and in order to fix it, I seem to need more lines of code which appears unnecessary to me. Perhaps I just haven't learned this lesson yet. Well anyhow,
thank you for your answer, I really appreciate it.
@vronus007 it does add a few more lines and if you're just coding on your own then it doesn't matter. You can use vanilla js and if you have well structured code then ts can be redundant.
But imagine getting thrown into a project where you have to work on someone else's code, and the code and its messy or it's just a lot of code with many files.
Those are the situations where I appreciate ts anyways. But maybe it's not super valuable in many projects. Like coding solo or smaller projects.
I hope that you find what works for you, Good luck
Спасибо!
Пожалуйста 🙂
So to type a simple function I have to type another function look at its properties and then delete it and then write it in accordance with that property or else go into the source of it and find it among 12000 lines of code and close the page and then type it back? How is this even applicable in real life?
Alternatively you know the event type that you are going to use
Pls make a 1hr long tutorial of react and typescript in 2021 pls bro you would get so many views