Prime React: The Story of TypeScript

Recorded live on twitch, GET IN
/ theprimeagen
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord

[@ThePrimeTimeagen]

The original: kzbin.info/www/bejne/e4bPfmatrZpnbNE The original Author: www.youtube.com/@uidotdev SUBSCRIBE TO THE ORIGINAL AUTHOR!!

[@DEVDerr]

Finally someone mentioned why TS can do all of these error marking and autocompleting stuff. Soooo many people still think that it's Editor's feature. Thank you

[@ThePrimeTimeagen]

yaya, it drives me nuts

[@Gornius]

Most people just don't really care, and unless you try building your own IDE with something like vim, I can see why someone would think it's an editor feature. I now use VSCode, but thanks to vim I learned much more about coding than actually coding.

[@Xevion]

Certain IDEs (JetBrains) will provide some advanced type inferencing and autocomplete for a variety of libraries, even for JavaScript. It's easy to not know how Typescript helps in development when your IDE has superpowers like that.

[@thekwoka4707]

I think Prime was a bit off on that. They just said "TS compatible editor". Which VSCode is. Not every editor will use the TS language server. Notepad isn't doing it, right? It isn't like the LSP is injecting itself everywhere you edit text, the editor is still doing a tiny bit to make it compatible.

[@ts8960]

its a vscode extension. created by the same people who created vscode

[@ZivelaGeneracija95]

The true genius here is that you play the other video at 1.5x speed so we have to watch at 1x or else the other video is too fast

[@ThePrimeTimeagen]

;)

[@WhiteThunder121]

Skill issue

[@enriquellerena4779]

Im watching it still at 2x so with 1.5x then 3x. Nice

[@Rexmorgan687]

And then you discover the KZbin play speed extension that unlocks even more. I started with 2x -> 4x as my results. I'm now 3.5x - 5x but typically on the lower-end. There aren't many vids I watch at 1.0x these days.

[@Gnsbehehehh]

@@Rexmorgan687 if you’re on desktop you can open the dev tools and do document.querySelector(“video”).playBackRate = 4; And set the speed to whatever you want. I think 10x is the most that will work. Might have gotten the syntax slightly off but you get the idea

[@gillchristiang]

"Has anyone tried to bring a little bit of JavaScript to their project" Yes, any dependency that has the types published separately in DefinitelyTyped is basically that, you trust the types are properly written to match the JS implementation but there's no guarantee.

[@ThePrimeTimeagen]

but that effectively is just including TS. progressive updates are _INCREDIBLY_ hard

[@szevinn]

Love the daily videos! Always learning something new from them. :)

[@ThePrimeTimeagen]

trying!

[@RedHandedBug]

yasss

[@DEVDerr]

And yeah, TS won mainly because of tooling. And JavaScript developers finally saw the real advantage of having types, which finally destroys their argument of liking plain JS "because it's not bloated with its syntax like Java or C#"

[@ThePrimeTimeagen]

these are one of those things that really matter people just don't understand how important tooling and auto complete was back then, as it is something that is expected today

[@arjix8738]

I still like js because there is no transpilation step, but for serious projects I do indeed use TS

[@bkucenski]

I really don't understand people like that. I started with QuickBASIC. I immediately saw the value of tools speeding up development time and reducing bugs. I used Eclipse for years before being directed to PHPStorm which has massively sped up dev time and code quality. For JavaScript you don't have to go full TypeScript. JavaScript Modules have brought in a lot of things that a good IDE will make use of including specifying types and autocomplete. Using .mjs and configuring your web-server gets you massive improvements to JavaScript.

[@EwanMarshall]

To be fair, LSP wasn't standardised until 2016. The LSP stuff was started in Typescript around Feb 12, 2015, 3 years after typescript started. Also VIM and Emacs were using something similar to LSP before MS, and Omnisharp produced their own plugin based thing based on the same concept. It is more MS's protocol implementation ended up being standardised.

[@levantos]

2:03 "JavaScript, feels like a history lesson that ends with a ligma joke" 😂

[@desengenho1539]

Primeagen: sets the play speed to 1.75 Me: puts his video on 0.5

[@DEVDerr]

