useReducer with TypeScript
HTML-код
- Опубликовано: 15 июл 2024
- Today we're adding TypeScript to useReducer!
We're taking the code we built with my "Why I love useReducer" ( • Why I Love useReducer ) video and making it type safe!
Have a watch!
Source code: github.com/hswolff/youtube/bl...
--
NEWSLETTER: tinyletter.com/hswolff/subscribe
PATREON: / hswolff
TWITTER: / hswolff
SITE: hswolff.com/ 
Наука
Every Typescript video is extremely appreciated, thanks Harry.
Glad you enjoy!
So true :)
I'm genuinely surprised with how Typescript is that powerful. Thanks for sharing it man!
Yeah, same! Some of the type inference and passing along of types is really really fancy.
I couldn't diggest this topic like 6 months ago but now I came back from a 4 months hiatus of TS and React and I can understand it clearly. Keep on these videos!!
Love your way of teaching; I am in a binge! I especially liked how you subtly showed how to make impossible states impossible using powerful unions!
I started to learn typescript, and your videos are really helping. Keep them going!
Great job Harry! Another video with advanced typing examples. Right on!
Thanks Lem!
This made perfect sense, also having a useReducer in front of me and working along helped :)). Keep it up, thank you
All clear. Love your explanations!
Hey Harry, I really liked the content and TBH, the only video over youtube which explains it so easily, thanks
Bro, your videos are PURE GOLD! Thank you so much 🙏
I love your typescript videos
Harry, thank you for your explanation, it helps with my current TS learning path
Super useful explanations! Thank you.
Nice, love your typescript videos. Actual hands on projects videos would be cool too!
Great Tutorial helped a lot especially after watching the JavaScript related one
Really loved this, Thanks!!!
Thank you very much for a nice and clean tutorial.
This is great! Love these videos
I'm glad these are resonating!
Awesome! I learn a lot from this. Many thanks :)
Explained well. Thank you 🙂
So, so good. The content is small enough to digest and the topic is very focused to one small piece of React. I'd love to continue seeing these videos from your channel. I do have a quick question for you about interfaces vs types, how do you go about determining when something should be a type vs creating an interface?
Good tut, thank you
Thanks a lot... Helped me a lot haha. Appreciate ur efforts. New Subscriber.
I love your videos. Can you make a video showing one of your larger react development projects and how you organize your code typically? Do you do a global useContext? What sort of npm packages are your favorites? etc
Thanks a lot!
there are a few videos on RUclips talking about TS especially with Hooks. thank you for your effort
You are very welcome!
I love this video
cool harry thank you!
Nice. More React-TS stuff please!
Which font is being used in this video... I loved it ❤️
This video inspired me to try and make some helper types that let you express your actions in a nicer way. You can put these types somewhere in your application and import them whenever you need them.
type ActionsWithTypes = {
[K in keyof A]: { type: K } & A[K];
};
type ActionUnion = ActionsWithTypes[keyof ActionsWithTypes];
type Reducer = (
state: State,
action: ActionUnion
) => State;
How do they work? For the login example, you would have to create an interface like this:
interface LoginActions {
field: { fieldName: string; payload: string };
login: {};
success: {};
error: {};
logOut: {};
}
You could then use ActionUnion directly or type your reducer function with Reducer.
const loginReducer: Reducer = (state, actions) => { ... }
Auto-completion and type inference work the same as in the video. The drawback is that it's much more verbose if you have a lot of actions without payloads. The advantage is that it is - in my opinion - much more expressive. Feel free to use these in your project if you like them.
can you please explain more about typeof with examples?
Was just listening to Front end happy hour podcast - and guess who has only gone and been mentioned! I was like 'yeh! That's my host. Harry Wolff... With him... Harry Wolff'
Hahaha, awesome! I love the FEHH people! They're terrific!
8:48 what if the payload is not always string but is dependent on the property which the fieldName is referring to?
could you plz do a video that useImmerReducer and useContext with Typescript?
Have you used Flow with React at all? We are currently debating whether to use Flow or Typescript for our React project. The app is pretty big, so it's definitely not an overnight migration. Any insight you have would be helpful.
Hey Agrawal, how are you doing?
We've passed through the same situation here at the company I'm working for. We found that Typescript is the most logic approach to long-term support and scalability. It's actually a mess to discuss about the future of typed javascript, for me, in the end it always comes down to choosing the most confortable stack for the team.
We actually started using Flow at work before quickly switching over to TypeScript!
Flow is primarily built for Facebook's needs and isn't really a community project IMO. Meaning that Flow is built for Facebook and TypeScript is built for the community.
I'd heavily recommend TypeScript over Flow.
@Hrray wolff debug vsCode plug-in is?
It would be really helpful if you make a video how useReducer and Redux work. just thought
you should do a series of react hooks with typescript!
Oh that’s a great idea! Thank you!
Can you recommend a guide on when to use an interface vs type?
Are you asking me to make one? 🤔
@@hswolff Why yes....I believe I am!
@@hswolff That would be nice. :) In a framework ive even seen a class being used to make a type -> class X = {something:string}
have you read this post? stackoverflow.com/questions/37233735/typescript-interfaces-vs-types
Can you please make one, this would be amazing
TypeScript Union type in ACTIONS, does not work for me
Love your video.. I prefer that if you can shrink your headshot area little bit.. I know you are handsome.... ;)
Interfaces in TypeScript are super confusing for C# developers. In one case you used Interface and then you changed to Type. Why not using Type all the time?
Sounds like I need to do a deep dive into the differences between an interface and a type....