Prime React: The Story of TypeScript

[@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]

;)

[@smort123]

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

[@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" 😂

[@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.

[@desengenho1539]

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

[@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.

[@fennecbesixdouze1794]

@@arjix8738 Just use jsdoc.

[@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

[@SMOKE3104]

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

[@ThePrimeTimeagen]

haha! LETS GO

[@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.

[@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

[@TMinusRecords]

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

[@JonatanBernal]

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

[@ThePrimeTimeagen]

this is probably the most correct take

[@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

[@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

[@nescafezos4265]

for personal projects I like to use just JS with jsdoc to get good autocompletion. thought I write types in TS syntax and had to learn it. and intellij does not always handle autocompletion well but vscode does

[@br3nto]

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

[@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"

[@GearsDatapacks]

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

[@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.

[@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.

[@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.

[@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!!

[@NotTheHeroStudios]

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

[@HominisLupis]

THAT COMMENT ABOUT MODULES IS THE TRUEST THING EVER SPOKEN

[@2mbst1]

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

[@heck-r]

It was 85% tooling, and 15% having classes instead of the function prototype hell

[@laughingvampire7555]

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

[@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.

[@cole.maxwell]

Damn you always do be teaching me something

[@codewkarim]

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

[@gJonii]

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

[@ricardorien]

That ending talking about the sues hahahha

[@calametyreboot4789]

these are great! i love these :D

[@GrahamAtDesk]

I've been doing dynamic languages long enough that completion/LSP support (specifically, accurate predictions of what I can call on an object) hasn't been a thing for most of my career. Tried it with TypeScript. Suspect people can only use the damn language *because* it has LSP support. Give me Python or Ruby with no LSP and their standard docs any day of the week. I'd rather actually know what I'm trying to do, by having studied the docs, tried things out with trial/error/feedback from failure, and (slowly over time) build up an in depth understanding.

[@duwangchew]

typescript actually won because of balls

[@ThePrimeTimeagen]

the ol balls deep victory

[@wlockuz4467]

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

[@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 :)

[@0oShwavyo0]

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

[@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?

[@rentsy3444]

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

[@SCALENE5]

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

[@Gorr1995]

LSP - Liskov Substitution Principle

[@GodsAutobiography]

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

[@ThePrimeTimeagen]

yayayayaya!

[@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.

[@adamclotfelter9875]

4:24 I’m angry that this is not a real book

[@gamer-pv2dx]

I feel I am not a junior anymore

[@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 :)

[@UnhingedNW]

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

[@fierytuner]

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

[@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

[@gamezoid1234]

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

[@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!

[@raymanovich3254]

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

[@theondono]

Embrace, Extend, rEwrite-in-Rust

[@ThePrimeTimeagen]

LOVE IT

[@mzerone-g6m]

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

[@techwithattila]

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

[@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,

[@illker.]

pylance is pyright at the end

[@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.

[@dgcp354]

i thought vs code suggestion was possible because of js REPL

[@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

[@fsouza]

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

[@sulochanacharya4892]

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

[@ThePrimeTimeagen]

i don't have any :)

[@vanweapon]

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

[@joejazdz]

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

[@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.

[@medalikhaled]

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

[@peanutcelery]

Typescript is the best JavaScript linter ever 😶

[@codecraftercc]

pov, i am watching this video on 1.5 speed LMAO

[@ThePrimeTimeagen]

yeah, its a bit crazy

[@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.

[@ofeenee]

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

[@Dmitri_Ivanovich]

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

[@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`+`

[@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

[@Hollowendz]

Why the hell are you watching with the sound so sped up? Made it unwatchable

[@ThePrimeTimeagen]

this was one of my first reacts

[@chrisalexthomas]

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

[@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.

[@AlexAegisOfficial]

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

[@tanercoder1915]

Please don't fast forward the video!

[@mzerone-g6m]

Better developer experince that is why typescript won.

[@MarcelRobitaille]

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

[@irlshrek]

I hope rescript continues to grow

[@mr.random8447]

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

[@TakinProfit]

LSP had very little to do with the success of typescript. If you go back to 2015, there was still no real consensus on whether flow, typescript, or dart was going to be the defacto compile to is language. What pushed Typescript over the top was when Google decided to use it for Angular 2. At the time, Angular was more popular than React by quite a bit, and most React dev were using Flow. Google adopting typescript tipped the scales .

[@laughingvampire7555]

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

[@RG-em1gg]

they spelled Rust wrong

[@adokce]

ofc i know lsp, lsp is a subset of lisp

[@ThePrimeTimeagen]

taht is really funny

[@n0kodoko143]

Facts!

[@nomadtrails]

I disagree. Typescript won because JS is the only thing that runs in the browser. And don't say wasm. And don't say compile dart2js or whatever.

[@insydian]

Ahh. Hi Prime!

[@thatgameguy4929]

Es7 js is ts

[@KyleLanmon]

2x speed gang!

[@simonedwards7101]

But really, a going listen

[@paintdry84]

typescript won because developers like to refactor things