TypeScript Fundamentals: Why JavaScript Developers Need Types

Introduction

JavaScript is one of the most successful programming languages ever created. It powers websites, backend servers, desktop applications, mobile applications, and even cloud infrastructure.

However, JavaScript was originally designed as a scripting language for browsers. As applications became larger and more complex, developers began encountering problems that JavaScript could not detect before the code was executed.

To solve these problems, Microsoft created TypeScript.

TypeScript Is a Superset of JavaScript

TypeScript builds on top of JavaScript.

Every valid JavaScript program is also valid TypeScript.

const username = "John";
console.log(username);

TypeScript does not replace JavaScript. Instead, it extends JavaScript by adding a static type system and better tooling.

Some Strange JavaScript Behaviors

console.log(null * 21); // 0
console.log(undefined * 220); // NaN

const shape = {
  a: 10,
  b: 20
};

shape.c = 10;

These behaviors are legal JavaScript, but they can become problematic in large applications.

TypeScript Adds Types

let username: string = "John";
let age: number = 25;
let isAdmin: boolean = false;

A type describes what kind of value a variable can store.

Static Type Checking

TypeScript performs static type checking before code executes. This allows many errors to be detected during development rather than at runtime.

Browsers Cannot Execute TypeScript

Browsers understand JavaScript, not TypeScript. TypeScript must be transpiled into JavaScript before execution.

Installing TypeScript

npm install typescript -g

This provides the TypeScript compiler:

tsc

Compiling TypeScript

tsc app.ts

The compiler generates an app.js file.

TypeScript Playground

The TypeScript Playground provides an online environment where you can experiment with TypeScript and inspect the generated JavaScript.

Summary