To this day I'm still surprised at how absurdly loooong it took to TS be in the mainstream. LSP was already implemented in VSCode and WebStorm and others even 5-6 years ago. But for some reason still, JS devs were so masochistic and stubborn about using plain JS even on big production sites. And in some jobs, I needed to make special presentations for teammates on why we should use TS, because people were so afraid of the TS thinking that it is C#'ified version of JS. Even if some of the folks started to see the benefits of using types, they were still so afraid of using TS that they decided to use Flow (oh god) Finally, I can peacefully rest on the farm with work (of promoting TS on social media) done like Thanos. I have a huge smile on my face when I see library creators treating great type inference as one of the priorities We have come a long long way, but now tooling in our JS world seems to start becoming simplified (especially with Svelte and Solid) Good times are coming guys

[@ThePrimeTimeagen]

huh, tell me how you really feel

[@DEVDerr]

@@ThePrimeTimeagen what do you mean? 😅

[@micycle8778]

"because people were so afraid of the TS thinking that it is C#'ified version of JS." What's so wrong with C#?

[@DEVDerr]

@@micycle8778 Nothing. Just plain JS people portrait C# as "overbloated overcomplicated language from super evil corp Microsoft that focuses on OOP only"

[@rapzid3536]

They added async/await 8 years ago now so it has been a minute. But around that time it was already attracting some more, hmmm, disciplined engineers and a lot of great projects popped up around that time and/or moved to TypeScript that were just a cut above most of what was going on in the JS ecosystem at the time.

[@SMOKE3104]

Your channel is the only channel I play at .5 speed because your content is.... BLAZINGLY FAST!!

[@ThePrimeTimeagen]

haha! LETS GO

[@calametyreboot4789]

these are great! i love these :D

[@0oShwavyo0]

I think the idea that you don’t think in types using dynamic languages is so flawed. You think in types all the time, you just keep all that information buffered in your brain and act like you don’t sound deranged when you know the return types of every function and method in your project by heart. Do yourself a favor and let yourself forget by writing it down once and letting your editor or the compiler take care of remembering for you. On the flip side, it can be a bit deranged not being able to start writing a function because you need to think of its return type, so I think dynamic languages with gradual type systems and solid type inference are really a wonderful sweet spot of freedom and ease coupled with the capacity to write rigid strongly typed code when desired.

[@ThePrimeTimeagen]

i would agree, its straight up just offloading mental tax

[@arjix8738]

Inferred types are great if you want strong typing but you don't like thinking about the type syntax

[@jouebien]

yes I've brought JS into a TS project a few times. Usually it's a pain in the ass to get the module to declare as any OR pain in the ass manually writing the types for the things you use from the module OR taking the types from a PR that's the package owner won't merge to add support.

[@cole.maxwell]

Damn you always do be teaching me something

[@aCoreyJ]

When you normally run at 1.5 but he runs at 1.5 so you can't understand the video

[@ThePrimeTimeagen]

yeah, i am probably going to stop doing that make it so everyone can control

[@chalopdev]

For the MS lsp suing thing, are html_language_server and pylance the only two or there's more under them? I'm assuming the ones from here (with MS as maintainer) being out of bounds.

[@heron619]

I have "html-lsp" installed on my Neovim and when I inspect it with Mason it does show the git-hub repo of "microsoft/vscode-html-languageservice" as the source. And I couldn't find "pylance" but there is one lsp called "pyright" that's also linked to a MS git-hub repo. I checked the repos and both have the open source "MIT license"!

[@asdqwe4427]

@@heron619 sounds like the lawsuit thing is not true then

[@numeritos1799]

Yeah idk where he got that, AFAIK all LS developed/published by Microsoft are MIT licensed

[@tokiomutex4148]

function f(n: number): string {}; function f(n: string): number {}; function f(n: number | string): string | number { return n; } const comment = f("Blazingly fast"); // comment is a number

[@ThePrimeTimeagen]

the best kind :)

[@frankcooke576]

You can simply declare an empty module for any untyped external js dependencies and then use it like any other module. No types of course but it's literally a single line of code to get er done.

[@VijayJaisankar]

Woah, the editor-autocomplete-actually-being-a-server-call thing is so cool!

[@DFPercush]

