How to use TypeScript with React... But should you?
ฝัง
- เผยแพร่เมื่อ 18 เม.ย. 2021
- Learn how to setup React with TypeScript. Compare the pros and cons of using TypeScript in an React project. Learn more in the full course 👉 fireship.io/courses/react-nex...
#js #react #typescript
🔗 Resources
Full TypeScript Video • TypeScript - The Basics
TS Docs www.typescriptlang.org/
Create React App with TS create-react-app.dev/docs/add...
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Get more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font - วิทยาศาสตร์และเทคโนโลยี
the ending was by far the best one i have seen 😂
Agreed!
Yeah everyone know that react is best developed with
it convinced me that React and Typescript are
I wholeheartedly agree that
Mine ended with an ad, so it acted like a good segue 😂
Now I watched the full ad at the end cuz i thought the video was not finished. Genius move!
The ad was the answer I promise that I got a razor advertisment .
I commented about (blazor) before in this channel 😁 so is it just youtube telling me to use blazor framework?
I love c# and I'm learning js but I really hate the syntax I know js made for the web but then got many framework that you could be a full stack developer. but it still a learning curve to master all these . I prefer working on one technology stack like.net which offer everything,
My issue with js and xamarin as well the syntax and heavy useage of arrow functions . I know typescript is more oop than vanilla js . it seems easier coming from oop experience and because it made by the legendary programmer that made c# .
Same, damn youtube algo
Obviously (you did)!
Lol yep
Should you use Typescript with React? Obviously.
Coming from a lot of C# and OOP, I started with TS and loved it way more than JS. Being able to ensure a variable type is extremely useful and more readable.
I am working on migration of the components into tsx and I am depressed 🥲
@@lonelyastraunaut Yeah, it doesn't seem like migration from JS into TS would be that fun, but starting out with a TS project is much more preferred with me.
same
while I don't think it's accurate to say I come from oop, it does make a lot more sense to me in most cases. I don't understand why you would ever not want strongly defined data types for your variables for eg. People vaguely claim it somehow saves time but I don't see how, and even if it does the tradeoffs don't seem worth it.
yeah it makes a lot more since to write that way, kinda solve the skill issues js devs might have switching to cpp later in their career
now we need one of these great videos on TDD
second this... a whole series on testing by this genius would be awesome
would really like some proper series on testing
Tdd is bullshit. Waste of time
@@MilanDrazic Agree
@@MilanDrazic Strict TDD is indeed annoying and no one really follows the TDD approach 100%, but I guess it still gives us some nice principles to work upon.
That ending tho... nice one fireship
+1
The answer to "should you use TypeScript with React?" is "obviously" :) /s
OMG. He is a mentalist. Today I started learning typescript with react.
I identify as a precog
@@Fireship Hahaha
He really is. My guy launched the MySQL video the day I started to learn MySQL for a project.
Me too
He posted a video about WebRTC 2 days after I implemented a voice call into a fivem cellphone script.
After using TS with my react projects for the last 5 months, compared to the last 2 years with only JS, the difference is night and day. I can really never go back.
I used to be against TS because I thought it would be annoying, but it hasn't really. It's only helped me develop faster with more confidence of less bugs.
The auto completion is a life changer
ROFL. Develop faster? With much boilerplate code, seems legit. IMO TS is for dumbasses who can't do sht w\o autocompletion smh
@@PiskenDragen I used to think like you till I realized just how wrong I was
@@PiskenDragen using autocomplete has nothing to do with skill. Autocomplete is just a way to save time rather that writing the full words.
so true, and I love the auto completion, it saves so much time not having to open the docs.
No bullshit...pure content..saves you a ton of hours jumping between blogs and tutorials.I would say you have an amazing talent at condensing content and put it in simple forms.
I read a really good article by Kent C Dodds on how to write a React Component with TypeScript, and he suggests to not use the `const Component:React.FC = (props)` (as seen 4:52) syntax but rather use the `const Component = (props: Props)` syntax. Basically, the first one has a children prop even if we didn't pass one, whereas the second one doesn't. (and a few other reasons as he lists)
It's a really good read, and interesting to hear his reasonings behind his opinion, I recommend it. TH-cam will flag my comment if I post a direct link, but look up "How to write a React Component in TypeScript by Kent C Dodds" and you'll find it.
I always use that and even don't known of FC existence.
React components should always be named functions: `function Foo() { }`
And another problem of FC way is: it's impossible to define a generic Component which is very useful sometimes.
@@WarmheartedKyubey It is possible, but does not look nice.
const MultiSelect: (p: Props) => React.ReactElement = ({}) => {}
@@gajo357 jesus christ, does not look nice is an understatement.
Yes. Code overhead is a fact of life, writing more code is a reasonable trade-off for rock solid reliability through the development process. TS all the way!
I love all the errors in my IDE.
Did I just say that. Damn.
@@akshy471 better in your IDE than in production!
@@akshy471 Makes my personal projects so much easier and faster to develop!
And with tabnine and copilot, that's not even too big of a problem.
Ok here is my pov: I would use TS because it gives me what I have in other typed languages but I have allready adjusted to JS so changing to TS sounds like trying out something new to do the same stuff for some virtual tradeoff I don't know if I need it really if things work good now.
Bruh that "god damn precog" line got me so hard I'm still dying 😂
I HAD to listen to it twice. So good xD.
"precog" means the AI assisted errors popping up in VSCode?
I started using typescript for the first time 6 months ago when I switched my job and started as a react developer. I've been coding js long enough and wasn't happy that they were using ts instead of vanilla. Oh man I was wrong. TypeScript is great and everything i wanted JS to have. Give it a try if you haven't.
hello...
i want to learn angular... i have completed html, css, bootstrap part.. now im very confused btw these two (js/ts) can i start directly ts from scratch or should i learn js before ts?..
i know java very well.. and Ts is like java but Js is totally different..
@@yashpawar7881 learn js before you learn TS
TS is a subset of js you are still coding js but you have types definition
@@upcomingweeb136 Superset*
Thanks! This was the perfect quick overview without having to dive into a 3-hour start-from-scratch tutorial.
Hmmm... What type should i use?
Few weeks later
*Spams any*
thats why u should make a interfaces first
Also, unknown type is pretty handy
I hate to admit, but it's kind of necessary sometimes (if you want to save time right now..)
Oh no I'm so guilty of this.
Hover over bad code > quick fix
It saved me hours on all my projects
Loved the ending 💙
Man😂😂😂😂
should've said "it depnds" :D
Lol
The ending is shittest possible, i was waiting for an answer
A few hours ago I started a university project that requires React with Typescript. This video follows shortly after. I don't know how you choose your timing but it's awesome!
I began using TypeScript with React for the last few projects I been working on. At first a lot of frustration trying to get around all the type cryptic errors that kept popping up and adding to frustration and development time to the most simple tasks. Now with practice and expierence TypeScript has actually grown on me and all the code hinting I get from it is so nice to have. The cons are yes you have to write a ton more code especially as you create Interfaces for each component's props but as your app scales you will be happy you did. TypeScript definitely a must have for me now.
what scares me is I get all the references on all the videos meaning i spend my life watching TV
There were references?
I took over a React project in JS almost a year ago. I shifted it towards TypeScript around April. I am so glad I did, it really is fantastic once you get over the initial hurdle of "why is my compiler complaining? I know my code!"
I agree. Once you realize that the majority of the time, the compiler is right, it's great!
@@liamwelsh5565 Eh. The compiler is really dumb at times. Specially when it comes to GET requests. One of those times where you really just have to fight it.
@@livedreamsg You have to create api models for specific requests. You can't expect typescript to just know what a server is going to send you smh.
I just started learning TypeScript recently, and the first thing I did was implement various functional interfaces (Consumer, Predicate, Supplier, etc.) and the Optional class from Java. Because I love them. Could I have done that in pure JS? Sure, of course. But generics and strict typing make them *so much more useful* in TypeScript/Java.
been using TS with React for about 4 years, for enterprise level applications I would say it's pretty much a necessity. I wouldn't really want to work without it unless I'm building a very small app
I must say that TS has saved me many hours of debugging, I feel that starting a project is slower but once started everything is more fluid
Los sigues recomendando después de dos meses ?
Yea this is the bug plus for it
Love the fact that you made us think by ourselves if we should use React along with TypeScript, I wasn't expecting that. That's an enhance for your viewers critical thinking.
Great video as always, would love to see you talk about test driven development more in depth
I always thought typescript is somewhat confusing to learn. But after watching your video It seems easy. I know there's way more to it. But amazing none the less. Tnx 🥳
I don't get too attached to tools (languages, frameworks, whatever) anymore but damn if TypeScript doesn't make me feel all warm and fuzzy inside. The only vanilla JS I write now is throwaway/scratchpad type stuff.
First time using typescript is like hell, but im moving along with it. Im in love with typescript now after 1 year using it
Started using Typescript a couple of days ago and I'm now in love with it!
It is much easier to learn TypeScript for a C# dev rather than JavaScript. Thanks for the video, man!
I was working with JS in my react native apps, but when I switched to TS everything was amazing, it helped me a lot. Now my default language is TS, no doubt!
I know it probably sounds stupid its because I am a noob but does switching to TS affect the packages imported from outside written in JS?
@@vaishakm6 it does not, you can configure your ts project to work with js if you want (although i don't do it personally cuz almost every package has ts implementation). You just need to check if your imported packages has ts implementation, if not there's no issue you can work with it. Also you have to know that ts will be compiled to js, so ts helps more with the development process.
@@omdxp ok thank you for your help very much appreciated also Happy new year 😄
@@vaishakm6 thanks, happy new year to you as well ❤️
I started using react with no ts knowledge, but when I learned TS and started using it with react, I loved it
I like how I literally was taking with a friend about how I need to learn React with Typescript and TH-cam recomends me this.
I use Typescript on backend and it autogenerates OpenApi documentation.
And Typescript on the frontend can autogenerate http client with backend models attached for each API call.
And that's wonderful
I build the openapi, and generates toe definitions from that. Both are possible, just what works the best for you. But our definition is to design the api first, language and framework agnostic, just plain openapi.
For people who think this video is open ended, its not. Read it yourself:
"...The answer to should you use typescript with react is - obviously" 😄
Is obviously JS. 😂😂. Anyways you fall into trap.
thank you for being the only real developer on the internet and proving so in a timely fashion
When you come from a strictly-typed background, watching JS developers argue that types "add too much boilerplate code" and "aren't worth it" makes you question where they learned coding in the first place.
To say it politely.
Expressing what you actually mean and defining the invariants and constraints your code is going to live and die by = boilerplate. Sprayed my coffee out my nose at that one.
This is why people need to learn programming with something like Java or C# first. They'll miss the types once they inevitably have to code in JS.
@@HandledToaster2 nope, I started with C , C++ and Java and I don't miss types at all. JS just requires that you be more attentive to inputs and outputs, and that's always a good thing
@@gravy1770 I stand corrected.
@@lottexy yeah i know the feeling, it just feels wrong, like you're making grammar errors or something lol. Python is even worse cause you don't even "let/const," you just straight up "foo = 1"
TypeScript with everything. It baffles me how lost I feel when I touch vanilla JS.
Bummer. Typescript is just strongly typed vanilla JS. The benefits are not arguable, but if you write good JS, it's only a nicety
@@vintagerealityvr do you use a notepad as ide? The difference between ts and js is night and day
I on the other side enjoy js when I have the opportunity to touch it. It's nice not to have to specify a million interfaces and props. Sure, it's not great when you're doing something that MUST work, but I like it for my side projects - I'm faster with it.
@@KebunH you didn't counter my point. Like I said, strongly typed JavaScript has inarguable benefits. The main benefit of strongly typed languages are error catching on compile (and with modern ides, error catching on typing). I don't know how long you've been coding JavaScript but you can write clean Javascript without being strongly typed.
@@vintagerealityvr the benefits go far beyond that, for example having to type only a few letters and hit enter for every term, or getting an accurate list of autocomplete options when you hit a dot, instead of having to remember your codebase by head, because of the ide being much more intelligent and context aware when there is a type system, making it also much faster to code like that. This is even more so when writing in languages like swift, where even arguments get template prefills, but TS at least somewhat comes close to that development speed.
Of course you can write perfectly fine code without any compiler help like when you write vanilla JS, my point is just that its much slower and requires much more typing because you always have to type everything in full instead of just 2 or 3 letters and hitting enter, and its much less self documenting, quickly making it more tedious to work with when the codebase grows bigger
I _try_ to write my code so that others (namely, future-me) can readily understand what it's trying to do without mentally tracking types for every component. So I'm definitely a TypeScript fan 😎
Creating my own configuration (I firmly believe create-react-app is black magic) for my boilerplate TS/React project taught me a LOT. And it's worth it.
You give a very good argument, recently been heavily considering what language I want to use good picked the other way, but the improved error notification is great and the auto documentation sold me
referencing Bukowski. My all time favorite writer aswell. Damn Fireship, you crazy.
I don't really do website development or anything related to that, but I still find this channel entertaining.
These vids are great! This is my Q though, when I was implementing my TS in projects, not every OSS or library was TS enabled and this was a pretty big problem...
I had to stand up and applaud after that ending. Like everything that I have to do, I didn't do it, but the ending was that good.
Man! This video was really good. I'm so tired of other, *generic* tutorials.
what's wrong with Tutorial :(
@@danielegvi I C what you did there
First use js with react after more comfortable with it. Then move onto typescript 🙏🙏👍
Fantastic video, please never stop making them. This is fast becoming my number one place for programming related learning and entertainment. :)
Good thing I just started learning React a few hours ago. Might as well learn Typescript too then.
Can express how grateful I am with your videos man, I'm also a developer content creator and someday I want to be like you :)
El maestro!!! Tus cursos me ayudaron muchísimo profesionalmente! Gracias!!
Este canal es una joya pero tus cursos de Udemy también lo son.
Testing pleaseeee ❤️. Also a bit longer on tips and trick to write a good tdd
You sneaky....
I was waiting for the answer. Watched the ad. Was confused. Replayed.
Damn. Got me good
Anybody except me immediately tried to figure out how the JS function at the beginning of the video works? 0:09 😂
Great video BTW 💙
you never fail with the scary timing my guy
This is legit spookier than AI tbh. I think of a topic and this Fireship makes a video about it. 😂
they taught me java in my first year, then they teached us javascript, and then I discovered typescript. It helps me so much.
This was a great video.
That said, as much as I would love to use typescript for my current project, we are well beyond the stage where it is reasonable to pivot to tsx. Gonna see about using it in a project I am gonna be part of in the near future, tho.
Everyone is talking about how many bugs TS catches and i just want my damn intelisense when writing code!
Anyway, JS no more, Typescript is the way son! ✝️
Agreed lol, I just can't stand hovering over a variable and not getting any intellisense
ॐ
If you have jsconfig.json setup you get that for free.
I've never been a fan of typeless scripting languages, so I'm happy with TypeScript.
I started my coding journey using Java. The single biggest thing that had me stitching when I started dabbling into Javascript was the lack of good Intelisense support (at the time). I'm glad to see that that is changing.
I think everyone hates Typescript starting out until they actually use it and realize how many bugs it catches. It's honestly amazing how smart it is. There's been so many bugs it has caught for me instantly instead of spending minutes to hours debugging.
1:49 I love your video clip choices 😂
this made me realize how easy dart actually made things, thanks dart & flutter team
TypeScript is a blessing, even with React.
You MS-OOP-ANTI-HASKELISH-FP-STYLE fan boys never split the difference when TS goes bargain sale
Starting the week in full throttle with React + TS. 🚀🚀🚀
good luck!
I think u should learn angular instead
@@siapaayo7318 Oh god, please no
I've been using it in a month all he mention is true. Type error is handle easily, but for the newbie you being force to understand every event, method type.
This convinced me to convert my React app to TS
Just came back here to be convinced again lol
Just finished converting my whole app to TypeScript lol. It wasn't super easy but now I'm happy about it 😊 I love strict type checking
I like Typescript especially, because it's types are actually more powerful and flexible than classic typed languages once you get into advanced types. Though of course, without the speed benefits of runtime types.
Typescript is the reason why i love angular more than React or Vue. IDK why some people says they hate angular because of typescript.
I found my best fullstack after learning Typescript + Angular :
Angular + NestJS as Backend + Prisma as ORM
React works great with typescript though. Also Prisma is FANTASTIC, nest is nice but I don't like how super OOP the coding style is.
tbh I don't like angular because it feels way too complicated. For example, a simple component in angular will take a class and a separate HTML and CSS file (I know you can add the template in the ts file too but I don't think anyone does it) but a single component in React is so small that I can type it here.
const Component = () => Hello
@@krishgarg2806 in enterprise level application you need a specific structure which everyone follows, that why angular is used instead of react. But now a days, the companies themselves define their structure and use react
i have a question about inference, when i have a state with type:
interface IFood {
fruit: string;
vegetable: string;
}
and a initiated my state using this:
const [fruit, setFruit] = useState({} as IFood);
is correctly?
This made me want to try typescript thanks
Heard of it and thought omg another language to learn but I like how it's an add on module that does makes things cleaner to read and intellisence too
JS for when you just want to feel busy but the project is never going to be finished, TS for everything else.
Reverse that and your right
TS for when you want your team members to spend exorbitant amount of time creating arcane type definitions, whose benefits are at best marginal. Just check out Redux' type definitions that none of their devs even understand anymore.
Also TS is for if you want to fix missing (or worse simply wrong type definitions) of third-party packages. Many developers just use "any" in those situations, literally defeating the whole point of type safety.
Add to that the horrendously slow compilation time that even the Chrome DevTools developers cry about and regret after switching the DevTools' code to TS (there is a video from Google on that).
TS is web development for Java developers. Worse even, because at least Java doesn't have header files, which type definition files basically are.
@@kerimgueney The implementation of the type definitions is completely up-to-you. It depend on developer how well did he write them.
There are some good examples (like React Hooks) and bad examples as well (like Redux you've mentioned).
Some devs obviously are overusing fancy features of TS type definitions where there is no need - and you can't blame technology/language that gives you lots of features to do your job (otherwise you would need to also agree that JS Developers overuse bad practices because JS allows them to do so)
When you have properly defined type definitions - then your code doesn't look like Java. Heck, in best cases it looks almost exactly the same like JS, because with proper types you would have pretty good type inference, so in those cases - you have JS code with TS benefits.
"Add to that the horrendously slow compilation time that even the Chrome DevTools developers cry about and regret after switching the DevTools' code to TS (there is a video from Google on that)." - it completely depends on the tools and module bundlers you're using to compile it. When properly configures, it can be blazly fast ;) (look at esbuild)
@@DEVDerr Your first arguments are essentially, "Just do it correctly, man", which can be said about JS .... or any other language, really.
"it completely depends on the tools and module bundlers you're using to compile it"
I trust that the Chrome DevTools Team did in fact squeeze out as much performance as they could. The compilation is still orders of magnitude slower than the old Google Clojure compiler. Again, I recommend the recent video by Google about their switch to TS for the DevTools source. Oh and cherry on top, when they contacted Microsoft about how painfully slow the compilation is, Microsoft basically responded with, "It's intentional. Deal with it" lol
@@kerimgueney TS for when you want your team members to get instant intellisense on their editor instead of having them dig through documentation and pollute the slack channels.
TS is one of the few creations of Microsoft that I actually appreciate a lot.
+ VS Code
Your way of explaining is superb 💗😊 thanks for sharing with us this information video
Can you tell me which is better
React testing library vs jest vs react inbuilt testing features.
That ending 😂❤️
Meanwhile when I'm just learning Svelte the whole internet is shouting at me USE REACT!!!...
Let them shout.
The status quo is usually wrong
why not both? I do. They both have their uses and are not mutually exclusive. Then again I understand when you're starting out you kinda want to focus on one thing but later on, pick them both up, and then some more. People will always call you out on it, but typically these are the people that picks a hammer and then thinks they can use it on anything to fix it. :)
@@Polsson65 I dare to say Svelte is so easy more companies will adopt it over time. As working with it is so quick.
@@shapelessed I honestly wouldn’t be surprised. I’m doing all of my side projects in Svelte going forward.
Started learning React last April 1, immediately used TS.
The best stack combination: Angular(preferably) or React with typescript, NestJs or Deno as backend.
I'm never going back to JavaScript again.
Absolutely agree. That's my go to stack as well.
Meanwhile, all those technologies utilize JavaScript. Different levels of abstraction, choose on which level you prefer working for your project. Sometimes that's still vanilla JS for me, e.g. for a one off custom element widget. What people also tend to forget is that strict type checking is also possible with JSDocs, which is an arguably faster setup initially as it works without needing a compile step. But then again, if you use React, Vue or Angular you already have a compile step, so using Typescript seems like a no-brainer for any project which already has a compile step.
@@1Joren I've tried typing with JSDocs and it's a major pain in the ass. It's also not nearly as powerful. Additionally, it doesn't matter if it still uses Javascript under the hood. Many languages compile to other runtime languages before they are ultimately turned into machine code. One major advantage of using Typescript is the possibility of changing the underlying code in the future. If webassembly ever gets off the ground, you can bet your ass that there will be a path from TS => WA, and while the same will be true of JS => WA, TS will be better suited and prepared for that migration.
@@Beakerbite There aren't that many things you can do in TS that you can't in JSDocs, and if you do run into something you can always create a TS file for that specific thing and import it in JSDocs, keeping your workflow free of compilers. If you run into something, let me know, maybe I can help you figure it out!
There's multiple reasons why for browsers JSDocs typing may be a personal preference:
- easier and faster local/debugging workflow
- tooling works out of the box (e.g. storybook or karma/jest, you dont need a TS loader or something similar)
- a type issue doesn't prevent your code from working, you can temporarily ignore it and fix later
- typescript doesn't support certain experimental JS specs, so you're hard locked on what typescript supports. Example: importmaps (they tried to add it in 4.3 I think but now it's planned for 4.4, not sure if it made its way in yet...)
Typescript is a good choice for many projects, for many people. But there are valid reasons for preferring JSDocs to type your javascript :)
I thing "type" is a better use than "interface" for defining custom type that apply to model, semantically, interfaces are used to abstract implementations from "type" and "class". And you can even write more advanced types with it
It just happens that anything that isn't a primitive in JS is an object, so there isn't much difference between a regular old object and a "class instance", they're all really just a set of keys and values. That's why you use the same keyword for either case. If you had two different keywords, they would do exactly the same thing.
OK I needed this AGAIN!!! THANK YOU!!!
Got a "learn Typescript - full course" video suggested to me after that ending, so I guess I got my answer
Question - you mentioned how Babel replaces the functionality of the TypeScript compiler's "target" version. However, I've seen people use both TypeScript and Babel together - something even detailed on the official typescript website. Is TypeScript + Babel even useful?
Babel has a lot of useful plugins that Typescript doesn't have (ex. optimize imports, most bleeding edge language features, etc.), that's why they are mostly used together.
@@dmz985 "most bleeding edge language features" do you have an example?
What was introduced into ES, that wasn't in TS, or even already part of it?
Typescript has the ability to play by different rules. They can jump the gun on the proposals and introduce language features that don't even exist in the standard. So curious where they might have missed the boat.
@@bolskify Babel used to have experimental stuff way before Typescript. If I remember correctly, Babel had generator functions and async-await shortly after the proposal came out, and people wanted to use them, so they used Babel's transpiled output for Typescript's input. Nowadays this approach may be redundant for the exact reasons you mentioned. This was a thing before Typescript was so established and mature.
But what happens when something better than typescript comes along and you are left with yet another dead framework webbed into your entire codebase?
You adjust and move on.
@@TheDiegolopez007 ive been programming 20 years, all these new school devs thinking know better are in for a hard lesson.
Using 3rd party solutions to bridge gaps that native languages, breeds instability. There's a reason typescript hasnt become standardized in ECMA JS, if typescript were THE solution, it would have been added to native js yeaaars ago. Microsoft, who made TS, has already admitted they will phase out TS with a better JS typing system in native JS.
JS was never intended to as a strict language, those using it as such are simply, noobs.
The proper way to use typing in a language designed to be loose (and loose for a reason), would be to implement the typing in a manner that isn't infesting your code base. An example being, putting type declarations into comments, where your IDE can handle the type restrictions for you, removing the messy moving parts of a separate compiler.
Requiring another compiler for your code just to convert what should be a comment, into native code, is a stupid idea, and the masses who think TS is good solution are all just following a hype trend.
So good luck with "adjusting a moving on", i wont be needing to do that.
I was just thinking since last couple of days like should i start back with react with js or ts? This helped me a lot! 🎉
You are the absolute best at explaining thank you soo much!
TS + React + Redux Toolkit = my favorite setup.
OMG YES!
JSON ❌
TSON ✅
I use TS for front n KT for back. Works like charm, syntaxes are almost similar!
Awesome video and the tips came in handy for one of my projects.
I swear I could see my brain from the ungodly eye-roll that I unconsciously performed upon seeing the title. The whole video boils down to "Do you want to stay Monke or write an extra line of code that can save you tons of hours of debugging and god knows what else". To some, the answer is always Monke. But typescript patches almost all the holes of Javascript and that's why we love it.
This is exactly what I wrote on almost all typescript-related video comments on TH-cam and StackOverflow comments for about 2-3 years. I'm still really shocked about the lack of knowledge about the TS in our JS ecosystem (some people still think that it's completely different programming language to this day lol) and I'm trying to spread more practical knowledge about TS to exactly describe how important and almost "you-can't-live-without-it" thing it is for: your mental health, your productivity, developer experience, your business, and not being a masochist that need to keep track of things that normally IDE, Terminal or other tools are supposed to do it for you.
Some of the myths I would also want to bust here
- You do not have to explicitly type goddamn everything in your code or forcing yourself to use any or unknown type. The most popular frameworks and libraries have really well written types, where type-inference work really beautifully (f.e useState hook shown in the video), so you can almost write normal JS code and still have the TS benefits.
Best practical approach to TS: Do explicitly type things only when TS cannot get the type by itself, or if you want to have more nuanced and more detailed information about your values.
- Yes, writing interfaces/types for your objects may seem like an extra work to do, but to be honest... how exactly "extra" work it is? Half of the minute? 1 minute max to write all the properties and their types? Look at the benefits that interfaces give you (autocompletion in IDE, auto error-catching by marking EXACT LINE WHERE THE BUG EXISTS with red line, autdocumentation etc.) and you will not ever use this argument again
- Yes, TS is the best tool for creating documentation because.. it create the docs as you go. TS contains the best tooling in the entire JS ecosystem (yes, looking at you VSCode and WebStorm) and allows you to describe your application with the ways that you couldn't normally do with plain JS. And when you have your application fully typed - it's just a joy and pleasure to continue to work with this project because your IDE/terminal shows you exactly what the values you can use (where in JS you would had to console.log it manually and check the value there which takes time - so yes - TS is the ulimate life and time saver)
- Yes, TS subtly forces you to write better code, but it doesn't do this by purpose. The only thing that TS really does is just showing you the faster feedback about the execution of your program than you would normally do by running your program manually. All of the problems that can occur by using bad practices and are hidden because JS tolerates them - it doesn't mean that there aren't there. They obviously are, but TS alarms you immediately about them (and what other things can be problematic in future).
- Yes, TS subtly changes your workflow entirely when writing your code. But it's a good change, because it makes you think about the design and architecture of your application first and then with those written interfaces/types just w̶r̶i̶t̶e̶ click your app by just simply hitting auto-imports and auto-completions without even looking into other files instead of "happy code" it with forcing yourself to manually checking definitions in other files
- No, TS is not bad for a small projects. Even in those little ones. Remember that every time, when you are not using TS - you're shooting yourself in the foot by disabling the autocompletion and static code analysis features that are crucial for most basic Developer Experience and coding enjoyment. So I do even recommend adding TS for smaller projects too with some really basic and simple tooling to compile it like tsc, because those DX-friendly features are really the beautiful things that you can't almost live without them
Thank you Brad again for spreading the knowledge in the highest-quality way 🥰 I hope that some day we all will create the beautiful Developer Experience within whole JS ecosystem.
P.S - Can we expect some video about the ultimate auto-import destroyer pathology - export default? It is another unconsciously used thing by almost everyone in whole JS ecosystem that brings a lot of problems to the projects with auto-importing
(yes, with TS and named exports I didn't write any single import manually for about the year or so)
but for some reason still everyone uses it. Thanks again for all!
All this inane drivel for a language promoted for its type safety and yet it's not even type safe:
const foo: {val: string} = {val: "foo"};
const bar: {val: string | number } = foo;
bar.val = 3;
foo.val.toLowerCase()
What a joke, lmao
@@pizdaxyu But we're not only talking about JavaScript specifics. In the situation where you have a project containing 500+ modules with written internal individual logic which lacks documentation (pretty common thing in a lot of companies). - then JavaScript Specification doesn't do shit for you. Then TS comes with all it's glory with the type and proper usage information that allows you to pretty simply and easly manage those modules.
"writing all this garbage"
"Amateur mistakes"
Why so toxic man? Why do you think that I make amateur mistakes (besides the thing that everybody does them but anyway)? xD
@@kerimgueney I see nothing wrong in TS here in this example. By design, you expect bar to have a shape of the object with a property that can contain a number or string. So by design you have access to the string and number methods then.
TS does not check what exact values will be there (unless you explicitly defines them), because it doesn't execute your program. It just defines the shape/model of your values
@@DEVDerr This is a variance issue and it can in fact be detected during compile time. TS just isn't strict about it, IIRC because it's bivariant. This in turn makes its type system unsound. There's a big github issue #10717 on this and several discussions on /r/typescript.
Flow, OTOH, catches this quite well.
What's wrong about it is that the type system doesn't catch this obvious type error. I don't even want to know how many projects there are having these so-called "runtime bombs" silently sitting in them.
People relying on the type checker are living with a wrong sense of security, which makes me wonder: Why bother? I can't even remember the last time I had a typing issue. External data being wrong is the biggest issue in JS and TS doesn't do anything for that since it's an inherently runtime issue.
I truly believe that TS is just something Microsoft slapped together to make web development more palatable to C# developers.
I've read before that it's not a good idea to use the interface FC from React and write your own. Any insight on this??
Hello Jeff, what are your views on Java (not javascript) or any Java server-side framework? please reply
TypeScript is great if you are working for a company: automatic documentation, extremely strict layout, enhanced object orientation. The main benefits I see to vanilla JavaScript is that you can write it and produce it much quicker and it is a lot less intense on computer memory, but if you are going to use React or Angular you have mostly lost these benefits already.
by boss forced me to use typescript in reactJS project, which is not his expertise, in a project which is done mainly by me. I am considering quiting job
@@umr3179 you do realize you can just write js in a ts file it wouldn't say anything unless it's making sure you don't have stupid bug somewhere
@@feritperliare2890 Or just use typescript. Once you start using it, you will realize it is actually saving you tons of time. Especially once the app gets bigger.
@@mdouglas64 obviously I come from a java background so oop and pre compile error messages are a great addition for me but if someone for some reason is incapable of using those powerful features just JS is valid
Ok, I like TS and I like JS.
When you write code in JS, your brain moves away from static type paradigm. You don't rely on intellisense anymore. You write functions and clients that just require object and properties in a certain way and it just works. It was so hard to code JS after Java, but once you get a taste of it, it changes your perspective.
Yes
Except it becomes a nightmare when you take over a pure js codebase.
JS is amazing man, i tried my hand with JS after being a C++ developer and i was just so confused, i didnt get the language at all. but once i did, i do not want to go back to strict typing, and shitty languages that dont have the destructuring operator anymore. JS gives u way more freedom than anything else and i do not understand why people want to reduce their freedom with Typescript.
Js is good but it takes time to become good at it.
@@arpitpatel5312 because freedom in programming isnt always good.
Every pattern limits freedom, but probably you should follow one instead of exercising your freedom.
Quick question why would i choose next js over create react app ?
My favorite youtuber. I'll pay for the lifetime on your website and learn lots of stuff!
You should avoid using FC mostly because of two reasons
1. If the component does not expect any children and still it is passed, TS won't throw any error.
2. It throws error while using default props.
what is an alternative
@@codesymphony You don't need to use it at all.
You can also explicit the type of the props to be the interface/type you created.
A type system gives you code completion and intellisense, that makes coding much faster imo
i use javascript, i have code completion in vs code, which IDE are you using? also whats the point of using a shitty language like typescript if the coding process becomes faster but atrocious? JS is fun to code in, TS sounds like hell. i would rather use JS for a longer time than use TS to code faster.
@@arpitpatel5312 The comment said "complete IntelliSense", the IntelliSense you are talking about in JS is the IDE trying to infer common types. (BTW, all the IntelliSense that you get when using a library in JS is because of TypeScript type declaration files).
And the IDE doesn't matter if you are talking about code completion. Any IDE can have this feature if they have a LSP, and most of them do.
It doesn't look like you have tried even TS. It's one of the tools that makes it hard to go back to what you were using before.
Loved the video! I just wanted to be helpful and tell you that the last part of the video was cut off. 😂 and it was an important part. You should fix that 👍
such a nice video with fun templates. haha loved it!
Sorry, but I'm too lazy to use typescript