Grunder Typescript

Agenda

Primitiva typer + typen any
Objekt med Type eller Interface
Arrayer
Funktioner
Unions

Inbyggda typer

Genom att köra typeof får vi fram de olika datatyperna i Javascript. Primitiverna av dessa är de enkla typerna i Typescript.

string // "", "hej", "123"
number // 0, 2.1, -4 ...
boolean // true eller false
object
undefined
null
bigInt
Symbol

Ange typer med Typescript

Det enklaste sättet att ange en typ i TypeScript är med ett kolon (:) efter variabelnamnet


let name: string = "Anna";
let age: number = 25;
let isStudent: boolean = true;
let lista: number[] = [1, 2, 3];    // Lista med nummer
let anything: any = "vad som helst"; // Vilken typ som helst (undvik!)

Ange typer med Typescript

För funktioner


// Ange typ för parametrar och returvärde
function add(a: number, b: number): number {
  return a + b;
}

function greet(name: string): void {  // void = returnerar inget
  console.log("Hej " + name);
}

Typescript härleder types (infers)


let name = "Anna";  // TypeScript vet att detta är en string
let age = 25;       // TypeScript vet att detta är en number

// Men för funktionsparametrar MÅSTE du ange typen:
function greet(name: string) {  // Måste skriva ': string'
  console.log("Hej " + name);
}

any - "som normal JS fungerar"

Kan användas när man konverterar JS till TS, men undvikas till slutproduktion

En TS variabel "föds" när den får en type, tills dess är den av typ any

I motsats finns never och unknown (vi kommer till det längre fram i kursen)

Objekt

  
  const car: {
      make: string
      model: string
      year: number
    }

  car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: {
      make: string
      model: string
      year: number
    }) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Jobbigt att skriva varje gång

Array

Att typa arrayer kan göras med [] eller Array<typ>. Den senare varianten kallas generics och vi återkommer om det (Reactkursen)

  
  const names: string[] = ["Olle", "Kalle", "Nisse"]
  names.push("Harlald")

  const fruits: Array<string> = ["apple", "banana", "orange"]
  fruits.push("pear")

Objekt

Med hjälp av Typescript kan vi specifiera hur vi vill att exempelvis ett objekt ska se ut genom att använda oss av type eller interface (vi går in på skillnader senare i kursen)

Man kan specifiera vilka properties som accepteras, ex nummer eller string, etc

Objekt med Type aliases


  type Car =  {
      make: string
      model: string
      year: number
      color?: string
    }

  const car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: Car) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Objekt med Interface

 
  interface Car  {
      make: string
      model: string
      year: number
      color?: string
    }

  const car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: Car) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Union types

Klassisk setteori: OR eller AND. Antingen en frukt eller något surt.

Union types

Union types kan beskrivas i Typescript med | (pipe-operator). Den associerade typen kan vara av en eller flera andra typer.

  
  
  function flipCoin(): "heads" | "tails" {
    if (Math.random() > 0.5) return "heads"
    return "tails"
  }

  const outcome = flipCoin()

// Funktionen tar inte antingen en sträng ELLER ett nummer
function displayMessage(message: string | number): void {
  if (typeof message === "string") {
    console.log(`Message: ${message}`);
  } else {
    console.log(`Message as a number: ${message}`);
  }
}

displayMessage("Hello, TypeScript!"); 
displayMessage(133);

# PRESENTING CODE

Union types

Intersections types (inte lika vanlig som union)

Klassisk setteori: OR eller AND

Intersection types kan beskrivas i Typescript med & (ampersand-operator)

En type som kombinerar en eller flera typer

// Definerar en User type
type User = {
  id: number;
  username: string;
};

// Definierar en Role type
type Role = {
  role: string;
  permissions: string[];
};

// Skapar en typ som kombinerar både User och Role (intersection)
type UserProfile = User & Role;

// Skapar en användarprofil objekt av type UserProfile
const userProfile: UserProfile = {
  id: 1,
  username: "john doe",
  role: "admin",
  permissions: ["read", "write", "delete"],
};

// Få tag i properties av objektet userProfile
console.log(`User ID: ${userProfile.id}`);
console.log(`Username: ${userProfile.username}`);
console.log(`Role: ${userProfile.role}`);
console.log(`Permissions: ${userProfile.permissions.join(", ")}`);

Intersections types exempel



  type Shape = Shape2D & Shape3D;


  let shape: Shape= {
      shape: 'Square',
      color: 'Red',
      noEdges: 4,
      volume: 0   
  };

DEMO

Bra att veta

Typescript är endast språket när ni skriver vår kod. Det som körs i webbläsaren eller servern är alltid den kompilerade js-koden
När applikationen körs så kommer den inte bry sig om huruvida variablerna som en funktion tar emot är av rätt typer. Exempelvis vi hämtar från ett API, om utvecklaren har ändrat på API:et, exempelvis att en property är string istället för number