Yep, LSP is in lots of editors now. As long as you have a server for your language, like clangd for C++, any editor can give you syntax highlighting for anything. Often those servers are managed by plugins in the editor, but sometimes they're standalone executables that the editor can call.

[@VijayJaisankar]

@@DFPercush Nice, thanks for the info!!

[@TMinusRecords]

Shift + . to increase speed, shift + , to decrease

[@2mbst1]

My brain melted when I tried to watch this video on 1.5x as I usually do.

[@JonatanBernal]

According to my wife LSP means Lumpy Space Princess. Now you know.

[@ThePrimeTimeagen]

this is probably the most correct take

[@jimshtepa5423]

can you please make a video on what stable identity is in the context of react and what are good ways to preserve it?

[@ricardorien]

That ending talking about the sues hahahha

[@vikingthedude]

Does the language server run in a daemon throughout the computer’s uptime? Or does it get spun up only when u open your editor?

[@Z3rgatul]

Only when editor is started

[@GearsDatapacks]

I tried typescript for the first time a couple of months ago, and it's now impossible for me to switch back

[@gamezoid1234]

Typescript blows my mind. Microsoft made an alternative to something and it's actually better.

[@dickheadrecs]

0:50 this should be the sound that tsc makes when it finishes compiling

[@ThePrimeTimeagen]

deal

[@shapelessed]

Why TypeScript won? It's simple... We didn't have to trace ReferenceErrors to often realise we made a typo and got a Q instead of an A.

[@hunterbidenafterlife]

I'm new to coding, was auto-completion, auto-imports, and intellisense documentation just like not a thing before TypeScript??

[@ThePrimeTimeagen]

no, it was not available on every language and for free ides netbeans came a long and started to change that, and then vscode did give us LSP which has helped a TON make it so every editor has autocomplete

[@theondono]

Embrace, Extend, rEwrite-in-Rust

[@ThePrimeTimeagen]

LOVE IT

[@HominisLupis]

THAT COMMENT ABOUT MODULES IS THE TRUEST THING EVER SPOKEN

[@axelra82]

Inception speed, when you watch in 1.5x and that video plays a video in 1.5x 😮 Now it just sounds like people are talking too slow IRL 😂💯 BLAZINGLY FAST 🤩

[@ThePrimeTimeagen]

hah :)

[@br3nto]

10:30 wait so if a dynamic language has a great LSP then we get the same benefits as a typed language?? 🤯🎉

[@wlockuz4467]

I think BDSM is the best module system introduced to JavaScript ecosystem.

[@sulochanacharya4892]

Hey @ThePrimeTimeagen what are your opinions on Java and JVM in general?

[@ThePrimeTimeagen]

i don't have any :)

[@codewkarim]

"Check mate atheists'" got me laughing out loud!!

[@laughingvampire7555]

the idea of LSP is a copy of SLIME the emacs package that allows to use emacs as a common lisp IDE

[@JEsterCW]

I did pair programming with one guy. I have showed him 3 times auto completion by ctrl + space to see if he will use it later. You will be surprised...for over 2 hours he couldnt finish the object with specific string type, he was trying type so many weird shits and i was waiting for like an hour atleast to see if he will remind himself about this shortcut and feature... after 2 hours i was done and i just told him "press ctrl + space" and he was "Im always overenginnering all what im doing" and i was like "i did show you this feature 3 times before i let you finish the training code for purpose reasons"

[@gamer-pv2dx]

I feel I am not a junior anymore

[@duwangchew]

typescript actually won because of balls

[@ThePrimeTimeagen]

the ol balls deep victory

[@n0kodoko143]

Facts!

[@elirane85]

The second you try to bring Vanilla JS with typescript, you at least need to start adding "@ts-ignores" everywhere and type everything you import as "any". So it's not really "just import vanilla js code", it's never that easy.

[@frankcooke576]

This is simply not accurate.

[@elirane85]

​@@frankcooke576 Tell that to the `tsc` compiler

[@frankcooke576]

Haha - I have. You have to declare an empty module and your off to the races

[@elirane85]

​@@frankcooke576 Well, yeah, you can do that. And that was the point, that you are required to do something, even if it's minor, to get it to work. Whether it's declaring an empty module or adding @ts-ignore. But you can't just import a js module and it just works immediately,

