TypeScript¶

npm install -g typescript

function greet(name: string) {
  return `Hello, ${name}!`;
}

const user = "World";
console.log(greet(user));

tsc greeter.ts

function greet(name) {
    return "Hello, " + name + "!";
}
var user = "World";
console.log(greet(user));

tsc --init

{
  "compilerOptions": {
    /* Target JavaScript Version */
    "target": "ES2020", // Compile to modern JavaScript

    /* Module System */
    "module": "commonjs", // For Node.js, or "ESNext" for browsers

    /* Strictness */
    "strict": true, // This is the most important setting! It enables all strict type checking options.

    /* Output */
    "outDir": "./dist", // Where to put the compiled .js files
    "rootDir": "./src", // Where to find the source .ts files

    "esModuleInterop": true, // Allows better compatibility with CommonJS modules
    "forceConsistentCasingInFileNames": true // Prevents case related errors
  }
}

let framework: string = "TypeScript";
let version: number = 4.9;
let isAwesome: boolean = true;

// Type Inference
let inferredString = "I am a string"; // TypeScript knows this is a string
// inferredString = 123; // Error: Type 'number' is not assignable to type 'string'.

// An array of numbers
let numbers: number[] = [1, 2, 3];
let moreNumbers: Array<number> = [4, 5, 6];

// A tuple: an array with a specific sequence of types
let user: [number, string];
user = [1, "Alice"];
// user = ["Bob", 2]; // Error!

let notSure: unknown = 4;

// console.log(notSure.toFixed(2)); // Error: Object is of type 'unknown'.

if (typeof notSure === "number") {
  // This is fine, we've checked the type.
  console.log(notSure.toFixed(2)); // "4.00"
}

function logMessage(message: string): void {
  console.log(message);
}

interface User {
  id: number;
  username: string;
  isActive: boolean;
  readonly registrationDate: Date; // Property cannot be changed after creation
  bio?: string; // The `?` makes this property optional
}

const user1: User = {
  id: 1,
  username: "alice",
  isActive: true,
  registrationDate: new Date(),
};

// user1.registrationDate = new Date(); // Error: Cannot assign to 'registrationDate' because it is a read only property.

type UserID = number | string;

function getUser(id: UserID) {
  // ...
}

getUser(123);       // OK
getUser("abc-123"); // OK

function printId(id: number | string) {
  if (typeof id === "string") {
    // Here, TypeScript knows `id` is a string
    console.log(id.toUpperCase());
  } else {
    // Here, TypeScript knows `id` is a number
    console.log(id);
  }
}

interface Loggable {
  log(): void;
}

interface Serializable {
  serialize(): string;
}

// The variable `myObject` must have both a `log` and a `serialize` method.
type LoggableAndSerializable = Loggable & Serializable;

// This function takes two numbers and is explicitly typed to return a number.
function add(a: number, b: number): number {
  return a + b;
}

// TypeScript can also infer the return type, but being explicit is often clearer.
function subtract(a: number, b: number) { // Return type is inferred as `number`
  return a b;
}

function greet(name: string, greeting?: string) {
  if (greeting) {
    return `${greeting}, ${name}!`;
  } else {
    return `Hello, ${name}!`;
  }
}

function power(base: number, exponent: number = 2): number {
  return Math.pow(base, exponent);
}

console.log(power(3)); // 9 (exponent defaults to 2)
console.log(power(3, 3)); // 27

// Without generics, you might have to use `any`, which is not type safe.
function identity_any(arg: any): any {
  return arg;
}

// With generics, we create a type variable `T`.
// This function takes an argument of type `T` and returns a value of type `T`.
function identity<T>(arg: T): T {
  return arg;
}

// TypeScript can infer the type of T
let output1 = identity("myString"); // output1 is of type `string`

// Or you can set it explicitly
let output2 = identity<number>(123); // output2 is of type `number`

enum LogLevel {
  INFO,
  WARN,
  ERROR,
  DEBUG
}

function log(level: LogLevel, message: string) {
  // ...
}

log(LogLevel.INFO, "User logged in.");

class Player {
  // Fields with types
  username: string;
  health: number;

  // Constructor
  constructor(username: string) {
    this.username = username;
    this.health = 100;
  }

