TypeScript - Very Informative - 2026

If you don't want to learn about the different ways to use and install TypeScript, then feel free to skip this section. Otherwise, buckle up and see you in the lectures.

Broadly speaking, there are two ways you can use TypeScript - either by installing and using the compiler TSC yourself, or directly typing TypeScript and letting libraries or runners handle the transpile process for you.

In this lecture I'll show you a relatively new feature in Node (its still in experimental phase) that allows you to run TS files directly in Node, with no requirement to compile the file into a JS file. Pretty cool, huh.

You can also use TypeScript natively by executing TS code directly in a browser. After all, browsers also use JavaScript engines and therefore in theory should have no issues with transpiling TS code into JS.

An alternative way to use TypeScript without installing the compiler to your operating system, is via the use of libraries and runners. I'll talk about Gulp and also show you an example of using ts-node to execute TypeScript code without having to go through the compile process.

As per the TypeScript official website, there are 3 methods to install the official compiler to your project, depending on what programming environment you're working in.

Please don't feel overwhelmed.

• To convert TypeScript (TS) code into JavaScript (JS), you need a transpiler.

• The most widely used tool for this purpose is the official TypeScript compiler, known as tsc.

• In addition to tsc, other tools like Deno also provide their own mechanisms for transpiling TypeScript.

• This flexibility enables developers to choose the best tool for their specific needs while still benefiting from TypeScript's advanced features.

Before we get into Node.js, I want to explain why Node is the most popular choice for executing the TypeScript compiler.

In this lecture let's use the TSC command to compile your TypeScript file into a valid JavaScript file.

When you run the tsc command in the terminal, it relies on the system's PATH environment variable to locate the executable file associated with tsc.

When a batch script is run, the commands within it are executed sequentially. This can include calling other executables.  Batch scripts are text files containing a sequence of commands executed by the command-line interpreter in Windows (cmd.exe). They typically have .bat or .cmd extensions.

TSC stands for TypeScript Compiler, which is an executable (tsc.exe) that compiles TypeScript files into JavaScript. It is part of the TypeScript language ecosystem.

The bin folder typically contains executable files related to a package. In the case of TypeScript, this includes the tsc.exe file, which is the TypeScript Compiler executable for Windows.

The lib folder contains TypeScript declaration files (*.d.ts) that provide type information for various JavaScript libraries and built-in types. These files help TypeScript understand the types used in your code and enable type checking.

