TypeScript 101: Putting ‘seatbelts’ on JavaScript

TypeScript is JavaScript with static types: it catches type errors in your editor or at build time, before the code ever runs. For anything beyond a short hackathon or a very light script, adopting it is worth the small upfront cost of writing types.

Why does JavaScript's flexibility cause bugs?

JavaScript is the most widely used language in the world, and it is flexible and easy to write. But as a project grows larger and more complex, that 'flexibility' often becomes a serious liability.

function addNumbers(a, b) {
  return a + b;
}

// Developer's intent: add the numbers 1 and 2 and expect 3
console.log(addNumbers(1, 2)); // 3

// When a string is entered by mistake
console.log(addNumbers("1", "2")); // "12"

In the code above, JavaScript does not raise an error. It simply concatenates the strings "1" and "2" and returns the odd result "12". The mistake is discovered only at runtime, and if you are unlucky, it shows up as an error on the user's screen after the service is deployed.

TypeScript is a language developed by Microsoft to overcome these limitations of dynamically typed languages and catch bugs 'before executing' the code.

What is TypeScript?

TypeScript, as its name suggests, is "JavaScript with types added." Officially, it is a Superset of JavaScript: it supports 100% of existing JavaScript syntax and adds Static Type Checking on top of it.

Browsers and Node.js cannot read TypeScript code directly, so TypeScript is translated into plain JavaScript by a compiler (TSC) before it runs.

What are the benefits of using TypeScript?

1. Error detection before execution (stability): Type mismatches are flagged with a red line as you type in an editor (VS Code, etc.) or during the build. This greatly reduces the risk of "Runtime Errors".
2. Powerful auto-completion (development productivity): IntelliSense (auto-completion) works very well because the editor knows exactly what properties an object has, what argument types a function accepts, and what it returns.
3. Code that documents itself (collaboration): When using a complex function someone else wrote, you can understand how to use it from its declared types without reading all of its internal logic.

What does core TypeScript syntax look like?

1. Specify basic type

Specify a type by adding a colon (:) after a variable name or argument.

// Primitive Types
let userName: string = "Jules";
let age: number = 30;
let isDeveloper: boolean = true;

// Array
let skills: string[] = ["React", "TypeScript", "Node.js"];

// Let's buckle up the risky function from the example above.
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Now the editor draws a red line and blocks execution!
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.
addNumbers("1", "2");

2. Definition of object type (Interface & Type Alias)

One of the most confusing parts of JavaScript development is figuring out what data an object contains. In TS, you can design an object's shape in advance with the interface or type keyword.

// Define the type of object called User.
interface User {
  id: number;
  name: string;
  email: string;
  optionalProfileImage?: string; // If you add ?, it becomes an optional attribute that 'may or may not be present'.
}

// Give the variable the type created above.
const myProfile: User = {
  id: 1,
  name: "Jules",
  email: "[email protected]"
  // There is no error even if optionalProfileImage is omitted.
};

// The moment you type myProfile. , the id, name, and email properties are auto-completed!

3. Union Types

Union types allow some of JavaScript's flexibility by declaring that a value "can be of type A or B".

// id can be a number or a unique string.
function printId(id: number | string) {
  console.log(`Your ID is: ${id}`);
}

printId(101); // OK
printId("UUID-1234"); // OK
printId(true); // Error: boolean not allowed

Should you adopt TypeScript?

In conclusion, "unless it is a short-term hackathon or a very light script, it is definitely beneficial to introduce it."

At first, specifying a type for each variable can slow down coding and feel cumbersome. But as a project grows, the bugs TypeScript catches in advance and its powerful auto-completion repay that initial cost several times over. As of 2024, TypeScript is no longer optional but a 'basic skill' in the front-end and back-end (Node.js) ecosystem.