[@frankcooke576]

Understood. That still makes your original comment inaccurate though. You can declare an empty module and then import and use any js module without the aid of types. No ts-ignore and no any types. Obviously not ideal, but honestly any library worth using (or trusting) nowadays either is written in TS, includes the types, or has types provided by the overwhelming large community.

[@GodsAutobiography]

Hey prime, you can change playback speed with 'Shift+'' You can press '?' to see more hotkeys. #GetOffTheMouse

[@ThePrimeTimeagen]

yayayayaya!

[@PieterWigboldus]

TS is great. but as tool in the background. I think TS is something like jQuery, solve some things that are missing (now). But on runtime, in the browser and Node.js, it is just JS that runs. And with TS you can also check your JS files with JSDoc.

[@rentsy3444]

LSP - what does it do? Correct values for autocomplete!

[@raymanovich3254]

The problem is, I watch your stuff at 1.5x as well, so now it's stacked...

[@0oShwavyo0]

Wasn’t coffeescript typed? Would we be writing coffeescript if they had invented lsp?

[@NotTheHeroStudios]

@3:55 "to quote trash dev BDSM" Lmfao I forgot about that

[@joejazdzewski]

Tooling is how Microsoft wins in general. Making you depend on them is how they keep their revenue and market share. You are never on the bleeding edge but you are stable

[@illker.]

pylance is pyright at the end

[@gJonii]

Prime seemed oddly clueless in this one. Can't tell if he kept mishearing the video or what

[@insydian]

Ahh. Hi Prime!

[@seanthianyuanchang]

so what do people use for html linting/autocomplete on vim???? wadu HOW DO I NOT GET SUED

[@handsome_man69]

Handsome man

[@chrisalexthomas]

I'm watching your video on 2x, so that means I'm watching the other video at 3x! #timegains! #nobodyaintgottimeforthat

[@dgcp354]

i thought vs code suggestion was possible because of js REPL

[@UnhingedNW]

Anything Microsoft thinks is "ideal" usually isn't.

[@pkoch]

I'm watching on 1.5x a dude watch a video on 1.75x that fast-forwards through stuff. Something something fast-forward gear ratio.

[@ThePrimeTimeagen]

LETS GO!

[@szeredaiakos]

Is like recreating the bouncy scroll on a website and getting sued by Apple because they have a patent on the damn thing. Ask me how i know. I think it was invalidated late last year.

[@fsouza]

Daily reminder that VSCode doesn't use LSP to talk to tsserver because tsserver does not implement LSP :D

[@user-tb4ig7qh9b]

I think you are wrong about what module mean here not esm and cjs it mean like rust module

[@medalikhaled]

that's hilarious 8:26 🤣 (Atheoists), also plz play the videos x1, so I can watch your videos x1.5

[@SCALENE5]

Could abyobe explain the joke or comment he made at 8:14?

[@vanweapon]

Meanwhile I'm stuck writing plain old JS in a SaaS platform that only got ES6 support this year... (ServiceNow)

[@techwithattila]

Didnt React had some funny things in its LICENSE a couple of years ago but changed it? Can’t remember

[@ofeenee]

Which makes TS an awesome development tool and nothing more than that. Therefore, pushing it into the specification makes no sense.

[@kein3001]

When you set the video speed to 1.5 I have to change my video speed back to 1.0. I think we all do set the video speed up. Their should be a faster way to toggle button between 2 perefered speeds we want to see our content in. I want to toggle between 1.0 speed and 1.5 speed. By pressing my keyboard or the video bar.

[@anlumo1]

The problem with you playing these videos at 1.5x is that if I play your video at 1.75x (which is my normal speed), the original video is barely understandable.

[@ThePrimeTimeagen]

yeah, i have stopped doing this :)

[@MarcelRobitaille]

5:31 yes I agree with you. that's totally a lie.

[@zsytssk5176]

Another lie you often hear is that react visual dom is good for performance.

[@codecraftercc]

pov, i am watching this video on 1.5 speed LMAO

[@ThePrimeTimeagen]

yeah, its a bit crazy

[@AndrewTSq]

