TypeScript Essentials

Static Checking

TypeScript enhances JavaScript by adding static type checking. This means that TypeScript checks the types of variables, functions, and objects at compile time, ensuring that the code adheres to the specified types and catches errors before runtime.

// TypeScript
let count: number = 5; // Static type checking
count = 'Hello'; // Error: Type 'string' is not assignable to type 'number'.        

// JavaScript
let count = 5; // No static type checking
count = 'Hello'; // No error, but could lead to runtime issues        

Superset of JavaScript

TypeScript is a superset of JavaScript, which means any valid JavaScript code is also valid TypeScript code. TypeScript extends JavaScript by adding types and other features.

// JavaScript
function add(a, b) {
  return a + b;
}        

// TypeScript (also valid JavaScript)
function add(a: number, b: number): number {
  return a + b;
}        

Development Tool

TypeScript is primarily a development tool. It helps developers catch errors early in the development process. However, browsers don’t run TypeScript directly; it must be transpiled to JavaScript.

Wrapper Around JavaScript

Think of TypeScript as a wrapper that adds additional features to JavaScript, like type annotations, interfaces, and decorators, which are then stripped away when the TypeScript is compiled to JavaScript.

More Code in TypeScript

Since TypeScript requires developers to write type annotations and interfaces, it often results in more code compared to plain JavaScript.

// TypeScript
interface User {
  name: string;
  age: number;
}

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}        

// JavaScript
function greet(user) {
  console.log(`Hello, ${user.name}`);
}        

Type Safety

TypeScript’s type system allows for safer code by ensuring that variables and functions are used as intended.

// TypeScript
function divide(dividend: number, divisor: number): number {
  return dividend / divisor;
}

divide('100', 10); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.        

Transpilation to JavaScript

Before running in the browser, TypeScript code is transpiled into JavaScript, making it compatible with any browser that supports JavaScript.

Explicit and Implicit Types

TypeScript supports both explicit and implicit typing. Explicit types are declared by the developer, while implicit types are inferred by TypeScript.

// TypeScript
let explicitString: string = 'This is a string'; // Explicit type
let implicitString = 'This is also a string'; // Implicit type inferred by TypeScript        

Autocomplete

TypeScript’s type system provides better tooling support, such as autocomplete in IDEs, making it easier to write and navigate code.

// TypeScript
interface User {
  name: string;
  age: number;
}

let user: User = { name: 'Alice', age: 30 };
// When typing 'user.', the IDE will suggest 'name' and 'age' properties.        

By incorporating these features, TypeScript enhances the development experience and helps maintain a robust codebase.