Lots of comments here saying that this is redundant because we can just use TypeScript. I've not learned much TypeScript yet, so I'll probably change my mind once I know more, but, I feel like switching to TypeScript would require me to down-tools on everything else I'm working on, at least for a time. This looks like a good way to start introducing Types to some of my components without making the full switch.
Why don't these videos have a zillion likes? The clear and perfectly understandable way you explain these concepts is just awesome. Even when some of these are about concepts I already know and use I still watch them because there's always some nice new detail to learn about them. Excellent work! thanks
This was exactly the kind of resource I was looking for as an introduction, and that there was an article linked as well for reference? May this man never step on a lego for the rest of his days.
TS static checks your types. If you handle TS well enough, your app will probably be free of this type bugs. That being said, it does only static type checking. If you make some ajax call, you won't be able to static check it's response, since it will be available only during runtime. PropTypes, in the other hand, can help us with those runtime type checks (kinda limited when we talk about functions parameters, but still great).
Runtime type checks even in that case really aren't necessary though. If you're making an ajax call to an external resource, there's probably some documentation telling you what the return type will be. With TS you can model the return type in your code and cast the returned data to the type after doing some basic preliminary checks. If you're making an ajax call to an internal resource, then there should be a common module with request and response types. Again, cast the response to the response type from the common module, and you'll get compiler errors if the type changes.
Not to be rude or anything but there is no way I use something like this while there is Typescript. Even if I had a todo application with a single component, I would still use Typescript.
And the best part is, ES7, react extension on VSCode autocomplete all the props while declaring a component. So, this is the best practice to create maintainable and sharable components.
@@dimitridoroshko yes, nobody is forcing me to work anywhere. If I don't like it I can quit tomorrow and find somewhere else to work. Or I can apply myself and start a business. Nothing is keeping me from doing these things except myself.
I don't understand when you would use this. Typescript seems to do the job. Also, do you only write proptypes when debugging? And then you erase them when you have found your bug? So it's like a super console.log()? It is not explained clearly.
proptypes don't run in production mode even if you don't remove them. Also proptypes is only for legacy code. You can't migrate an entire application from js to typescript just for these validations.
There is also a custom validation functionality where the user can predefine a custom validation function and throw an error in it if the prop fails a validation.
And is there a way to propagate these errors in compile time or notify about them instead of logging them into the console, where nobody notices them usually?
Nice overview of PropTypes, but I don't understand why you say Typescript has high overhead. Typescript does compile time checking and should have no run time overhead. PropTypes does a run time check with overhead if it's libraries. Isn't PropTypes an easy hack to get partial checks?
Yea, this the most important thing about TS. I also found that working with packages is way easier with typescript, because the autocomplete works better than without it.
Great video as always but proptypes is just stupid. The proper solution here is to just use typescript, which is what JavaScript should have been in the first place. If you only want to enforce types on your react components' props, you can do that with typescript.
Hello :) i am interested in buying the learn react today course. can somebody tell me if the course is still up to date in 2021? love the explanations of kyle, but i also want to learn "modern" concepts because the course came out in 2019 I think
I wish JavaScript had this kind run time type checking ability. Type Checking at runtime can also make the language faster as less the code would be much more predictable
@@TheBswan Yeah, that's the problem. Why would I check it manually. I want type checking being handle by the JSVM/interpreter like other typed languages. I want that kind of runtime safety
@@krtirtho why would you rather have runtime type checking that compile time type checking? Don't you wish you knew your code would work before you ship it? I've heard the argument about runtime type checking for API calls and things like that, but the solution there is to just model the return type in your code, or share common types between the API implementation and the API consumer. And runtime type checking would make your code slower, because the interpreter can no longer just assume that the types work out - it has to check them for itself. Typically the more you can accomplish at compile time, the faster your code will be
Can someone tell me what would happen in runtime due to wrong type pass as prop type? Typescript doesn’t warn as It check only at compile time. This wrong type will throw exception in UI. What if we proptype placed?
why everybody it's working for them, i'm using typescript in my project and i'm beginner to it, when i define propTypes of my component and place them as a parameters to the component for example: Binding element 'description' implicitly has an 'any' type.ts(7031)
Lots of comments here saying that this is redundant because we can just use TypeScript.
I've not learned much TypeScript yet, so I'll probably change my mind once I know more, but, I feel like switching to TypeScript would require me to down-tools on everything else I'm working on, at least for a time. This looks like a good way to start introducing Types to some of my components without making the full switch.
Why don't these videos have a zillion likes? The clear and perfectly understandable way you explain these concepts is just awesome. Even when some of these are about concepts I already know and use I still watch them because there's always some nice new detail to learn about them. Excellent work! thanks
these videos don't have a zillion likes because there are only 7 billions of us.
@@beatboss9275 hahahaha 😂😂😂
i absolutely love typescript
This was exactly the kind of resource I was looking for as an introduction, and that there was an article linked as well for reference? May this man never step on a lego for the rest of his days.
Kyle's videos just keep getting better and better. Thanks for your efforts mate.
TS static checks your types. If you handle TS well enough, your app will probably be free of this type bugs.
That being said, it does only static type checking. If you make some ajax call, you won't be able to static check it's response, since it will be available only during runtime.
PropTypes, in the other hand, can help us with those runtime type checks (kinda limited when we talk about functions parameters, but still great).
Runtime type checks even in that case really aren't necessary though. If you're making an ajax call to an external resource, there's probably some documentation telling you what the return type will be. With TS you can model the return type in your code and cast the returned data to the type after doing some basic preliminary checks. If you're making an ajax call to an internal resource, then there should be a common module with request and response types. Again, cast the response to the response type from the common module, and you'll get compiler errors if the type changes.
@@harleyspeedthrust4013 You're right. Good point!
@@juliohintze595 Thank you!
There are schema validation for run time if you need it
Great video, thank you for all your effort! I think you should start making react typescript tutorials as that is what is becoming the norm these days
i’d rather use typescript :)
Not to be rude or anything but there is no way I use something like this while there is Typescript. Even if I had a todo application with a single component, I would still use Typescript.
The isRequired property can still be useful
I totally agree with u, and I don't think typescript is overhead even for small projects
@@sheldon6520 also solvable with typescript by adding question mark to the type you make it optional
Same
it's nice that propTypes are similar to yup validation type options.
And the best part is, ES7, react extension on VSCode autocomplete all the props while declaring a component. So, this is the best practice to create maintainable and sharable components.
link of extension bro?
@@adivmt Ya Sounds useful if you could please share :)
Its called ES7
@@13Daniel37 thanks
Gracias por todo genio, siempre que tengo confusion en algo vengo directamente a tu canal y problema resuelto!
TypeScript is easy and great. All hail TypeScript!
Watched your video after longtime and felt very nice.
Kyle your my motivation
Make a typescript tutorial (with REACT will be helpful) 💗
Just incredible. Keep up with the good work
man you are amazing, thank you so much for your work
Simply Brilliant kyle 👌👌👌 !!!
Love you dude. You make my life saver content. Tnx a lot
Your videos are always short and spot on 🔥
Hats off , Well explained
Uhhh nice one but I would still rather go with typescript
You may never know what they want on the job, man)
@@dimitridoroshko If a company is using this backwards way of doing types instead of typescript then I don't want to work there
@@harleyspeedthrust4013 but do you have a lot of choice?
@@dimitridoroshko yes, nobody is forcing me to work anywhere. If I don't like it I can quit tomorrow and find somewhere else to work. Or I can apply myself and start a business. Nothing is keeping me from doing these things except myself.
Great video as usual. Thank you, brother.
Thank you, Kyle. Great explnation.
thanks
you really made it simple now
Hy Kyle, please make an video about deployment and stuffs about server, SSL, etc
as always, your videos are awesome!
This was really usefull! Thank you so much!
amazing tutorial , thanks
Kyle what if we use TS instead ??
what extension do you use in VS code so that the prop types option shows up when you type proptypes?
Proptypes are very very useful. Great video!
But what are your views on TypeScript?
wow.. really useful video, thanks
I don't understand when you would use this. Typescript seems to do the job. Also, do you only write proptypes when debugging? And then you erase them when you have found your bug? So it's like a super console.log()?
It is not explained clearly.
No you always keep them in the component. This is to make sure that you always use this component the way it is supposed to be used.
proptypes don't run in production mode even if you don't remove them. Also proptypes is only for legacy code. You can't migrate an entire application from js to typescript just for these validations.
@@chethanprabhu4475 i'm sorry, I didn't understand this. Isn't PropTypes something from Vue? Could you explain again?
There is also a custom validation functionality where the user can predefine a custom validation function and throw an error in it if the prop fails a validation.
Is it built in? Can you share the link for the documentation?
@@rizqyhbb I think he just means writing a function yourself to validate the type
Nice man 🙌🏼
Love from India ❤️ where are you from Kyle?
As always . Fun to watch .
nice video sir, thanks
And is there a way to propagate these errors in compile time or notify about them instead of logging them into the console, where nobody notices them usually?
Typescript is your answer
I was like " whatt , wireless bug ?"
😆
Nice overview of PropTypes, but I don't understand why you say Typescript has high overhead. Typescript does compile time checking and should have no run time overhead. PropTypes does a run time check with overhead if it's libraries. Isn't PropTypes an easy hack to get partial checks?
I think he was just touching on the overhead of writing typescript in the first place.
Very useful, thx !!
As a noob I ask, is this why Typescript?
Never used it yet but I like the idea of strict typing
This works only in react. typescript is a totally different language
typescript is language with , tons of great features proptypes is one of the similar one
@@aravindmuthu5748 yes I've got that. I'm merely speaking on why TS vs vanilla js, react etc
Yea, this the most important thing about TS. I also found that working with packages is way easier with typescript, because the autocomplete works better than without it.
@@opinetree code gets more robust and its like , security checkpoint everywhere in ts to guard code
Awesome video thanks alot
that intro guitar music is played by kyle🙌🙌
What is the best option for object with dynamic properties?
Great video as always but proptypes is just stupid. The proper solution here is to just use typescript, which is what JavaScript should have been in the first place. If you only want to enforce types on your react components' props, you can do that with typescript.
may be typescript is big ecosystem, but you need only check some records from db or responses from api, etc
I use TypeScript 😂😂
I love this guy
increible maestro!
Thanks Kyle. Super cools
Thanks so much!!! :)
Hey can you do a tutorial on react-vis? Or react data visualization?
Hello :)
i am interested in buying the learn react today course. can somebody tell me if the course is still up to date in 2021? love the explanations of kyle, but i also want to learn "modern" concepts because the course came out in 2019 I think
I wish JavaScript had this kind run time type checking ability. Type Checking at runtime can also make the language faster as less the code would be much more predictable
So you wish JavaScript was TypeScript?
@@TheBswan Typescript can only check types statically or ahead of time. Not in runtime or just in time. Its a basic difference
If you need to typecheck at run time you can write code for that lol. If typeof x === null return 'i goofed'
@@TheBswan Yeah, that's the problem. Why would I check it manually. I want type checking being handle by the JSVM/interpreter like other typed languages. I want that kind of runtime safety
@@krtirtho why would you rather have runtime type checking that compile time type checking? Don't you wish you knew your code would work before you ship it? I've heard the argument about runtime type checking for API calls and things like that, but the solution there is to just model the return type in your code, or share common types between the API implementation and the API consumer. And runtime type checking would make your code slower, because the interpreter can no longer just assume that the types work out - it has to check them for itself. Typically the more you can accomplish at compile time, the faster your code will be
Can someone tell me what would happen in runtime due to wrong type pass as prop type?
Typescript doesn’t warn as It check only at compile time. This wrong type will throw exception in UI. What if we proptype placed?
please make a tutorial for testing react with jest
Thanks!
Why not using typescript!
man your hair 🤩
2 years later, typescript became the standard in business.
kyle is the best
A question here, im new to react, is it a common practice to assign a proptypes to every props that is ever needed to passed into a component?
No Need of it, but it can be used for strict way of code. So no mistakes can occur.
I learned propsTypes a few months ago and I immediately threw it in the trash
TS ftw
Plot twist: Sally has Rapid Aging Disorder
Benjamin Buttons cousin
why everybody it's working for them, i'm using typescript in my project and i'm beginner to it, when i define propTypes of my component and place them as a parameters to the component for example:
Binding element 'description' implicitly has an 'any' type.ts(7031)
Thanks
react again, thanks kyle
Legendary
Thanks.
God or what ?😅
For this use case, typescript seems to be the better choice.
You motive me
How to show the paragraph again? Please help.
Page title
i am a paragraph.iam a long paragraph
on/off
let para = document.getElementById("para");
para.style.background = 'red';
para.style.color = 'white';
let btn = document.querySelector('#btn');
btn.style.color = 'blue';
btn.style.background = 'lightGreen';
btn.addEventListener('click', function run(){
para.style.display = 'none';
});
I would like to start learning how to program, but i dont know where to find good stuff to study and learn...
Just use typescript
Or use typescript 😂🤗 (dont take it bad)
You definitely should use TypeScript instead
nice!
What is the difference between propTypes and PropTypes?
once I get a job, I will find you and pay you !
You can import prop-types from React now, so installing it separately is unnecessary.
Or just use Typescript?
Who is Sally 😃???
FEWER bugs not less bugs
I use Yup and they are almost same.
Poor man's typescript 😂
This "bug" at the outset is exactly why combine 2 languages (HTML/JS) like this is so problematic.
Angular dev?
Typescript is much better.
hello, first
publish date is my birthday
dude calls typescript overhead but still uses a react library to solve react's type problem that works like typescript😆😆
Winner is Typescript
Naaaah... just use TypeScript. It has way better tooling, especially in VSCode
Hello world!
It would be amazing if you'd just make tutorials based on typescript. Pure JS is dying.
Deprecated now! Instead include prop type in function parameters itself.