The Rise, the Fall, and the Future of TypeScript

Walking through TypeScript history to predict the future

TypeScript is an open-source programming language. It adds static typing with optional type annotations to JavaScript. It is transpiled to JavaScript for the development of large applications. The rise of TypeScript has been impressive, and claim of its fall is also a shock. What is the future of TypeScript?

VanillaJS JavaScript

Vanilla in slang means unexciting, normal, conventional, and boring. VanillaJS stands for regular JavaScript, and it is a term for library/framework free JavaScript.

The following is the list of ECMAScript versions:

• ES1: ECMAScript 1 (1997), the first edition.
• ES2: ECMAScript 2 (1998), some editorial changes.
• ES3: ECMAScript 3 (1999), added regular expressions, try/catch, switch, and do-while.
• ES4: ECMAScript 4 (abandoned).
• ES5: ECMAScript 5 (2009), added strict mode, JSON support, String.trim(), Array.isArray(), array iteration methods, and trailing commas for object literals.
• ES6: ECMAScript 2015, added let, const, default parameter values, arrow functions, promises, Array.find(), and Array.findIndex().
• ES7: ECMAScript 2016, added exponential operator (**) and Array.includes().
• ES8: ECMAScript 2017, added string padding, Object.entries(), Object.values(), Object.getOwnPropertyDescriptors(), async functions, shared memory and atomics, and trailing commas for function parameters.
• ES9: ECMAScript 2018, added rest / spread properties, asynchronous iteration, Promise.finally(), additions to RegExp, and lifting template literal restriction.
• ES10: ECMAScript 2019, added String.trimStart(), String.trimEnd(), Object.fromEntries(), Array.flat(), Array.flatMap(), Symbol.prototype.description, Function.prototype.toString() revision, JSON superset, well-formed JSON.stringify(), and optional catch binding.
• ES11: ECMAScript 2020, added BigInt, globalThis, import(), import.meta, String.matchAll(), Promise.allSettled, for-in mechanics, optional chaining (?), and nullish coalescing operator (??).
• ES12: ECMAScript 2021, added String.replaceAll(), Promise.any, WeakRefs, logical assignment operators, and numeric separators.
• ES13: ECMAScript 2022, added Class fields, Class static block, ergonomic brand checks for private fields, Object.hasOwn(), RegExp match indices, top-level await, .at() methods, and Error cause.
• ES14: ECMAScript 2023, added Array.findLast(), Array.findLastIndex(), Array.toReversed(), Array.toSorted(), Array.toSpliced(), Array.with(), Shebangs/Hashbang (#!), and Symbols as WeakMap keys.
• ES15: ECMAScript 2024, added Atomics.waitAsync, RegExp v flag with set notation, resizable and growable ArrayBuffer, and well-formed unicode strings.

As new JavaScript features are introduced, not all browsers support them immediately. Here is a program that detects the supported JavaScript version of a browser:

// ecmaScriptChecker.js

const ecmaScriptInfo = (function() { // arrow function may not be supported
  function getESEdition() {
    switch (true) {
      case !Array.isArray:
        return 3;
      case !window.Promise:
        return 5;
      case ![].includes:
        return 6;
      case !''.padStart:
        return 7;
      case !Promise.prototype.finally:
        return 8;
      case !Object.fromEntries:
        return 9;
      case !Promise.allSettled:
        return 10;
      case !''.replaceAll:
        return 11;
      case ![].at:
        return 12;
      case ![].toReversed:
        return 13;
      case !Atomics.waitAsync:
        return 14;
      default:
        return 15;
    }
  }

  function getESYear(edition) {
    return {
      3: 1999,
      5: 2009
    }[edition] || 2009 + edition;
  }
  
  const edition = getESEdition();
  const year = getESYear(edition);

  console.log('The browser supports ES'+ edition +' | Year: '+ year); // template literals may not be supported
})();

The unsupported ECMAScript versions lead to potential compatibility issues for developers targeting broader audiences. Babel solves this problem by transpiling modern JavaScript code into an older version of JavaScript (ES5) that is widely supported across various browsers and environments. This process allows developers to use cutting-edge language features without sacrificing compatibility.

For a long period of time, browsers only support ES5. Babel has been a widely used JavaScript compiler that transpiles ES6+ code.

The Rising of TypeScript

TypeScript was developed by Microsoft. On October 1, 2012, TypeScript was unveiled publicly for the first time. On April 2, 2014, TypeScript 1.0 was released.

TypeScript is JavaScript with added syntax for types. Since it is a superset of JavaScript with static typing, all JavaScript programs are syntactically valid TypeScript. However, JavaScript programs can fail to eslint for type checking.

Here is an example of the greet function in JavaScript:

// hello.js

function greet(name) {
  return 'Hello, ' + name;
}

Add typing to the greet function by defining name as a string and the return value also a string. The change converts the greet function into TypeScript:

// hello.ts

function greet(name: string): string {
  return 'Hello, ' + name;
}

We have to use Babel to compile ES6+ JavaScript to ES5 anyway. It does not matter to add additional transformation to remove types during the compilation.

Running tsc locally compiles the closest project defined by a tsconfig.json, or the TypeScript files specified by parameters. When TypeScript files are specified on the command line, tsconfig.json files are ignored.

TypeScript provides a wide variety of advanced tools, such as autocompletion, navigation, and refactoring. TypeScript tooling is superior, compared to vanilla JavaScript. For example, a code analyzer can instantly show errors in the typed code. TypeScript brings order to JavaScript’s chaos. It provides a scalable, bug-resistant approach to delivering robust web applications. The type safety and tooling simply cannot be matched in vanilla JavaScript.

On September 14, 2016, Angular 2 was released, using TypeScript. Besides Angular, other major frameworks, such as React and Vue, have also recommended or supported TypeScript.

Ever since, TypeScript started an uptrend, and it has had ten years of boom:

Now what?

The Fall of TypeScript

On March 9, 2023, Svelte published zero-effort type safety, where they moved type declarations from .ts files to .js files with JSDoc annotations. The change caused the public misunderstanding that Svelte dropped TypeScript, which ended up #1 on Hacker News.

On May 10, 2023, the Svelte creator had to clarify the situation that Svelte did not abandon type safety. They simply moved type declarations from .ts files to .js files with JSDoc annotations. This change will not affect the ability to use TypeScript with Svelte at all. Svelte still has a tsconfig.json file, and it runs the tsc command. It should be considered continuously using TypeScript, as a variation.

Here is an example of the JSDoc-based type syntax:

// hello.js

/**
 * @param {string} name - A string param.
 */
function greet(name) {
  return 'Hello, ' + name;
}

On September 6, 2023 (6:58am), Turbo 8 dropped TypeScript, as they believe two things:

• JavaScript is well-suited for most of the work they do on the server side.
• For the client side, the fact that running code in a browser means running JavaScript. Being able to write that, free of any tooling and strong typing, is a blessing under the circumstances.

After Turbo 8 dropped TypeScript, users still can write client code using TypeScript, or use any other library that employs TypeScript.

On the same day (11:58am), Drizzle ORM (Object Relational Mapper), a headless TypeScript ORM with a head, twittered, “We’re removing TypeScript from Drizzle”.

It caused a splash with 443.4K views, but it is satire.

On September 7, 2023, Fireship’s video made an even bigger splash, “Big projects are ditching TypeScript… why?” The video had 941K views.

Ditching TypeScript may not be happening, but will it happen soon?

The Future of TypeScript

TypeScript itself does not change, although the new releases come out regularly, such as TypeScript 5.2 was released on August 25, 2023. The count of TypeScript weekly downloads is still as high as 38,516,041. However, two things have changed: browsers and JavaScript.

Most browsers are evergreen

On November 13, 2012, the concept of an evergreen browser was introduced at a Web Performance meetup in San Francisco. It refers to a browser that automatically upgrades to future versions. It solves the problem that users do not download updates, and hence run older browsers with security holes and bugs.

The futuristic model makes browsers more compatible with the latest ECMAScript standard. Execute ecmaScriptChecker.js in a browser console, and likely, we will see that the browser is supporting a newer standard.

The browser supports ES15 | Year: 2024

Sooner or later, we may not need to transpile JavaScript files before they run on a browser.

JavaScript is becoming TypeScript

Technical Committee 39 (TC39) is a group of JavaScript experts who work on the standardization of ECMAScript.

The TC39 process has a number of stages:

• Stage 0 (Strawperson): Takes input for the specification.
• Stage 1 (Proposal): Proposes the high-level API for review.
• Stage 2 (Draft): Precisely describes the syntax and semantics using formal spec language.
• Stage 3 (Candidate): Designated reviewers have signed off on the current spec text.
• Stage 4 (Finished): The addition is ready for inclusion in the formal ECMAScript standard.

On March 9, 2022, Microsoft announced a new Stage 0 proposal that supports an erasable and optional type syntax for JavaScript. The syntax is compatible with and motivated by TypeScript, which could be used by any type checker, and skipped over by JavaScript engines. Types can be treated as comments.

On March 22, 2023, the proposal advanced to Stage 1. With this proposal, the following code is actually JavaScript:

// hello.js

function greet(name: string): string {
  return 'Hello, ' + name;
}

What is the future of TypeScript?

It may be directly used in a browser without compilation. TypeScript was born as a superset of JavaScript, and eventually, most syntaxes in TypeScript are available in JavaScript. It may not be called TypeScript any more. Instead, developers may simply call it JavaScript, ECMAScript X.

After all, it is just a name, right?

Regardless, JavaScript/TypeScript will advance with more features and capabilities.

Conclusion

We have walked through TypeScript history, and explained why and how TypeScript has boomed. With today’s evergreen browsers and potential JavaScript with type annotations, the day may be near that TypeScript goes back to its root, JavaScript.

Thanks for reading.

Want to Connect? 

If you are interested, check out my directory of web development articles.

Appendix

We had written a collection of articles about Highcharts. The following is the React code that is used to create the timeline chart in the head:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
import Timeline from 'highcharts/modules/timeline';
HighchartsAccessibility(Highcharts);
Timeline(Highcharts);

// left data label setting
const dataLabels = {
  x: -300,
  distance: -200,
};

// print out specific stage
const printStage = (
  renderer,
  text,
  start,
  end,
  middle,
  dashstyle = 'solid'
) => {
  renderer
    .path(['M', 300, start, 'L', 300, end])
    .attr({
      'stroke-width': 2,
      dashstyle,
      stroke: 'blue',
    })
    .add();

  renderer
    .label(text, 270, middle)
    .css({
      color: 'blue',
    })
    .attr({
      rotation: -90,
    })
    .add();
};

// get Highcharts options
const getOptions = () => ({
  chart: {
    type: 'timeline',
    inverted: true,
    height: 1500,
    events: {
      load: function () {
        const chart = this;
        const renderer = chart.renderer;

        // the rise stage
        printStage(renderer, 'The Rise!', 300, 1000, 680);

        // the fall stage
        printStage(renderer, 'The Fall?', 1020, 1420, 1250, 'dash');

        // the future
        renderer
          .label('?', 290, 1445)
          .attr({
            color: 'blue',
          })
          .css({
            fontWeight: 'bold',
            fontSize: '1.5em',
            color: 'blue',
          })
          .add();
      },
    },
  },
  title: {
    text: 'The Rise, the Fall, and the Future of TypeScript',
  },
  subtitle: {
    text: 'Created by Jennifer Fu',
  },
  xAxis: {
    visible: true,
  },
  yAxis: {
    visible: false,
  },
  series: [
    {
      dataLabels: {
        alternate: false,
        width: 500,
        format:
          '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
          '{point.name:%B %e, %Y}</span><br/>{point.label}',
      },
      data: [
        {
          name: '1997',
          label: 'ECMAScript 1 was released.',
          dataLabels,
        },
        {
          name: '1998',
          label: 'ECMAScript 2 was released.',
          dataLabels,
        },
        {
          name: '1999',
          label: 'ECMAScript 3 was released.',
          dataLabels,
        },
        {
          name: '2009',
          label: 'ECMAScript 5 was released.',
          dataLabels,
        },
        {
          name: 'October 1, 2012',
          label: 'TypeScript was unveiled publicly.',
        },
        {
          name: 'November 13, 2012',
          label: 'Concept of an evergreen browser was introduced.',
        },
        {
          name: 'April 2, 2014',
          label: 'TypeScript 1.0 was released.',
        },
        {
          name: '2015',
          label: 'ECMAScript 2015 was released.',
          dataLabels,
        },
        {
          name: '2016',
          label: 'ECMAScript 2016 was released.',
          dataLabels,
        },
        {
          name: 'September 14, 2016',
          label: 'Angular 2 was released, using TypeScript.',
        },
        {
          name: '2017',
          label: 'ECMAScript 2017 was released.',
          dataLabels,
        },
        {
          name: '2018',
          label: 'ECMAScript 2018 was released.',
          dataLabels,
        },
        {
          name: '2019',
          label: 'ECMAScript 2019 was released.',
          dataLabels,
        },
        {
          name: '2020',
          label: 'ECMAScript 2020 was released.',
          dataLabels,
        },
        {
          name: '2021',
          label: 'ECMAScript 2020 was released.',
          dataLabels,
        },
        {
          name: '2022',
          label: 'ECMAScript 2020 was released.',
          dataLabels,
        },
        {
          name: 'March 9, 2022',
          label: 'Type syntax for JavaScript was proposed for TC39 Stage 0.',
        },
        {
          name: '2023',
          label: 'ECMAScript 2023 was released.',
          dataLabels,
        },
        {
          name: 'March 9, 2023',
          label: 'News spread that Svelte dropped TypeScript.',
        },
        {
          name: 'March 22, 2023',
          label: 'Type syntax for JavaScript advanced to TC39 Stage 1.',
        },
        {
          name: 'May 10, 2023',
          label: 'Svelte claimed that it did not abandon type safety.',
        },
        {
          name: 'September 6, 2023 (6:58am)',
          label: 'Turbo 8 dropped TypeScript.',
        },
        {
          name: 'September 6, 2023 (11:58am)',
          label: 'Drizzle ORM joked removing TypeScript from Drizzle.',
        },
        {
          name: 'September 7, 2023',
          label:
            'Video was released: "Big projects are ditching TypeScript… why?"',
        },
        {
          name: '2024',
          label: 'ECMAScript 2024 was released.',
          dataLabels,
        },
        {
          name: 'Future of TypeScript',
          label:
            'JavaScript/TypeScript advances with more features and capabilities.',
        },
      ],
    },
  ],
  credits: {
    enabled: false,
  },
});

function App() {
  return <HighchartsReact highcharts={Highcharts} options={getOptions()} />;
}

export default App;

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer
• Learn how you can also write for In Plain English️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture