TypeScript

TypeScript Basics

Presentation : TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript.

Key advantages for this project are:

• Type Safety: Catches errors at compile-time rather than runtime.
• Maintainability: Decoupling between code and interfaces, making refactoring safer.
• Developer Experience: Autocompletion (Intellisense in VSCode)

Setup

npm install typescript ts-node @types/node --save-dev

Note

Specific types should also be installed along other libraries

Configuration in tsconfig.json

Main compiler options are

• module : we choose NodeNext over CommonJS, as it is more modern
• emit options control the output (where the compiled code is written)
• interop options define how TS works with non-TS libraries

Note

It is a good practice to have "strict": true in order to activate a range of checks (such as passing arguments of proper type)

cf Doc, esp. Doc for more details

JS syntax refresher (ES2022+)

merging, spread and destructuring

const user = { name: "PongPlayer", elo: 1200 };
const stats = { wins: 10, ...user }; // Merge objects
const { name, ...rest } = stats;     // Destructure and rest operator

optional chaining and nullish coalescing

const speed = user.game?.settings?.speed ?? 1.0; // Default to 1.0 if null/undefined

Common types

Example

type ID = string | number; // Union type

interface Player {
  id: ID;
  username: string;
}

interface Admin extends Player {
  permissions: string[];
}

Classes

Example

class Match {
  private readonly _id: string;
  #internalState: 'active' | 'finished' = 'active'; // runtime private ES2022

  constructor() {
    ...
  }

  // overriding a parent method
  override toString(): string {
    return `Match ${this._id}: ${this.player1} vs ${this.player2}`;
  }
  
}

Enums

Example

enum Status {
  PENDING = "PENDING",
  ACCEPTED = "ACCEPTED"
}

const currentStatus: Status.PENDING

Decorators

functions that modify classes or methods

Example

Debugging

Tip

Debugging: Enable "sourceMap": true in your config to debug original .ts files directly in Chrome DevTools instead of the compiled JavaScript.

Do's and Don'ts

✅ Do	❌ Don't
Enable strict: true in tsconfig.json for maximum safety.	Use any type (it disables the type checker completely).
Type function return values with generated types (e.g., Promise<UserProfile>).	-
Use Optional Chaining (user?.game?.score).	Use verbose nesting checks (if (user && user.game)).
Call async functions with await.	Forget await on Promises (leads to race conditions).
Use Enums or Union types for fixed values.	Use "Magic Strings" hardcoded throughout the app.

Resources

Type	Resource	Notes
📄	Official TypeScript Docs	Main reference
📄	TS 5.9 Beta Blog	Check for newest features
💻	Total TypeScript	Advanced type manipulation tutorials