If I Started Learning TypeScript, I'd Do This

With these 2 tips, I think you'll become a better TypeScript dev faster. And learning TypeScript is absolutely worth it. Not only for personal projects, it has also gotten super popular in job-settings.
-- links
Discord: / discord
My GitHub: github.com/joschan21

[@mattpocockuk]

Thanks for the ts-reset shoutout! Much appreciated.

[@joshtriedcoding]

Such a simple and useful concept. Appreciate ya dude

[@dvirberlo]

A better way to add the types globally is to add then in tsconfig. The d ts files have different specific usage, as you mentioned in one of your recent videos.

[@mattpocockuk]

​@@dvirberlo Unfortunately not - tsconfig doesn't offer a truly ergonomic way to add types to the project. If you add it to "types" it becomes the ONLY types in your project. If you add it to typeRoots it breaks all sorts of other things.

[@dvirberlo]

Hmm. Thanks for correcting me. So this is the best hack, I suppose.

[@filipniklas]

Missed opportunity to say "You don't want any 'anys' in your code" 😅 otherwise, good stuff! 👍

[@user-lx9gs5ve4z]

Love your vids and how you explain the issue and solutions!

[@AliCaliskan-km5jc]

Always happy when I see a new video upload by you

[@omarshref4803]

continue the good work man love you and your videos ❤❤❤

[@snk-js]

an excellent communicator, gratz

[@nirjoyhasanantor3149]

I am exited to learn something new in typescript I recently shifted from JavaScript to typescript and using typescript for new projects it is really nice

[@joshtriedcoding]

Glad it's going well for you using it! Learning TS definitely takes some getting used to, but once you kinda get it you don't wanna go back

[@nirjoyhasanantor3149]

@@joshtriedcoding yeah I am loving it

[@8koi245]

Ohhh yeah I'd love a code review! I wish I had time to finish my last project tho

[@XxGgunJIZZxX]

I love all of your points here. I do feel that I need to specify an edge-case where I feel "any" is allowed 😅 My project is currently using a library that contains a LOT of components, and it has not been converted to typescript yet. It would be absolute hell to create and maintain all the prop definitions for all those components. In such a case, I definitely feel "any" is allowed

[@joshtriedcoding]

oh yeah for sure, fair enough

[@YOUdudex]

Cool video, thanks Josh

[@damagee8141]

I have been using "noUncheckedIndexedAccess" for some months. And there are good reasons to use it but there is a trade-off. When you are using a basic for-loop that iterates over the elements of an array, you will have to check if element[i] is undefined or not because typescript doesn't know. A better way would be to use a bang right after it, ( like this: arr[i]! ) to tell typescript that you know that this elements won't be undefined but to me it feels really bad to do this and checking for undefined with an if-clause is even worse. The best way to work around this is to use for-of-loops but sometimes it's just more convenient to use a regular for-loop (e.g. you don't want to start with the first element, you want to access the array in a different order, ...) People always talk about how great typescript's inference is and for the most part this is true but for things like this it limits you more than it helps. I still recommend using "noUncheckedIndexedAccess", just know that it's not perfect.

[@alexanderkomanov4151]

Wow! It is was amazing!

[@carlosricardoziegler2650]

Great video!!

[@PostMeridianLyf]

Im thankful for you pointing out these issues but reluctant to add another library. Rather crate my own solution.

[@vikashkhati007]

Can you please make a video on your vs code setup which theme are you using which extension are you using , like you are getting code complete sugesstion.

[@Luxcium]

This guy is smart and he is saying the truth and he is explaining it clearly and I love this channel ❤Josh is one of the best tutors I’ve ever seen and I think he is going to be a big deal soon the guy is going to be more than a million followers soon !!! 🎉🎉🎉🎉

[@invinciblemode]

But you’re learning from someone with little to no work experience?

[@invinciblemode]

@@saufth lmao sure buddy

[@joshtriedcoding]

Appreciate you man. It really means a lot.

[@Luxcium]

@@invinciblemode People who have a ton of working experience don’t have the time or the will of experimenting with TypeScript and some people who have work experience learned React before even Learning JavaScript… This dude (Josh the amazing) is spending all day and night reading and learning about TypeScript and he is giving the important stuff one should know about… So maybe he is not working in a team where everything is being decided for you, or worse where everyone follows no conventions and are producing inconsistent code but Josh is working on this day and night for at least one year so I don’t understand what your argument is all about…

[@invinciblemode]

@@Luxcium my argument is that he hasn’t seen a real codebase

[@gradientO]

5:25 How'd you share api type logic between client and api? (Like a typical nodejs and react app) Similar question for form validation

[@daromacs]

Josh, I have been into more advance TS because I'm into more advanced projects. Suddenly it came to my mind, what would be the differences of managing data with context api or custom hooks?, let's say fetching data, but also other kind of data such as states. Sometimes I am not sure when to use one or another, if possible could you make a video please? thanks!

