TypeScript Masterclass | VoidX Academy

1. The TypeScript Paradigm & Core Types

Architecture

The Static Typing Paradigm

JavaScript is a Dynamically Typed language. This means types are determined at runtime (when the browser is actually executing the code). You can declare let age = 25; and on the very next line write age = "Twenty Five";. The JavaScript engine will allow this, which often leads to catastrophic bugs when you try to perform math on what you thought was a number, but is actually a string.

TypeScript, developed by Microsoft, introduces Static Typing. It is a superset of JavaScript. This means every valid JavaScript file is technically a valid TypeScript file, but TypeScript adds a strict layer of rules on top. In TypeScript, types are checked at Compile Time (when you save the file in your editor). If you try to assign a string to a number variable, TypeScript will throw a fatal error and refuse to build your application.

The Compiler (tsc) and Type Erasure

It is absolutely critical to understand that browsers cannot read TypeScript. Chrome, Safari, and Node.js have no idea what an interface or a type is.

When you finish writing your TypeScript code, a compiler (like tsc, Babel, or Vite) translates your .ts files into standard .js files. During this process, a concept called Type Erasure occurs. The compiler strips away every single TypeScript rule, interface, and type annotation, leaving behind pure, highly optimized JavaScript.

TypeScript is purely a development tool. It exists solely to help developers catch errors before the code ever reaches the user.

Core Primitives & Type Inference

In TypeScript, you can explicitly define the type of a variable using a colon : followed by the type name. However, TypeScript also possesses a powerful Type Inference engine. If you initialize a variable with a value, TypeScript is smart enough to lock in that type automatically without you writing it.

// 1. Explicit Typing (Developer manually defines the type)
let username: string = "Alice";
let age: number = 30;
let isOnline: boolean = true;

// 2. Type Inference (TypeScript automatically figures it out)
// Because we assigned '100', TS locks 'score' as a number forever.
let score = 100; 

// ❌ ERROR: Type 'string' is not assignable to type 'number'.
// score = "High Score"; 

Arrays and Tuples

When typing arrays, you must define what kind of data is allowed inside the array. You cannot mix strings and numbers in a standard typed array.

// Standard Array: An array that ONLY contains numbers
let prices: number[] = [9.99, 14.50, 20.00];
// Alternative generic syntax (identical behavior): 
let tags: Array = ["React", "TypeScript"];

// ❌ ERROR: Argument of type 'string' is not assignable to parameter of type 'number'.
// prices.push("Free");

Sometimes, you need an array with a fixed length where each specific index has a specific type. This is called a Tuple. React engineers use Tuples constantly—the useState hook returns a Tuple!

// Tuple: A fixed-length array where index 0 is a string, and index 1 is a number.
let userRecord: [string, number] = ["Alice", 30];

// ❌ ERROR: Type 'number' is not assignable to type 'string'.
// userRecord = [30, "Alice"]; // The order is strictly enforced!

The Danger of `any` and `unknown`

If you don't know what type a variable will be, you can use the any type. However, using any is a massive anti-pattern. It completely disables the TypeScript compiler for that variable, reverting it back to standard, chaotic JavaScript.

// ❌ ANTI-PATTERN: Using 'any'
let mysteriousData: any = "Hello";
mysteriousData = 42; 
mysteriousData.fakeMethod(); // No error thrown! The app will crash at runtime.

If you truly do not know what data is coming in (e.g., fetching a random API payload), the strict architectural standard is to use the unknown type. It forces you to write code to check what the type is before you are allowed to use it.

// ✅ CORRECT ARCHITECTURE: Using 'unknown'
let data: unknown = "Hello";

// data.toUpperCase(); // ❌ ERROR: Object is of type 'unknown'.

// You must narrow the type first (Type Guarding)
if (typeof data === "string") {
  console.log(data.toUpperCase()); // ✅ Safe! TS knows it is a string here.
}

Knowledge Check

Ready to test your understanding of 1. The TypeScript Paradigm & Core Types?

2. Object Architecture (Interfaces vs Types)