I guess there is a possibility that all code goes the same way with LSP? I dont like a one way language, but then again I dont work in a company coding just doing it for fun. And I like if I can solve problems in different ways without getting hit on my hands by a lsp

[@okuno54]

This sounds like you're confusing lsp with a type checker. Regardless, here's the question you should be asking about types: would you rather stop in the middle of using your application to hunt through a stack trace looking for clues about where the bug might be, or would you rather be told about that typo you just made before your cursor is even on the next word?

[@AndrewTSq]

@@okuno54 I usually never have bugs that is caused by using the wrong format. I code in C also,

[@yaybrianna]

I had to write an embedded page on my chorus's google sites, and it was painful to use vanilla html, css, and javascript. You really never can go back.

[@peanutcelery]

Typescript is the best JavaScript linter ever 😶

[@ertugrulsrt5761]

Why is typescript written in typescript and not C++ or rust etc, and I have to wait for 4,5 seconds in between every hot reload?

[@ThePrimeTimeagen]

esbuild, swc or whatever next gen tools are solving this

[@user-tb4ig7qh9b]

Better developer experince that is why typescript won.

[@simonedwards7101]

But really, a going listen

[@RedHandedBug]

LSP all day!

[@albertgao7256]

incorrect, the Intellisense is there for over a decade in VS, they just implemented this for Typescript, using LSP, it is the type which drives it. Also, Intellisense is just part of it, a big part of TS success is the ease of refactoring which happens all the time. It is never about LSP, implementation detail never matters.....never, ever

[@djmarcmiller]

I mean I think you could just get away with using JS in a TS project but like, nobody WANTS that.

[@taraxacum2633]

Greetings. I am here to inform you that you can do `shift`+`>` and `shift`+`

[@tanercoder1915]

Please don't fast forward the video!

[@KyleLanmon]

2x speed gang!

[@laughingvampire7555]

Elm is so much better than TypeScript, not using Elm is like not using Rust.

[@AlexAegisOfficial]

Every application that can be written in JavaScript, will eventually be written in TypeScript, and then rewritten in Rust

[@anton9410]

1.5x speed ftw

[@irlshrek]

I hope rescript continues to grow

[@adokce]

ofc i know lsp, lsp is a subset of lisp

[@ThePrimeTimeagen]

taht is really funny

[@thatgameguy4929]

Es7 js is ts

[@yapet]

I honestly didn’t like the video prime’s reacting to. Talking about “why ts won”, but against whom? Against regular JS - no chance. I’m honestly really keen on flow. I like haskell-like (ocaml inspired) type inference that just derives types from the way you use values. I also like having closed objects types, that cannot have more enumerable properties than is required (really handy for using Object.keys/values/entries in a type-safe way) I think the better question is why ts won against flow, than just regular js.

[@ThePrimeTimeagen]

i have always wanted to try flow

[@Reichstaubenminister]

TypeScript won against Flow because Flow is (or at least was) unusable. It ate at least 8 GB of RAM on a regular Express app and was slow and inconsistent.

[@arandompersonontheinternet7591]

I think the original video was being oversimplistic and really skipped on a lot of things. LSP being one of them but the sheer fact that it's UNBEARABLE to use vanilla JS in anything that has to be designed with scale in mind

[@mr.random8447]

The Story of TypeScript video is so obvious. Literally no point in the video. I’m way too senior

[@metaltyphoon]

Ehhh… Did not take you for thinking MS is the old EEE. What now spell it M$ too?

[@ThePrimeTimeagen]

it... literally does that today

[@metaltyphoon]

@@ThePrimeTimeagen the typical EEE sayer don’t even know which of the Es is in effect now 😅. It seems it’s always the E that “makes” sense to make an argument. Just check HN to see it in full effect.

[@RG-em1gg]

they spelled Rust wrong

[@Dmitri_Ivanovich]

Vim user, changing playback speed with a mouse, what a disgrace! it's `shift + .` and `shift + ,`

[@paintdry84]

typescript won because developers like to refactor things

[@joshmarom]

The urging need to differ... Yawn...

[@divinenii]

You have no idea what you talking about. If typescript was bad as how you want to portray it, WHY SOO MUCH GROWTH. If you don't like don't, but we the community of TS love it