I was wrong, just use typescript
Вставка
- Опубліковано 8 вер 2024
- after wasting 10 minutes on a simple bug because I mistyped an argument, I decided I'm done with js.
------------
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/cod...
I've been in situations where typescript is telling something could be undefined or something, and I'm like, "yeah, but it's not", then get burned by a random edge case I didn't consider. Typescript is built around an error-first approach to coding, in which you code defensively. What happens if something I didn't consider causes this function to fail? Typescript is trying to make your code-base bullet-proof. Don't fight it. Embrace it. You're already a wonderful programmer... this will make you even better.
Good job babe! Way to admit when you’re wrong or change your mind ❤️
I also started to feel like typescript wasn't worth the hassle. Utill I HAD to write a module in JS. I spent more time debugging randomness like this than I would have spend on adding typescript to the project
Looking forward to your follow-up, "I was really wrong - use TypeScript everywhere!"
All it will take is coming back to your codebase to do bug fixes a few months from now. ;)
I'm sorry, but untyped languages lost the war. Even Python now has those sad little type indicators. It was trendy 20 years ago because it was fresh and new, but not all new things are necessarily better.
Idk about lost the war. I think there is some benefit to dynamic languages that make prototyping and experiments more enjoyable
how do I enable live error linting like yours?
I use an extension called error lens I think
session?.data?.user should fix your errors. Also doing a check above that either returns or having that block only execute inside a block will help
I've found at the start I found myself needing to use any a lot but now since I've been forced to use strict eslint and ts rules, it takes like all of 30 seconds to work out the type now and it saves so much time. I don't see that javascript really gives you faster prototyping since at any point where you really just are unsure and wanna go fast you can throw in a quick any. Ideally you don't, but it's there if you are really stuck. I'd never go back to javascript personally, not even for small personal projects.
I would have dearly embraced TypeScript if:
1. It substantially increases the performance of my application.
2. Avoided the need for over bloated typing. If I clearly know the data object I'm receiving, let's say, from a form element, why do I need to annotate its type?
3. There was an empirical study (with a sufficiently large sample size) that proved that TypeScript actually reduced bugs.
I think it's been hyped up by Java, C#, and C++ developers to bring a type system to the front-end. The main guy who is the core developer of TS is also the lead architect of C#.
Learn JavaScript really well; your won't need TypeScript. Or use linters or plugins.
i hope you have changed your mind by now
The tooling alone makes it worth it IMO. And I feel you man, I avoid using linters if I don’t have to instead I just use Prettier.
you can use jsdocs to annotate the code and get lots of the intellisense and error linting and also being configurable and flexible but starting with flexible rules and working to more strict rules is desirable if you going to be working on the code base for long or with a team
in your example you can create extra useSession hook where you will check null fields to show ts you have not-null fields or throw erros in other way
A lot of times when I fight with a Typescript error, especially this 'possibly undefined' thing, I get really annoyed. But then I think about it and actually agree that it could actually go wrong.
But not all the times, of course. You get nothing for free. Sometimes it is annoying, but it's a small price to pay for writing far less bugs.
Yeah same here mate. Been a die hard JS for so long until I tried Typescript. I couldn't forgive myself 😂😂
I haven't written a line of JS since I found that I can just compile TS files into JS, for JS projects.
to answer your question at the end there, you can spin up a CRA with typescript as follows:
npm: npx create-react-app [project-name] --template typescript
yarn: yarn create react-app [project-name] --template typescript
As a bonus, if you use NextJS (like me), you can also do: yarn create next-app --typescript
Have a good day, friend ☮️
Yeah I’ve been using next with typescript these days for side projects
i've seen thousands of these errors and they were caught by eslint lol, never once have i thought i needed typescript, in fact i have more type errors because of typescript, and very rarely do i have type errors in javascript. and usually i can find them easily because i'm not using a caveman framework like react.
I was building a node.js app with different child processes that communicated via IPC. In vanilla js, it was PAIN to keep the message formats consistent between a bunch of files. With typescript I can define a few types and then I will automatically be alerted if something is off, not the app crashing randomly with "msg.doThis is undefined".
TypeScript is like being a bad singer going for gottalent and use autotune to be safe, and then pretend every other singer use it cause you found it helped you
Admitting to be wrong is the first step. I used to have the same kind of very silly and very annoying little bugs, once I started using Typescript, they just don’t show up anymore.
"sometimes you leave off the ass"
Honestly, Typescript has helped me write more consistent JavaScript
thanks, what the name of the extension to have the red error shown in the same line?
thanks.
Error lens
@@WebDevCody thank you!
If you have a build/bundle step like in any front-end app, avoiding typescript is just doing things the hard way.
I don't agree with using `any` or `unknown` because you circumvent TS. If you wind up with another bug like that, it's because you explicitly avoided types. You can use `/* @ts-ignore */` if you wanna cheat death. I absolutely hate TS, but I learned it to be competent. I would never recommend taking all the time to use TS and avoid types.
Yeah good point. It isn’t that much harder to add :string to your params
Im using JSDoc rather than Typescript.
What font is this? I've been searching this for a long time. Looks like "hack" but the 'i's are different?
I thought it was using the default font.. I don’t remember installing an extension
Love that theme, what's the name of it?
Shades of purple
Thanks!
Ngl using "any" is a bad recommendation. I remember when I first learned typescript, I couldn't even type props and it was the most frustrating thing ever. But once I did it once, then twice, then over and over, it got better. In 2 days, I could do the basics naturally, and more advanced proficiency came with time.
My recommendation is to work on a side project (say a todo app) and just push yourself to use typescript as strictly as possible. It'll be an incredible learning experience and you'll be all the better for it.
Further, I believe another serious advantage to typescript beyond just adding types is that it makes it easier to model data structures and methods on them. For instance, you'll probably have a Todo interface and capture the exact structure of your todos. In larger projects, this is great because you can define all your data-structures using TS with respect to one another. For example. you could type a reduce function and say, "hey, this reducer must take in a todo, and return a todo" and typescript will carefully hold you to it. So typescript is an excellent choice for ensuring that your data-structures are consistent across your application.
Then as a final suggestion, I personally don't use the "components" pattern for creating react components anymore. I prefer to have a "features" folder instead, where I can build "complete" elements of the UI. This is great for testing, because you can see how a subset of your components work together when prodded by rtl jest, or whatever test suite you're using. It's also nice because you can write types for your components there. So you end up with a types file for every feature, and one types file for shared types. The shared types are the more basic types, and the feature types simply build on top of said shared types.
So yeah, listing is a totally valid reason to use typescript. But I think an equally important aspect of typescript is that it lets us define structs and, thus, model our data and methods in a way that other people will understand.
Oh, and I've tried the approach where you have a types folder, and fill it with (essentially) features types. I think that's harder to maintain because you need to apply some element of common sense to know when to start using a new types file. After all, you don't wanna have a big @types.ts file with 10k lines of code for the entire codebase. The file will become intimidating, and no-one will bother refactoring it.
Congratulations for giving typescript a shot again! Obviously you're an expert programmer, and you know how to use it. I simply hope this message inspired you to want to use it even more. I personally only work in typescript these days, and wouldn't have it any other way.
Best wishes, friend.
EDIT -
PS it's really brave of you to admit that you were wrong about something on such a public forum. You're the kind of person that learns, refactors, and gets better over time. It's definitely a great trait to have, not just as a programmer, but as a person. Takes a lots of gut to be this way, so well done. Subbed 🏆
Yeah adding types isn’t that much harder. Sometimes you just want to get something to work as you prototype a solution and that’s the main thing I complain about with typescript. I’ll write code I know works, but then I spend and extra 5 minutes adding types and getting these errors to go away. I just need to get used to it lol
When we realise we’re wrong we grow, and as programmers we must adapt constantly, hubris must be squashed.
Now move forward, make a pack to yourself never to use ‘any’, turn on strict mode and elevate yourself to the next level.
Edit: btw when someone wrote a .ts.d file for the lib that you’re using and it says it can return undefined or null then you need to believe that edge case is correct, … defensive programming will make you stronger.
Although I’ve used ‘!’ myself, I wouldn’t recommend advocating it in public forums, always use an ‘if;else’ check and throw appropriate errors as necessary
yeah i usually trust the ts linter since it's made by devs smarter than me, but it is annoying at times when I just want to write some code and run it. thanks for watching!
What extension are you using that gives you messages on the same line as the code?:)
Error lens
If you misspell a property in an object and that property is called (if a function) or referenced later on, you’ll get an error. Then, you just find and fix it. Cumulatively, that is way less expensive in terms of time compared to putting types everywhere. And when you make a mistake like that, it’s a very powerful feedback loop and the next time you are less likely to make such a typo. And, instead of wasting time on types, invest in tests.
Completely disagree about the experience comment. I work exclusively with JavaScript and don’t remember last time I made an error like that. And if it ever happens, it is quickly found and fixed. If it takes you “half” a day to diagnose an error like that, then you should blame yourself instead of JavaScript.
Does anyone know how the plugin is called that shows the TS errors directly besides the code? Is there an equivalent for Intellij? That is awesome :)
Error Lens is one plugin that does exactly that on vscode
I wrote something in TS with testing, meant to interact with two apis created by the worlds biggest companies and shuffle data down into a view.
NEVER AGAIN.
What I have learned is, do as the big guys do. If they won't adhere to any rules it's going to poo all over my super strict codebase. I need to spend a whole lot more time to fix it when I deal with all of the typings in addition to the actual changes I need to make.
I feel like every time I need to change the oil, I must sand and paint the entire truck. I like your thoughts on the minimalist effort. I do not think I will bother though.
Did you end up putting question marks everywhere 😂
@@WebDevCody No, making everything optional or any would just be sloppy. It was a proper attempt and with the guidance of someone who's used it for years. Its super unclear to have a defined object structure that is totally polymorphic. I don't see the purpose. And then none of it is enforced at runtime anyway.
I feel like TS is just a half-ass answer to making the jQuery/React brogrammers competent. May be a rough/lame take but its mine lol.
I want to speak on the one thing you pointed out as why you started to use typescript. Every single programming language has little dumb nuances like this. PHP for example had a weird qwerk for a while when looping over an array modifying it by reference. After the loop scope was left the temporary variable was accessible to outside scope and still held everything in memory. So any time I looped by reference I had to remember to destroy that variable. It was fixed eventually lol.
how did this take you 10 minutes to figure out ? the runtime would have told you that "calorieWriter" is not a function.
Cause I’m dumb
what plugin are you using to show inline errors?
Error lens
Changing your mind is good. Only dumb people never change their mind
Use webstorm...typescript is pointless.
Better ide support for js?
just by curiosity . That backend folder is ur node js api?
I’m using trpc, so that’s where my trpc routes are defined
well this video surely blew up haha
Lol for real, it’s the most simple videos that get the most traction. I’m just going to rant in videos for now on
There we go
can u explain how to setup a project with type script if I'm already using js on all of the files? I mean how I can transfer all of my code base to use ts in React
I’d probably try to just start a new project using vite with typescript already setup, then copy your .js files over and rename the extensions to .ts or .tsx. If you’re using webpack you’d probably just need to include a plugin to get typescript working. Create react app should already support typescript, so you might not need to change much
How do you get inline error text!?
Error lens extension
Glad to see you on the TS bandwagon!
give me your extension visual studio code please!
I means wrong error text , too history git leans
In description of newer videos
Or, you can just use TypeScript in the default strict mode, and define your types correctly. I don't know why people want to use TypeScript loosely. You might as well not use it in the first place. Either use it fully, or don't use it at all. You won’t fully reap the benefits of TS unless you embrace it fully.
Or you can just incrementally start to learn more about it and make it more strict over time. There are still benefits if you start adding types to your functions and variables. Don’t be a typescript gate keeper.
@@WebDevCody Absolutely, learning is key. I think the best way to learn it is to use its strict mode. You will get warnings and errors everywhere in the beginning, but with time you will know how to handle them and appreciate them.
TS forces you into defensive programming and being conscious about the data types in your application. It's the only sane way to develop serious projects today.
not all packages have typescript definitions and not all my data comes exactly as i want it
what extention do you use to show to errors on lines?
Error lens
You didn’t have a runtime error telling you the problem?
Sure, but why run it if I can get the error within seconds after typing it?
@@WebDevCody I guess I would say, wouldn't TDD run it for you even _before typing_ it? As long as we're concerned with catching the error at an earlier stage, why not bump it up one step earlier with TDD?
@@romanhood4849 yeah I think tdd or unit testing in general will help catch some of those errors. Type also helps when it comes to refactoring. It’s very easy to know exactly what might break before needing to run anything
@@WebDevCody you produce great content, love your videos.
lol. Can you make a tutorial on how did you make the minecraft hosting server?
probably not since it would be too much work lol
@@WebDevCody ye, I know. but if i could watch a tutorial, i could make my own serverhosting
@@WebDevCody its alright then. But start making your server hosting so people can use it and you can even earn money
@@jasneet3756 when you say server hosting, do you mean Minecraft or web server? I may get back into working on this, but idk about making full blown tutorials. Maybe some live coding sessions
@@WebDevCody i mean like you created a server hosting site right. and made vlogs on it. I was thinking if you could make a tutorial on it or atleast show on how to run the source code.
Absolutely agree 😉
Typescript >>>>>>>>>>>>>>>> JavaScript. This is a perfect example of why it’s useful
Fucking nice man!
i still do not like ts
KEKW
with Deno and Bun, use Typescript
for pure JS, nah