TypeScript Makes You A Faster Developer
Вставка
- Опубліковано 31 лип 2024
- TypeScript is amazing. It makes you much more confident your code is correct and will almost always result in less bugs, but there is one big downside. It is slow to write. Or at least that is what people say. In reality I find writing TypeScript code is much quicker because of a few reasons covered in this video.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:50 - Why JS is slow to write
03:03 - TS autocomplete makes you faster
05:34 - TS in a large project
07:19 - Common TS complaints
#JSvsTS #WDS #TypeScript
Also, having experience with typescript's static typing helps you a lot when you go to other languages, such as Go or Rust.
That's cool, thanks
yep especially kotlin
typescript helped me about understanding Generic in java and C#
agree with you sir... I tried Go and its like I'm working with TS.
true!
I just started learning typescript and you released this video at the perfect time, thanks!
I've forever stayed away from typescript and not because I don't love writing type safe coding but because I just never felt the need to replace the plain old JS which works perfectly fine in most cases. However last year, I'd a chance to work on a Sveltekit project where I chose to use Typescript and boy does it help. It not only speed up the development time but also helps to debug more clearly and confidently build for production ready apps. Now I'm translating my old node js project to Typescript and seriously I see no reason to ever go back to JS.
companies using JS are moving to TS man, future
I had the same feeling until I had to learn it for a job interview and now I also really enjoy it.
I’m on the same boat, and I guess most people who give TS a try end up reaching to the same conclusion :)
hi, i work in startup close to IPO, i glad i used trypescript
if solo project and just get started, you probably wont needed it yet
I'm with thalib on this one. Im about to move from a well sized decades established company to a start upish company. And they build there V1 in react JS. Should deffo be using TS I will make them JS is for learning purposes POCs and fun
I in particular like that you need to specify what your objects look like with types/interfaces. After doing that, you will get autocompletion which just helps. And it also makes you avoid null pointers.
We need the new tutorials to come with typescript by default
Well put together video, and the only one I've seen from yourself, but it might be good to cover some downsides in an impartial way if you haven't already. Every technology has its pros and cons, Typescript included 🙂
I can think of a number of occasions where Typescript has cost many hours of time that works have been unnecessary in pure JS. Possibly that time has been compensated for due to reduced bugs, it's hard to know.
Issues I've hit:
- TypeScript compiler is really slow which costs hours of time waiting locally & in CI
- Types being wrong 😢
- Conflicting type definitions
- Transpiler bugs
- Nested generics & error messages (common with libraries) can get really complex vs just reading docs
- Some libraries omit docs thinking types are enough (often not the case)
The TS compiler being slow is a problem I've been hearing more about lately and will be more common as TypeScript adoption increases. Full-stack type safety is gaining popularity and people are discovering that the TS server is a bottleneck in certain situations.
I also think TypeScript is tricky to work with in React, especially if you're a beginner. Smart people are working on some of the type inconsistencies in React (useRef for example). I hope many of the pain points get addressed soon.
What I also love about TypeScript and any stricter language, is that you are sure on what the function is receiving and returning. This is basically the best documentation you can get, without even writing a documentation. However, I wish they would add a throws keyword like in Java, where you can or have to declare all Errors thrown inside the function, making it much clearer how to handle errors for that specific function without the need of further documentation
With TypeScript your are not 100% sure what a function is receiving amd returning in runtime
@@tyr_it6323 No, you are not sure of that, that's true, but you as a programmer are sure on what to expect when using the function. However, it is your job as a programmer to input the right type of parameters into the function and that is what TypeScript makes sure of and with that, if the function is programmed correctly, it should all work fine
Only if one can write better code
@@yourDecisi0n Yea true thats the job of an dev. But this is a widespread false assumption thats TypeScript is "real" type safe.
I'm not the biggest fan of TS but everyone should use the tools he/she likes and can build projects.
I'm a big fan of JSdoc that gives me types and descriptions in the IDE and i don't need more.
I think that TypeScript has no good benefits against JS. But I'm always happy to learn so if me any one will prove me wronge. I'm here to listen
And JSdocs have a @throw for erros
You can also get autocompletion with jsdoc, if you have a small project and don't want to use typescript but want to profit from the typescript engine you can use jsdocs instead.
you can even generate type files (.d.ts) from a js file that has jsdoc with typescript
Great tips to start exploring typescript.
Kyle you just convinced me to reconsider TypeScript as beneficial.
I had no idea there was that level of flexibility, I thought it had to be more rigid and universally applied.
Congrats on your new home!
Thanks Kyle! 👍
Nullish coalescing is the double ??
The ?. Is optional chaining.
I started programming with C++ on the Half-Life SDK back in high school (yes, I'm old). I know very well the benefits of a strongly typed language, or just static typing in general. TypeScript is obvious to me, and I would go so far as to suggest ECMAScript become a statically typed language in further iterations. I'm learning to use TypeScript right now, and it's very intuitive. Of all companies, Microsoft pushed for this, and I have to give the devil his due.
Use rust, it is more strict than TS and is a compiled language
Can you make a video on how to manage concurrent requests and limit number of requests and wait until the previous request is complete then start the next request.
I been avoiding TypeScript then seen that made this video
when I decide to take it srsly, amazing timing lol!
I love that I can rename a property, and it automatically updates everywhere that's referenced.. ❤ thanks to typescript.
yea its because of code editor but if it was for javascript we wud not need to write any interfaces or types or anything which wud in turn then not raise this. so i wud say its both
Thanks!
I think it TS helps a lot when u are new to the project, or it's been awhile since u code on that project, seriously how would I know what properties does this object has after few months of not coding, I have to dig through all the code to find out, that's slowing me down, TS also helps with refactoring code, especially renaming property names, it just give u the confidence that the app will run
3:48 optional chaining not nullish coalescing. A good way to remember the difference is chaining always refers to objects and the dot syntax. Just like .then() chaining.
👋 Hey Kyle, Do you know how to make some props optional in TypeScript? For Example, if I have an error prop, and I want to enable or make it required when I have another prop, it should give an error I haven't passed it else, not an error? I strongly need this mechanism...
P.S. I am a newbie in Typescript, but very strong in ReactJS..
?
You should make a video about how to use d.ts in TypeScript
Would you do a full stack app with Nextjs, Prisma and Trpc. Thanks
Very usefull tipps for TS
Can i use javascript to connect to a localhost database using Wampserver?
My experience with typescript slowing me down has been in dealing with libraries and cumbersome verbose typescript stack traces, but i guess those simple cases bother people too. That’s not been my issues though.
thanks brother
Huge TS fan here... You should try co-pilot, it's crazy good (often).
It looks awesome.
Can you put the code where you are showing this repo i wanna read this whole code
Exactly I use TS even in the most miniscule of projects
This is a very good video, actually I use typescript almost only in scenarios you covered. My biggest problem with TS is that people tend to abuse it, i.e. they think TS is a good thing and thus try to use it everywhere, and that just causes more problems than good. Most of the times you should rely on TS’ inference feature instead of hand coding the types on every line of the code. Adding types is only helpful in scenarios like passing args to a function as there is a context switching and thus is usually more prone to type errors. In other scenarios the types should be self-evident, and thus adding types notations is just unnecessary work and creating visual noise. So in these cases if you have to rely on types it means you probably have bad code and you should try to fix the code itself.
typescript is an invaluable tool when it comes to major refactors, I just had to delete half of a code base and as soon as typescript was happy everything just worked out the box
Yep. As long as you keep TypeScript in strict mode and minimize usage of type assertions and null forgiving operators and explicit any and other such things that bypass the type system, you basically can fearlessly refactor anything.
This is TS’s major strength. Refactors that are stupid easy in TS can be virtually impossible if your codebase is just JS.
I see a lot of Typescript developers do Type Driven Development
I do Test Driven Development
It is about to think first about the input and output.
You can do it with tests but also with the types.
Writing first code and then tests or types will result in bad code.
It is a mindset, not specific Typescript.
(Type Driven Development can also with JSDoc with type check with Eslint)
may i migrate for typescript so?
That anonymous function to check input types is so related, I do it all the time coz I can't remember their name. And you shouldn't have to when using typescript, just copy and get everything from the editor, be more specific about your code.
at 3:49 is that nullish coalescing or optional chaining ?
I think that’s the latter
its optional chaining. nullish coalescing would be ??
so imagine we have a variable called x and it can be a number of null, and x ?? 0 would mean that if its null, change it to zero (i like to think of it as a default value)
hmmmm, i was wondering if i should give it a try, i've been on my journey to become a web dev for 1 year now, and i'm using react / next / tailwind css with firebase pretty efficiently, i think i will try typescript for my next project and make a ticket management to add to my portfolio :D
Go for it, basic typescript logic is enough for most of what you'll create
Totally agree, always prefer to use TS over JS when possible
watching his folders, while i barely have public and src folders in projects. im crying
I’m using JavaScript in a .js file. I haven’t used typescript, .ts, or .jsx file. At first I was getting null values all the time. I did read about the “?” and it worked in some possibly null places. It bothered me, and I wasn’t even seeing this problem in tutorials teaching JavaScript. I did find a setting that I turned off that fixed it for me. My question though is, why was I reviving this error if I wasn’t using typescript?
Because according to spec, you can't call a null or undefined value. You should give us some examples of your code so we can help you more 😊
The problem with TypeScript is the amount of errors i'm getting that i'm not understanding. With JavaScript it's fairly easy to debug an error. With TypeScript i don't have a clue what is wrong. I feel like the learning curve with TypeScript is higher than anything i've done before.
i also think that blinking only your left eye makes you save time, hahahah, love you
I noticed this too. He doesn't normally do this so must have been bothering him. He has been sick a lot lately. Maybe related?
The main reason to learn TypeScript is that you wont get a job if you don't learn it. The more you tell everyone how much you love it the more likely you are to make money.
lol
xdd
Really? Ok but I'm working with mern stack, I should learn typescript, then learn typescript for react, then learn typescript for backend, that's a LOT
that's not correct.
@@developer_hadi node and react are both JavaScript. If you learn TypeScript you can apply it on both places simultaneously. You don't learn to tie your right shoe then start over learning how to tie your left shoe.
Great video. Why you dont use Nextjs. Thanks
this would deserve a heroic viking song meme for the typescript galaxy
It's time to the join the TypeScript side of the force. Declare those numbers and your journey towards the TypeScript side will be complete
Complaining that you have to create your types is like complaining that you have to plan bevore coding. If you have planned your app, you already have written somewhere which variables you have, what data structures you send febe, so there is very little overhead.
Hey really cool Video! im currently learning angular and typescript(im a beginner coder just finished learning js) and i question myself for what case i should use the "?" like in your button?.addEventlistener codeline. Like if i want to reference to a button i know that it exist right? In which case it should not exist? Why should i ever say that something can be null if i never want to code something that can be null? This concept is a bit confusing to me. Also why should u use queryselector instead of using id + document.getElementById since a page/application will most likely have more then 1 button( i think queryselector just pick the first element, dont know if im right)
well your website can be tampered with in devtools and the button can be deleted by a user or an extension (like an adblocker for example), so you never truly know if it's there
Using the getElementById is better but either way using the ?. optional is important because the element id may not be in the app. You may have forgot to add it or renamed it but not updated the selector which would cause errors. His example was just something trivial to show the benefit of typescript. It encourages strict checking which is essential for covering your butt on larger projects.
Sorry but I'm going crazy with typescript at the moment.
Trough some es lint to the mix and use the basic recommended things and suddenly you are fighting with so many errors that are coming from libs because all using different es lint implementations for their types. Some do undefined or null.
What grinds my gears the most is that I now i have a value in an object but still getting errors event with checking for type safty.
Excellent video. Please create more React in-depth videos for beginner to intermediate devs.
Is there any way to contact you for a question? :)
Bro can u please post a mini portfolio project in MERN 😊
things get slower when you are newish to typescript and you have type error... I am on my first typescript project and when on react I try to place onCLick on a div, just for example... I just gave up on that and use ignore :). But in general typescript is way better even only for autocomplete.
Please come with Angular
Hey, Kyle. Is there any course made by you on Angular...?
Define what must be defined, infer what can be inferred, and prune bugs which could have been type-checked. 🐸
I’ve been holding out learning TS because I’ve only been studying software development for 2 years and it’s never seemed like a priority. I’ve focused on HTML CSS JavaScript Python Flask React SQL etc and I feel like I should really lock those down before I move on to something that can almost be considered “redundant”…I’ll get to it, though…someday
Love from India
hey kyle any thoughts on posting a TS in 30 mins course? would be great, greetings crack
please use semicolons tho. Either by putting them manually or using alt-shift-f.
I can have the same behavior while using JS and JSDoc. Plus, I do not need to compile the code.
Collegue of me always try to convince me to use TypeScript, but I (personally) see no reason to „change“.
JSDoc takes longer to write, adds more lines, and is more messy.
The time you're going to spend defining types and stuff like this will take more time than Normal JavaScript, but .... the time you will spend when falling into bugs and spending hours to solve them is going to be saved by TypeScript.
TypeScript wins.
even with small stuff like i m writing small browser extensions for myself
typescript helps because i dont need to go check what code does what
tbh at this point why would you even use js without ts in 2023
hmmm, let me add a new language that needs to be compiled into JS (adds time), to overcome VS Code short comings. Type safety is over rated for something like JS. All you need to do is expect certain types. If it's an HTML attribute, you expect a string. If it's your own variable, you expect undefined or null. It's not that hard. I often use null or 0 to have the same meaning, so it can be useful to know when something is not as you expected.
Real type safe languages provide an "actual performance boost" for using them.
Take Assembly Script, which is similar to TypeScript, but designed to make WASM files. If you go this route, you get a 30%+ performance boost for using static types. Want more speed, there are other type safe languages like Rust. Plain old TypeScript is only semantic.
yes you need to compensate for all the boilerplate you need to write, so you need to be faster...
a real hell is mixed app that you need migrate to ts - that thing has special place in hell
you know whats slower? creating app in JS and theeeen move to TS because you decide halfway that you lack type safety.
The reasons I still don't use typescript are:
1. Sometimes libraries has no support for typescript (nodejs) and i can't find a clear guide where they explain how to create on my own for that library. I mean, there are... But they just explain how to place "any" everywhere or they just say "write this to make it works" ...i want to understand what i do!
2. Can't find a resource where i can learn typescript with RTK, RTKQuery, React hooks forms and redux saga. Every guide has just plain functional component with basic types ...
As soon as i will learn how to do that, i will switch to typescript for sure
1. .d.ts exists for that purpose
@@valen8560 yes, but since i can't find a good course to follow about it, i don't know what is it 😂 i just know it's for types because i read some post on medium, but i don't know what to write inside
@toast every programming language has its own documentation...
@@StefanoV827 You basically just describe the functions or properties of that library by using types. Say, you got a class inside a library and you would then define the class and all it's properties and methods along with their expected types. You only define the types, not the values. See it, like it is an interface, basically
@@yourDecisi0n oh like an interface! That's more clear, thank you!
TS is a blessing
I don't use auto-complete or vscode so this video is lost on me :(
you could just use JSDoc types.
I can’t see any reasonable reason to use js instead of ts
Every night I pray to the Gods that I will never have to work without TS again.
the fact that you didn't mention anything about the compiler
what about it
Autcomplete isn't a good feature because it allows people to write code when they do not understand the fundamentals of what they are doing. Then when things break they won't know how to fix it.
Since most employers know typescript help detect faults in code . Most employers will want there employees to know it
you can either write types or spend 3 days debugging them
Write More or Fix Bugs More
All fun and great until you try to compile a service worker written in TypeScript to be in the root after compilation.
Coming from Swift this is a million times more readable
I'm afraid to start learning typescript
Web Dev Simplified:
TypeScript Makes You A Faster Developer
Also Web Dev Simplified:
Is Learning TypeScript A Waste Of Time?
Typescript is too slow relative to javascript. also it's a misery to find out what html tag is belong to what type many times especially when you wrote react or next.js with it. I know it's fundamentals very well but i don't like it and i never write it if i don't must it for work on a job. I understand why they want to define a type from us to strings, booleans, numbers, objects etc but in html tags or other things is very annoying to find out and also typescript docs are awful to describe that things.
Save time, write "any" everywhere. 😅😉
When u go Ts u never go back 😂
TypeScript & Testing makes you a faster developer. To ship a real product. Two months down the line you will be much faster compared to your crappy untyped and untested javascript code.
Finally realized?
I don't even use auto complete. Auto complete annoys me. And honestly I really don't care how fast I am typing. I don't think coding is about typing fast. Actually I think typing fast is a way to produce bad code. Typing is what? 10% of coding? 20% max. Most of the work is done in your head.
Also, the fact TS is adding that "?" to check if that button exists or not is just not acceptable. If I need to check for something I can do it myself. And if it does not need to be check then I don't want it to be checked.
So.. still not convinced. All I see is TS could save me from errors that almost never happens. Type errors? Once a month? Fixed in a few seconds. Variables names error? Makes me waste 2 minutes a week?
I love types, in Kotlin for example, but I love simplicity a lot more. I will use types when JS will implement them natively.
Don't be lazy, learn TS. If you are so good at coding it will be a matter of minutes.
The internet needs clean code for every single programmer have to work on your projects in the future, it is called respect!
@@pakoottox262 Ok Wtf what have TS to do with Clean Code? Clean code concepts are mostly overcomplicating your code. Write readable code and that can be achieved with every language, use self explaining and "good" variable, function, file and class names. Don't nest your loops and conditions to much (early return) . and don't overload your functions
I'm with you TS is too over hyped.
The "?" is JS optional changing xD
Yea TS is saving you from errors that normally happening when the programmer doesn't know how JS works.
And I think not every error should be handled . I really would like to know if my DOM hasn't that button loaded yet, that i can identify why that happens. and try/catch exists xD
@@tyr_it6323 sometimes you have to consider that in a dev team there are not only senior developers, of course if you work in big projects, maybe it is not your case.
Typescript force you to write standardized code in some aspects and help less skilled developers to read your code.
That's why I am talking about respect.
Just one question, why almost all other programming languages use types?
@@tyr_it6323 I bet you have never worked in big projects!
when it comes to coding for work, TS faaaaar exceeds JS, do you want silly errors in prod, do you not want readable, scalable and maintainable code at work,.
i dont even write my own functions i write code first then extract the function so i get types for free.
The first viewer 😂
You're cool Kyle 😎
Someone told me that the exclamation mark was a code smell, but there are situations where a null check is completely unnecessary.
Edit: I'm wrong. It's a code smell. Do your null checks. Be safe. It takes two seconds.
It can usually be avoided with a better design; do you have an example?
@@adambickford8720 the video's example of a querySelector defined on the same page as the mark up.
How would that EVER be null?
@@zombiefacesupreme Docs: An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.
@@zombiefacesupreme Any type-system is 'unsafe' at the edges, like interfacing w/the dom in this case. On the backend things like json/xml/etc have the same issues until they're bound/validated in the type system. This is expected and normal, often in its own layer.
I think the 'code smell' comment is when you have ambiguous nullability in code besides where it touches the 'outside' world. If its code that only ever touches apis you control, coercing nullability shouldn't be a thing. That's probably *is* a code smell.
@@adambickford8720 I just looked through my largest code base, and every place where I use it could technically be null in an imperfect world. I work alone, so I know exactly what my code base looks like most of the time, but each place where I found myself using the exclamation mark could definitely be null after I thought about it for a moment.
The main culprits for me using it were environment variables and laziness.
I admit defeat. The exclamation mark is a code smell.
Not using typescript is like typing English with spell check, grammar check, and auto complete disabled. That's definitely slower. Learn typescript and you'll have powerful tools at your disposal to help you make programs quicker.
You are a great developer and teacher but please stop putting controversial titles on videos
Until there is some actual science behind those claims, I suspect it to be snakeoil. I've yet to meet a TS developer who isn't spending 50% of his time with setting up tooling, 30% with talking about best practice and the rest with writing code, which limitations then have to be explained away by saying "this is how it is done". Yes, I said it .. i think TS makes you a worse developer. If you want to be able to optimize your code close to the runtime, every abstraction is an obstacle because how ever ugly and quirky the runtime is, you need to understand its quirks to get the best performance out of it. (this is my montly JS ecospace rant, i need to get off my chest .. sorry for that, I promes to at least wait another month until ranting again :)
I've been working with C# for years, when I tried web development for the first time, JavaScript felt so weird and felt like it is a mess that leads to many bugs and mistakes that you will spend hours finding why, but anyway as experience developer it didn't cause me problems maybe because I already learned to not make mistakes with C# since it is not dynamic type language .. for people like me, TS is a good solution, but still it I would recommend it for beginners, but for advance devs for me at least I don't see the need.
I think typescript really shines when you are workig on a team of people and just larger projects in general. Working with a team means alot of code is not written by you so you need some way to keep track of what values are being passed around or are expected etc. On larger projects you plan to maintain or release to the public it makes ease of use and mantainability easier sort of acting like a very simple docs
I’m going to have to read more about adding an exclamation to remove the null because I’m sure as hell my team lead might not approve of that pattern
Ok its funny he gaves Typescript the point with the faster autocomplete, for sure typescript has a nice LS/LSP and thats makes typescript usable. But the example shows that VScode is a Code editor not an IDE. With WebStorm, Phpstorm and other full IDEs this problem doesn't exist.
My way to go is normally when i need typesafty and i mean runtime typesafty then i use not typescript or JavaScript but if i want a easier workflow in my js projects i use JSdocs.
JSdocs can be used out of the box with the most IDEs and you can generate a Documantion out of it.
TypeScript is a nice language but i think its overhyped
@@maelstrom57 @template can be used for generics
@@maelstrom57 with the this param i don't get it, "this" is from JS. What have that to do with "this"
So the reason you have to use Typescript is the IDE you use...