The shebang line (denoted as #!) is a crucial component in scripting that specifies which interpreter should be used to execute a script. In the context of TypeScript and the TypeScript Compiler (tsc), the shebang line allows TypeScript files to be executed directly from the command line, assuming they are compiled to JavaScript or are being interpreted directly by Node.js.

In the context of TypeScript, the chicken-and-egg problem relates to the self-hosting and bootstrapping of the TypeScript Compiler (tsc), particularly because the source code for tsc is written in TypeScript itself.

The TypeScript Compiler (tsc) is written in TypeScript. This means that to compile TypeScript code into JavaScript, you need a working version of tsc. However, to build tsc, you also need a way to compile its TypeScript source code.

The initial version of tsc must be compiled using an existing JavaScript runtime (like Node.js) that can execute JavaScript. Thus, one version of the compiler must exist before another can be built.

The first version of tsc (which was written in JavaScript) compiles subsequent versions that are written in TypeScript. This creates a cycle where each version relies on the previous one until a stable base is established.

I want to turn our attention to our project.

Here are our starting project files.

Adding a tsconfig.json file to a TypeScript project is a fundamental step that allows developers to configure the TypeScript compiler's behavior and manage project settings effectively.

TypeScript effectively keeps pace with the latest JavaScript features, particularly those defined in ECMAScript Next (ESNext).

The outDir and rootDir properties in TypeScript's tsconfig.json file are essential for managing the output structure of compiled files. The outDir property specifies the directory where the TypeScript compiler will output the generated JavaScript files, along with any declaration files (.d.ts) and source maps (.js.map).

The rootDir property defines the root folder of your input files. It is used by TypeScript to determine which files should be included in the compilation process and to calculate relative paths for output files. If not specified, TypeScript will automatically infer it based on the location of your input files.

TypeScript can bundle files, allowing developers to compile multiple TypeScript modules into a single JavaScript file. This capability is particularly useful for creating applications that need to be deployed in a browser or packaged for distribution.

TypeScript provides robust support for various module systems, allowing developers to choose the most suitable format for their applications. Understanding how TypeScript handles these different module systems is crucial for effective code organization and interoperability.

The --watch flag in TypeScript's compiler (tsc) is a powerful feature that enables automatic recompilation of TypeScript files whenever changes are detected.

Implicit and explicit types in TypeScript refer to how variable types are assigned and inferred within the language, which is designed to enhance code safety and maintainability.

Implicit typing occurs when TypeScript automatically infers the type of a variable based on its initial value or context without requiring the programmer to specify it explicitly.

By specifying types explicitly, such as let myVar: number = 10;, developers communicate their intentions clearly.

Type aliases and interfaces in TypeScript are both tools for defining custom types, but they serve slightly different purposes. Type aliases allow you to create new names for existing types, which can include primitives, unions, and tuples, making them versatile for simplifying complex type definitions.

On the other hand, interfaces are specifically designed to define the structure and behavior of objects, allowing for the declaration of properties and methods that an object must implement. They also support features such as extending other interfaces and declaration merging, which enables multiple declarations to be combined into one.

Conditional types allow you to define types based on a condition, using the syntax T extends U ? X : Y.

Generics enable developers to write functions, classes, and interfaces that can operate on various data types while maintaining type safety. By using placeholder types (often represented by letters like T or K), generics allow you to create reusable components that can handle different types without sacrificing type checking.

Most programming languages have error codes whenever they throw an error. TypeScript is no exception, so in this lecture I'll show you where these error codes are coming from.

I'll also illustrate that you can use DOM type castings in TypeScript to tell the TS compiler what type of DOM element you are working with.

By defining specific types for events such as "click" and "keydown," TypeScript allows developers to access properties related to these events with confidence, reducing the risk of runtime errors. For instance, when handling a click event, using MouseEvent provides access to mouse-specific properties like clientX and clientY, while the KeyboardEvent type offers details about key presses. This strong typing not only facilitates better autocompletion and documentation within IDEs but also ensures that developers can write cleaner and more maintainable code by clearly specifying the expected structure of event objects. Overall, leveraging event types in TypeScript is essential for building robust and interactive applications.

I want to use ES6 modules in our project to show you how its done and to keep our code modular.

In TypeScript, objects can be defined using interfaces and types, which specify the shape and structure of an object by detailing its properties and their respective types. This allows developers to enforce type safety and ensure that objects adhere to a defined structure, making the code more predictable and easier to maintain. Additionally, TypeScript provides the readonly access modifier, which can be applied to properties within classes and interfaces to make them immutable after initialization. Properties marked as readonly can only be assigned a value at the time of declaration or within the constructor, preventing any modifications thereafter.

In this lecture, you will learn about the Record type in TypeScript, a powerful utility that allows for the creation of object types with specified keys and uniform value types. The Record type is particularly useful for defining dictionaries or key-value pairs where both the keys and values have fixed types, ensuring type safety and consistency throughout your code

Enums in TypeScript are a powerful feature that allows developers to define a set of named constants, making it easier to manage related values in a clear and organized manner. There are two primary types of enums: numeric and string.

In this lecture, you will learn about the differences between interfaces and types in TypeScript, two essential tools for defining the shape of objects and ensuring type safety in your code. Interfaces are specifically designed to describe the structure of an object, allowing for declaration merging, which means you can define the same interface multiple times and TypeScript will combine them into a single definition. In contrast, types are more flexible and can represent not only object shapes but also primitive types, unions, intersections, and more.

We are going to start creating our createBox() function, utilizing the BoxStructure interface we defined earlier.

After we create the <div> element that will contain our box, we have to style the Box with CSS and then finally append that box to the DOM.

In order to return public properties, we have to "return" something after our function has executed. As I will mention, if we used the "class" keyword to define this function, we could have utilized TypeScript's built-in access modifiers. I'll show you how this is done at the end of course. Remember, the reason I am using a function here and not "classes" is that "classes" in JavaScript are merely syntactic sugar over functions.

In this lecture, you will learn about the "noUnusedLocals" option in the tsconfig.json file, a helpful feature in TypeScript that helps you maintain clean and efficient code. When enabled, this setting will trigger a compilation error if there are any local variables declared in your code that are not used anywhere, encouraging you to remove unnecessary code and improve readability.

In this lecture we are going to start defining our buildBox() function in the main script.ts file. At the same time, we will validate user input to ensure that the value entered is (a) not a string and (b) not negative.

I want to define a boxGen() function that generates boxes using a setTimeout() method. I have done this so the generation of boxes happens with slight pauses to create a cool effect. I will also have to create a timer to keep track of how many boxes we need to generate versus how many have generated.

In this lecture, you will learn about TypeScript arrays and tuples, two fundamental data structures that help you manage collections of values effectively. Arrays are flexible and can hold multiple items of the same type, allowing for dynamic manipulation such as adding or removing elements. In contrast, tuples are fixed-length arrays where each element can have a different type, making them ideal for representing structured data with a known format, like coordinates or RGB color values.

Let's import our enum from our box.ts module, and then use Object.values and filter() to create a dynamic array. We'll use this array shortly when generating a random size property from it.

In this lecture let's use the Math.random() function to generate a random box size, which we hope (crossing fingers) is not a bomb.

In this lecture, you will learn how to extend a generic type in TypeScript using the extends keyword, a powerful feature that allows you to create more specific types based on existing ones. By extending a generic type, you can add constraints that ensure the type being used meets certain requirements, such as in our case where we know the BoxSizes enum can only be of type string or number.

Since each color component can take on 256 different values (from 0 to 255), it's important to understand how to generate random colors correctly. I will explain why our function needs to be amended so that the Math.random() number is multiplied by 256 instead of 255. This adjustment ensures that we can include the full range of possible values for each color component, allowing for a complete spectrum of colors in our application. By making this change, you will gain a clearer understanding of how to work with RGB values effectively in your code.

After this lecture, you'll be ready to test our entire codebase.

You've done it! You've done 99% of the entire course.

In this lecture, let's test our code to see what amendments we need to do.

Let's return to our IF statement and deal with styling the case when a BOMB is returned.

WOOP WOOP!! You're a champion.

Let's test our final code, and make minor tweaks.

Attached are the project files.

Let's work inside of our box.ts file and amend the function. Specifically, let's use the "class" syntax that JavaScript provides to create a box.

YOU'VE DONE IT.

You have literally converted the entire codebase to comply with the class syntax.

WELL DONE!

The class syntax course files.

There are many videos and articles online that seem to scare developers into thinking that large scale projects (like Svelte, Drizzle or Turbo 8) have dropped supported for TypeScript.

But are they true? 

JSDoc is a documentation generator for JavaScript, allowing developers to annotate their code with comments that describe the functionality, parameters, return types, and other aspects of functions, classes, and variables. It was created in 1999 and serves a similar purpose to documentation tools for other programming languages, such as Javadoc for Java. By using a specific syntax, JSDoc comments can be parsed by various tools to provide enhanced code documentation and type inference.

The // @ts-check directive is used in JavaScript files to enable TypeScript's static type checking capabilities. By adding this comment at the top of a .js file, developers can leverage TypeScript's type inference based on JSDoc annotations.

Svelte now officially supports TypeScript, enhancing the development experience by allowing developers to use TypeScript directly within Svelte components through the addition of lang="ts" in <script> tags.

Turbo 8 has officially dropped TypeScript support, a decision made by its creator, David Heinemeier Hansson, who expressed a long-standing preference for plain JavaScript over TypeScript. This move has sparked significant backlash within the community, as many users valued TypeScript for its type safety and developer experience enhancements.

Drizzle ORM offers robust support for TypeScript, providing a lightweight and type-safe object-relational mapping solution designed specifically for TypeScript and JavaScript applications.

Why then, have developers said that they have dropped support for TS? 

A new ECMAScript proposal is under consideration that aims to introduce native type annotations in JavaScript, allowing developers to write type-annotated code directly without the need for transpilation. This proposal, often referred to as "Types as Comments," seeks to enhance the language by enabling type systems like TypeScript and Flow to coexist with JavaScript, effectively treating type annotations as comments that can be ignored at runtime.

An outro to say a heart warmed THANK YOU for being such a great student and supporter.