[@bloodylupin]

if you get the state from a hook it won't be the same for every component. To have a single state you have to pass the state in the props and to avoid props drilling you need the context

[@_aryan_570]

I never used TypeScript, but will it make my life easier as a developer? Should I learn it?

[@joshtriedcoding]

oh yeah. I'd never to back. Definitely

[@andreyokhrimenko2271]

Thanks for video, can some one explain in which sutuation we do fetch and dont know what we get? Real world example? I learn web-dev by free courses and had no examples of this sitiation.

[@czancdy144]

hey josh i really enjoy your videos i have a request can u make a video on state management in nextjs app router with rtk query and how to use hooks provided by rtk query with ssr

[@user-on2rx4si7g]

This will be good with SvelteKit thank you Josh

[@joshtriedcoding]

Awesome dude

[@8koi245]

hell yeah!

[@TheIpicon]

I've searched for noUncheked for so long!

[@Endrit719]

Josh tried coding and he fckin rocked it

[@psyferinc.3573]

will yo udo a review with nextjs and supabase ?

[@QwDragon]

In most cases you should trust that your own apoi follows the schema and don't want to validate unknown. Using any with casting to expected type seems much more logical for me.

[@vim55k]

Is there any codebase that uses nouncheckedindexaccess?? I am all for it, but it requires to do many checks

[@anonanon7368]

I like typescript-eslint implementation from create t3 app, it prevents all these problems

[@NatnaelAbebe-og8bt]

bro if I start learning web development to day is it worth or can I get a job please help me

[@savit3r]

Can you talk about why you use Yarn over NPM?

[@eugeneponomarov7429]

`noUncheckedIndexedAccess` is not something I recommend to use, you will be forced to check every time you access an array. It's better to leave it as it is and just type cast to possible undefined when you now it's going to happen.

[@greeffer]

Wow! The best part: "You don't want any anys in your code."

[@patriciebakosova4878]

Hey man! great video again, really helpful! How do I send you a DM? doesn't let me since I don't have you in my friends list.

[@joshtriedcoding]

Weird, I'm pretty sure that should work. Have gotten a lot of DMs from people without being friends. Is there a specific error you're getting?

[@patriciebakosova4878]

@@joshtriedcoding all good now! it was actually my account that had it blocked..

[@ShayansCodeCommunity]

Hi sir how can we train own ai model to generate new content like images, text, audio, video also add web searching functionality in Node js

[@joshtriedcoding]

For text I trained some custom OpenAI models and that works super well if you kinda know what you're doing and how to make proper datasets (goes for any ML). For images I'd recommend using Replicate, WebDevCody has recently done a great video on this

[@ShayansCodeCommunity]

@@joshtriedcoding thanks sir but I don't want to go openai side

[@ShayansCodeCommunity]

@@joshtriedcoding I want to train my own ai models using tensorflow

[@ShayansCodeCommunity]

@@joshtriedcoding I don't take money from my dad or any other friends or relatives, thus I can't pay any money. I favour complete freedom. If it is not free, I will do it for myself if I need to.

[@mohitcodeswell]

Hey Josh 😂

[@joshtriedcoding]

hey dude waddup

[@mohitcodeswell]

@@joshtriedcoding I guess you know my name lol

[@jayantrohila]

create playlist of your video they are scatter scattered every where

[@schumanncombo]

why do form validation with client side scripts at all ... inputs have a native way with min. max, required, pattern, range ... your code is 100% noob code too - and react for sissys. but anyway - there was some good hints for beginners for sure.

[@xoldyckk176]

That string | undefined thing defeats the purpose of typescript. When you've annotated the type of a list as string[] it should be certain that everything inside that list will always be a string. This certainity is asserted by making sure whenever you're working with that list any kind of mutation to that list and its elements at runtime is done after explicit type checking. So, the place for explicit type checking should not be when utilizing the list or an element of that list. Therefore, it is more of a paradigm and mental model you need to have while working with typescript.

[@joshtriedcoding]

Ah, interesting take man. This annotation just serves as an example of not having to deal with a never[]. This approach shines, specifically for react, when mapping over an array of items you're not certain to exist.

[@Luxcium]

I dont think we must make the TypeScript conformant to our needs instead we must conform with TypeScript and when you know better than TypeScript you have the _as_ keyword to let the compiler know what you understand something it doesn’t… I do agree that it is annoying that TypeScript can not infer when it is trivial and obvious what an array contains but maybe it’s not the role of TypeScript after all… we must be mindful of the fact that it may be containing undefined or also based on your preferences you just need not to activate this level of strictness TypeScript gives you the choice!!! 😅

[@gradientO]

​@@Luxciumlol this just makes me love Java's typing more

[@parlor3115]

If I started learning TypeScript now, I'd stop and learn C#. It offers better type safety guarantees and the job are higher pay.