What Is TypeScript?

Now that you understand why TypeScript is useful, let's look at TypeScript from a technical perspective and how it works.

TypeScript: A technical overview

TypeScript is a programming language developed and maintained by Microsoft. It was first released in 2012 and has grown to become one of the most popular languages for web development.

TypeScript is a superset of JavaScript

TypeScript is a superset of JavaScript. This is a crucial concept to understand:

Superset means that TypeScript includes everything JavaScript has, plus some extra features.

The code transpiles into JavaScript. This means the TypeScript source code is converted into the JavaScript equivilent.

What this means in practice

All valid JavaScript code is also valid TypeScript code. You can take any JavaScript file, rename it from .js to .ts, and it will still work.

// pizza.js - valid JavaScript
function createPizza(name, price) {
  return {
    name: name,
    price: price
  };
}

const pizza = createPizza("Margherita", 10.99);

// pizza.ts - valid TypeScript
function createPizza(name, price) {
  return {
    name: name,
    price: price
  };
}

const pizza = createPizza("Margherita", 10.99);

TypeScript adds additional features on top of JavaScript, most notably static type checking and other enhancements.

Static vs dynamic typing

Understanding the difference between static and dynamic typing is key to understanding TypeScript:

JavaScript: Dynamically typed

JavaScript is a dynamically typed language:

• Types are determined at runtime (when the code executes)
• Variables can change types during execution
• Type errors are only discovered when the code runs

// JavaScript - types checked at runtime
let order = "pizzas-123";  // order is a string
order = 456;              // now order is a number - no error
order.toUpperCase();      // error only happens when this line executes

// JavaScript - types checked at runtime
let order = "pizzas-123";  // order is a string
order = 456;              // now order is a number - no error
order.toUpperCase();      // error only happens when this line executes

Since toUpperCase is a string method, it will cause an error:

Uncaught TypeError: order.toUpperCase is not a function

But maybe not until later in the program, long after order was already set to be a number.

TypeScript: Statically typed

TypeScript is a statically typed language:

• Types are determined at compile time (before code runs)
• TypeScript analyzes your code before execution
• Type errors are caught during development

// TypeScript - types checked at compile time
let order: string = "pizza-123";  // order is a string
order = 456;                       // error caught immediately

// TypeScript - types checked at compile time
let order: string = "pizza-123";  // order is a string
order = 456;                       // error caught immediately

Run the code above to see the error.

The TypeScript compiler (tsc)

TypeScript code cannot run directly in browsers or Node.js. It must first be compiled (transformed) into JavaScript. This is done by the TypeScript compiler, called tsc.

The compilation process

Here's what happens when you compile TypeScript:

┌─────────────┐
│  TypeScript │
│   (.ts)     │
└──────┬──────┘
       │
       │ 1. Type Checking
       │    - Checks types
       │    - Catches errors early
       │
       ▼
┌─────────────┐
│  Compiler   │
│    (tsc)    │
└──────┬──────┘
       │
       │ 2. Compilation
       │    - Removes type annotations
       │    - Transforms to JavaScript
       │
       ▼
┌─────────────┐
│ JavaScript  │
│   (.js)     │
└─────────────┘

Before and after compilation

As you progress through the code examples in this course, you can see both the TypeScript source code, along with the compiled JavaScript version. Once you click the Compile & Run button, the compiled JavaScript tabs becomes active:

// pizza.ts
interface Pizza {
  name: string;
  price: number;
}

function createPizza(name: string, price: number): Pizza {
  return { name, price };
}

const pizza = createPizza("Margherita", 10.99);

// pizza.ts
interface Pizza {
  name: string;
  price: number;
}

function createPizza(name: string, price: number): Pizza {
  return { name, price };
}

const pizza = createPizza("Margherita", 10.99);

Notice that:

• The interface is removed (it's only for type checking)
• Type annotations (: string, : number, : Pizza) are removed
• The code structure remains the same
• The resulting JavaScript runs in any environment including the browser

Compilation targets

You can configure TypeScript to compile to different JavaScript versions:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2015"  // Compiles to ES2015 JavaScript
  }
}

Meaning you can:

• Write modern TypeScript/JavaScript code
• Compile to older JavaScript for browser compatibility
• Use the latest features while also supporting older environments

TypeScript's type system

TypeScript's type system is optional and gradual. You don't have to add types everywhere immediately:

// no types, regular js
const pizza = { name: "Margherita", price: 10.99 };

// some types
function calculateTotal(price: number, quantity) {
  return price * quantity;  // quantity type is inferred as not set above
}

// full types
function createOrder(pizza: Pizza, quantity: number): Order {
  // ...
}

You can adopt TypeScript gradually:

1. Start with JavaScript files (.js)
2. Rename to .ts (still works!)
3. Add types incrementally

Summary

TypeScript is:

• A superset of JavaScript - All JavaScript is valid TypeScript
• Statically typed - Types checked at compile time, not runtime
• Compiled to JavaScript - Runs anywhere JavaScript runs
• Developed by Microsoft - Open source and actively maintained
• Gradually adoptable - Add types incrementally
• Modern and evolving - Supports latest JavaScript features

In the next lesson, we'll learn how to set up TypeScript in your development environment and write your first TypeScript code.