TypeScript

About

  • It's JavaScript, but with static typing.

  • Because of static typing, this allows autocomplete throughout the code.

  • When writing TypeScript code and compiling it, it is transformed into JavaScript code.

  • It is interpreted by a browser or Node.

  • Tutorial .

    • {9:30 -> 22:54}

      • Setting compilation configs, debugging, and some warning settings.

    • {22:55 -> 1:04:00}

      • Presentation of the language's static typing features.

Problems

Build Systems

Vite

  • Next-gen frontend build tool / dev server.

  • Fast development experience with HMR.

  • Uses esbuild  under the hood for dependency pre-bundling.

  • Uses native ESM  in the browser during dev for near-instant server start.

  • Handles HMR, plugin system, asset handling, and production bundling (usually with Rollup)

  • Vite is a full dev tool, not just a bundler. It uses esbuild as a speed optimization, but it gives you a full developer workflow.

  • Explanation .

ESBuild

  • Bundler and minifier.

  • Fast compilation of JS/TS code.

  • Written in Go.

  • It’s primarily a bundler; it doesn’t include a dev server or hot module replacement (HMR) out of the box. It’s often used as the core engine inside other tools .

TypeScript Compiler

  • Basic compilation:

    • tsc my-file.ts

  • Automatic compilation, whenever the file is modified:

    • tsc my-file.ts --watch

  • Compile all .ts files:

    • tsc *.ts

ESBuild vs TypeScript Compiler

  • Speed :

    • ESBuild is noticeably faster than tsc , especially in large projects with many files.

  • Functionality :

    • While tsc  is primarily focused on compiling TypeScript to JavaScript and static type checking, ESBuild excels at fast compilation of JavaScript and TypeScript as well as creating optimized bundles.

  • Flexibility :

    • ESBuild can be used as a standalone build tool or integrated into development workflows that require fast and efficient compilation of JavaScript/TypeScript code.

Reverse Compilation from JS to TS

  • How to do it:

    1. Copy and paste the JS code into a TS file.

    2. Manually adjust what’s needed, adding typing where it doesn’t exist.

  • In other words, a mess. There is no static logic.

  • "There are third-party tools that attempt to automate the conversion of JavaScript to TypeScript, such as js-to-ts-converter . However, these tools can have significant limitations in type inference, especially for complex or semantic code."