Big projects are ditching TypeScript… why?

Fireship · Beginner ·🌐 Frontend Engineering ·2y ago

Key Takeaways

The video discusses why some big open-source projects like Turbo and Svelte are ditching TypeScript in favor of vanilla JavaScript, highlighting the pros and cons of TypeScript and its potential obsolescence with the proposal of optional type annotations in JavaScript

Full Transcript

it is September 7th 2023 and you are watching the code report it many years ago in 2017 legendary JavaScript user Kent C Dodds said I don't use typescript so I don't ever plan on supporting it in 2019 he goes on to say you are impassioned love of typescript is sort of freaking me out and finally in 2023 comes capitulation typescript is one and it's only a matter of time you're using it whether you like it or not but this is the sign of a good developer you have to be open-minded and willing to adapt to new tools and sometimes tools you don't even like but the big question here is did typescript really win because recently the turns have started to table a bunch of big open source projects have decided to ditch typescript in favor of vanilla JavaScript to understand the shocking turn of events we'll need to go back to the very beginning in 2012 when typescript was first released by Microsoft nobody really cared at first but then a few years later it was adopted by the angular 2 framework which everybody thought was crazy but here's the thing first they think you're crazy then they fight you then you change the world or you go to jail by the early 2020s typescript was everywhere where at which point most of its haters had been converted into True Believers but now right as we're about to reach the Glorious climax of typescript saturation you've got big libraries like svelte drizzle and turbo deciding to ditch typescript from their code bases to be clear that just means that they're not going to use typescript When developing these libraries but as an end user in a framework like svelt for example you're still able to use typescript just like normal but how could anyone possibly go back to vanilla JS after using typescript did they not remember runtime errors like cannot read properties of undefined did they not remember how hard it is to refactor a code base where you have no idea what anything is well these people are a lot smarter than I am so let's first look at this article from dhh that creator of Ruby on Rails who's getting rid of typescript and turbo version 8. the main reason they're getting rid of it is not because of the compile step but rather because it pollutes the code with quote type gymnastics and there's a lot of Truth to that especially when developing a library I'm working on a library myself called svelt fire and as you can see in the code here I have to do my own type gymnastics with typescript just to get rid of some red squiggly lines in the IDE now I could simply place this type with any and not get any type inference but then my boss would yell at me he's a total who will abuse me emotionally and physically if I don't code up to his standards it's not easy being self-employed furthermore I have the compiler in strict mode which means I have to use any anytime I don't want to use an explicit type and that results in code that's anything but beautiful let's head over to turbo on GitHub and see how people are reacting to this change well it's an absolute dumpster fire and a lot of developers are upset that their ts contributions are now Dead on Arrival but another huge project moving away from typescript is spelled and the reasoning is a bit different it's purely practical and I recommend you read this post by Rich Harris spelled 5 which may come out later this year no longer uses typescript and spelled kit is already written in plain vanilla.js and the main benefit is no compile step which is a huge boost in productivity for a large framework like this that may sound like total chaos for a large complex project but they're actually still getting most of the benefits of typescript but doing so with JS talk which is a standard comment format where you declare types and documentation with regular JavaScript comments that can then be used to generate rate types like a d.ts file and most importantly provide intellisense in your editor so you know what the hell everything does and can catch bugs early just like you can with typescript that's the main reason I use typescript in the first place so is it time to just ditch it all together well when it comes to building actual applications with a tool like spell kit or next JS I don't see myself leaving typescript anytime soon those tools integrate TS seamlessly and trying to get the same results with JS doc would be a total nightmare but one day I hope we see the end of this holy war there's currently a stage 1 ecmascript proposal that would add optional type annotations to JavaScript natively thus making typescripts nearly obsolete this has been the code report thanks for watching and I will see you in the next one

Original Description

Why are some big open-source projects like Turbo and Svelte dropping TypeScript in favor of vanilla JavaScript? Learn about the pros and cons of TypeScript #programming #javascript #thecodereport 💬 Chat with Me on Discord https://discord.gg/fireship 🔗 Resources Turbo vs TypeScript https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01 Svelte Dropping TS https://news.ycombinator.com/item?id=35892250 🔥 Get More Content - Upgrade to PRO Upgrade at https://fireship.io/pro Use code YT25 for 25% off PRO access 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - TypeScript Benefits for web development - TS vs JS - Drawbacks of TypeScript - Did Svelte stop using TypeScript? - Does DHH hate TypeScript? - Why TypeScript sucks - Why TypeScript is awesome
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Fireship · Fireship · 0 of 60

← Previous Next →
1 Angular 4 Development and Production Environments with Firebase
Angular 4 Development and Production Environments with Firebase
Fireship
2 OAuth with Angular and Firebase Tutorial
OAuth with Angular and Firebase Tutorial
Fireship
3 Anonymous Authentication with Angular and Firebase - Lazy Registration
Anonymous Authentication with Angular and Firebase - Lazy Registration
Fireship
4 Angular Router Guards for Firebase Users
Angular Router Guards for Firebase Users
Fireship
5 Angular Firebase CRUD App with NoSQL Database Tutorial
Angular Firebase CRUD App with NoSQL Database Tutorial
Fireship
6 Upload Files from Angular to Firebase Storage
Upload Files from Angular to Firebase Storage
Fireship
7 How to Deploy an Angular App to Firebase Hosting
How to Deploy an Angular App to Firebase Hosting
Fireship
8 Sharing Data between Components in Angular
Sharing Data between Components in Angular
Fireship
9 Loading Spinners for Asynchronous Firebase Data
Loading Spinners for Asynchronous Firebase Data
Fireship
10 Angular 4 Transactional Email with Google Firebase Cloud Functions
Angular 4 Transactional Email with Google Firebase Cloud Functions
Fireship
11 Firebase Database Rules Tutorial
Firebase Database Rules Tutorial
Fireship
12 Autocomplete Search with Angular4 and Firebase
Autocomplete Search with Angular4 and Firebase
Fireship
13 Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Fireship
14 Angular Drag-and-Drop File Uploads to Firebase Storage
Angular Drag-and-Drop File Uploads to Firebase Storage
Fireship
15 Text Translation with Firebase Cloud Functions onWrite and Angular 4
Text Translation with Firebase Cloud Functions onWrite and Angular 4
Fireship
16 Custom Usernames with Firebase Authentication
Custom Usernames with Firebase Authentication
Fireship
17 Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Fireship
18 Simple Pagination with Firebase and Angular 4
Simple Pagination with Firebase and Angular 4
Fireship
19 How to Connect Firebase Users to their Data - 3 Methods
How to Connect Firebase Users to their Data - 3 Methods
Fireship
20 Add Toast Message Notifications to your Angular App
Add Toast Message Notifications to your Angular App
Fireship
21 Facebook-Inspired Reactions System with Angular and Firebase
Facebook-Inspired Reactions System with Angular and Firebase
Fireship
22 Learn NgModule in Angular with Examples
Learn NgModule in Angular with Examples
Fireship
23 Lazy Loading Components in Angular 4
Lazy Loading Components in Angular 4
Fireship
24 Stripe Checkout Payments with Angular and Firebase - Part 1
Stripe Checkout Payments with Angular and Firebase - Part 1
Fireship
25 Process Stripe Payments with Firebase Cloud Functions - Part 2
Process Stripe Payments with Firebase Cloud Functions - Part 2
Fireship
26 Selling Digital Content in Angular with Stripe Payments - Part 3
Selling Digital Content in Angular with Stripe Payments - Part 3
Fireship
27 Angular 4 Full Text Search with Algolia - Part 1
Angular 4 Full Text Search with Algolia - Part 1
Fireship
28 Algolia with Firebase Cloud Functions - Part 2
Algolia with Firebase Cloud Functions - Part 2
Fireship
29 Firebase Phone Authentication in Angular 4
Firebase Phone Authentication in Angular 4
Fireship
30 Top 7 RxJS Concepts for Angular Developers
Top 7 RxJS Concepts for Angular Developers
Fireship
31 Learn Angular Animations with 5 Examples
Learn Angular Animations with 5 Examples
Fireship
32 Advanced Firebase Data Filtering (Multi-Property)
Advanced Firebase Data Filtering (Multi-Property)
Fireship
33 Realtime Maps with Mapbox + Firebase + Angular
Realtime Maps with Mapbox + Firebase + Angular
Fireship
34 Angular Reactive Forms with Firebase Database Backend
Angular Reactive Forms with Firebase Database Backend
Fireship
35 Send Push Notifications in Angular with Firebase Cloud Messaging
Send Push Notifications in Angular with Firebase Cloud Messaging
Fireship
36 Top 7 Ways to Debug Angular 4 Apps
Top 7 Ways to Debug Angular 4 Apps
Fireship
37 Infinite Scroll with Angular and Firebase
Infinite Scroll with Angular and Firebase
Fireship
38 Use TypeScript with Firebase Cloud Functions
Use TypeScript with Firebase Cloud Functions
Fireship
39 Realtime Graphs and Charts with Plotly and Firebase
Realtime Graphs and Charts with Plotly and Firebase
Fireship
40 Role-Based User Permissions in Firebase
Role-Based User Permissions in Firebase
Fireship
41 User Presence System in Realtime - Online, Offline, Away
User Presence System in Realtime - Online, Offline, Away
Fireship
42 Location-based Queries with GeoFire and Angular Google Maps
Location-based Queries with GeoFire and Angular Google Maps
Fireship
43 Angular ngrx Redux Quick Start Tutorial
Angular ngrx Redux Quick Start Tutorial
Fireship
44 Angular Ngrx Effects with Firebase Database
Angular Ngrx Effects with Firebase Database
Fireship
45 Progressive Web Apps with Angular
Progressive Web Apps with Angular
Fireship
46 Angular Ngrx with Firebase Google OAuth User Authentication
Angular Ngrx with Firebase Google OAuth User Authentication
Fireship
47 RxJS Quick Start with Practical Examples
RxJS Quick Start with Practical Examples
Fireship
48 Send SMS Text Messages with Twilio and Firebase
Send SMS Text Messages with Twilio and Firebase
Fireship
49 Firebase Database Performance Profiling
Firebase Database Performance Profiling
Fireship
50 Native Desktop Apps with Angular and Electron
Native Desktop Apps with Angular and Electron
Fireship
51 Subscription Payments with Stripe, Angular, and Firebase
Subscription Payments with Stripe, Angular, and Firebase
Fireship
52 Firestore with AngularFire5 Quick Start Tutorial
Firestore with AngularFire5 Quick Start Tutorial
Fireship
53 Angular HTTP Client Quick Start Tutorial
Angular HTTP Client Quick Start Tutorial
Fireship
54 Google Sign-In with Firestore Custom User Data
Google Sign-In with Firestore Custom User Data
Fireship
55 Star Review System from Scratch with Firestore + Angular
Star Review System from Scratch with Firestore + Angular
Fireship
56 Angular Chatbot with Dialogflow (API.ai)
Angular Chatbot with Dialogflow (API.ai)
Fireship
57 Learn @ngrx/entity and Feature Modules
Learn @ngrx/entity and Feature Modules
Fireship
58 Infinite Scroll Pagination with Firestore
Infinite Scroll Pagination with Firestore
Fireship
59 Faster Firestore via Data Aggregation
Faster Firestore via Data Aggregation
Fireship
60 Contentful - CMS for Angular Progressive Web Apps
Contentful - CMS for Angular Progressive Web Apps
Fireship

Some big open-source projects are moving away from TypeScript, citing issues with type gymnastics and compile steps, and instead using vanilla JavaScript with JS Doc for type inference and documentation

Key Takeaways
  1. Evaluate the pros and cons of using TypeScript in a project
  2. Consider using JS Doc for type inference and documentation in vanilla JavaScript
  3. Assess the impact of optional type annotations in JavaScript on the use of TypeScript
  4. Refactor code to minimize type gymnastics and maximize readability
💡 The proposal of optional type annotations in JavaScript may make TypeScript nearly obsolete, changing the way developers approach type systems in software development

Related Reads

Up next
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Adrian Twarog
Watch →