  // Method
  takeDamage(amount: number): void {
    this.health -= amount;
    console.log(`${this.username} took ${amount} damage. Health is now ${this.health}.`);
  }
}

const player1 = new Player("Gopher");
player1.takeDamage(10);

class User {
  public readonly id: number;
  private secret: string;

  constructor(id: number) {
    this.id = id;
    this.secret = "my secret";
  }
}

interface IAttack {
  attack(target: Character): void;
}

class Character {
  constructor(public name: string, public health: number) {}
}

class Hero extends Character implements IAttack {
  constructor(name: string) {
    super(name, 100); // Call the parent constructor
  }

  attack(target: Character): void {
    console.log(`${this.name} strikes ${target.name}!`);
  }
}

function processData(data: any) {
  // The compiler has no idea what `data` is. It will allow anything.
  console.log(data.name.toUpperCase()); // This will crash if `data.name` doesn't exist!
}

interface User { name: string; }

// Imagine this function is in an Express.js API handler
function createUser(req: Request, res: Response) {
  // You might THINK `req.body` is a `User` because you typed it.
  const user: User = req.body;

  // But an attacker can send `req.body` as ` { "name": 123 } ` or ` { } `.
  // At runtime, `user.name` could be a number or undefined.
  // The `toUpperCase()` call will crash your server!
  console.log(user.name.toUpperCase()); 
}

import { z } from "zod";

// 1. Define a schema that represents the shape and types you expect.
const UserSchema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email(),
  age: z.number().positive().optional(),
});

// 2. Infer the TypeScript type directly from the schema.
// Now your runtime schema and compile time type are always in sync!
type User = z.infer<typeof UserSchema>;

// 3. Parse untrusted data.
const untrustedData = { username: "test", email: "not an email" };

try {
  const validatedUser = UserSchema.parse(untrustedData);
  // If `parse` succeeds, you have a fully typed and validated object.
  console.log("Validation successful:", validatedUser);
} catch (error) {
  // If validation fails, Zod throws a detailed error.
  console.error("Validation failed:", error);
}

interface Address {
  street: string;
  city: string;
  zipCode: string;
  country: string;
}

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  VIEWER = "VIEWER",
}

interface UserProfile {
  readonly id: string;
  username: string;
  email: string;
  address: Address;
  roles: UserRole[];
  lastLogin?: Date;
}

const user: UserProfile = {
  id: "uuid-12345",
  username: "0x1RIS",
  email: "0x1ris@example.com",
  address: {
    street: "123 Hacker Way",
    city: "Cyber City",
    zipCode: "1337",
    country: "NET",
  },
  roles: [UserRole.ADMIN, UserRole.EDITOR],
};

import { z, ZodType } from "zod";

// Use a runtime validator like Zod to ensure the API response is what you expect.
async function fetchAndValidate<T>(url: string, schema: ZodType<T>): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const data = await response.json();

  // Parse the data against the schema. This is the runtime validation step!
  return schema.parse(data);
}

// Example usage:
const PostSchema = z.object({
  userId: z.number(),
  id: z.number(),
  title: z.string(),
  body: z.string(),
});

async function getPost() {
  try {
    const post = await fetchAndValidate("https://jsonplaceholder.typicode.com/posts/1", PostSchema);
    // `post` is now fully typed and validated!
    console.log("Post Title:", post.title);
  } catch (error) {
    console.error(error);
  }
}

getPost();

abstract class Vehicle {
  constructor(protected readonly vin: string) {}

  drive(): void {
    console.log("The vehicle is moving.");
  }

  abstract honk(): void; // Must be implemented by subclasses
}

class Car extends Vehicle {
  private isEngineOn: boolean = false;

  constructor(vin: string, public color: string) {
    super(vin);
  }

  startEngine() {
    this.isEngineOn = true;
    console.log("Engine started.");
  }

  honk(): void {
    console.log("Beep beep!");
  }
}

const myCar = new Car("VIN12345", "blue");
myCar.startEngine();
myCar.drive();
myCar.honk();
// console.log(myCar.vin); // Error: 'vin' is protected and only accessible within class 'Vehicle' and its subclasses.