Klasser (objektorienterad programmering) 🤿

OBS!

Detta kan du betrakta som fördjupning. Kolla igenom om du är intresserad, men det är inget som krävs för utbildningen nu. Bra att känna till någonstans i bakhuvudet.

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 34 min

Klasser (27 min) 🤿

Interface (7 min) 🤿

Repo med exempelkod

📖 Läsanvisningar

JavaScript - The Definitive Guide: Kapitel 9
JavaScript - The Definitive Guide: Kapitel 10
📖 Learning TypeScript av Josh Goldberg: Classes

🏋️ Övningsuppgift

Nedan följer en övning i såväl att skapa klasser som att "läsa terminologi".

Skapa en generisk klass "Animal" och lägg till två egenskaper på klassen (t.ex. namn och ålder).
Lägg till en konstruktor som sparar de två egenskaperna i lokala variabler.
Skapa en klass "Cat" som ärver från "Animal". Skapa en instans av klassen, t.ex. nyan.
Utöka nu "Animal" med en metod som heter makeSound(). Som default ska djuret inte göra något ljud. (Använd console.log för att göra ljud.)
Skapa en klass "Fox" som ärver från "Animal".
"Override:a" metoden i klassen "Cat", så att den låter som en katt.
Gör samma sak för "Fox".

Exempellösning

class Animal {
  name: string;
  age: number;

  constructor(_name: string, _age: number) {
    this.name = _name;
    this.age = _age;
  }

  makeSound() {
    console.log('');
  }
}

class Cat extends Animal {
  makeSound(): void {
    console.log('🐱 Meow!');
  }
}

class Fox extends Animal {
  makeSound(): void {
    console.log('🦊 What does the fox say?');
  }
}

const nyan = new Cat('Nyan', 10);
nyan.makeSound();

const ylvis = new Fox('Ylvis', 5);
ylvis.makeSound();

Generera en JavaScript-fil av din TypeScript-fil med hjälp av npx tsc mapp/filnamnet.ts.

Kika lite på vad resultatet i filen blir. Du behöver inte sätta dig in i koden, men notera bara vad TypeScript ser ut som i vanlig JavaScript.

Om du vill lära dig mer om koddokumentation så föreslår jag att du kikar på JSDoc, och hur det är brukligt att dokumentera sin kod.

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

Objekt-orienterad programmering (OOP)
Inheritance (arv)
Interface

Du är klar när…

Du förstår (ungefär) vad en klass är

❓ Våga Fråga

📚 Resurser

JSDoc

🔈 Introduktion till klasser

Med interface i TypeScript berörde vi redan en del av nästa koncept: klasser. Inom programmering finns det flera olika sätt att programmera på, och programmeringsspråk delas in i olika "kategorier". Man pratar ofta om t.ex. funktionella och objekt-orienterade programmeringsspråk. Vissa språk kan bara programmeras objekt-orienterat (som t.ex. Java och C#), medan andra språk går att programmera med båda sätten (t.ex. PHP och JavaScript) och andra språk är enbart funktionella.

Ofta i programmering har vi en sak (ett objekt, ej att förväxla med {}) som har gemensamma egenskaper, som vi behöver duplicera/skapa kopior av. Dessa kopior ska följa en viss mall.

Tänk dig exempelvis en (fransk-engelsk) spelkortlek som består av ett antal kort. 🃏 Varje kort har en färg/svit och en valör (från 1 till 13). För detta skulle vi kunna deklarera en klass:

// Obegriplig copy-paste TypeScript-kod som låter oss definiera att siffror kan endast vara mellan 1 och 13
// https://stackoverflow.com/a/39495173/9306514
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
  ? Acc[number]
  : Enumerate<N, [...Acc, Acc['length']]>;

type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

// INTRESSANT HÄRIFRÅN 👇
class SingleCard {
  suit: 'clubs' | 'diamonds' | 'hearts' | 'spades';
  rank: IntRange<1, 13>;
}

const aceOfSpades = new SingleCard();
const ace2 = new SingleCard();

Men, nu berättar vi inte vad kortet ska vara när kortet skapas. För det behöver vi använda en konstruktor-metod (constructor). Det är en "magisk" funktion som körs automatiskt när vi skapar en ny instans av en klass, dvs. när vi skriver new.

type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
  ? Acc[number]
  : Enumerate<N, [...Acc, Acc['length']]>;

type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

// INTRESSANT HÄRIFRÅN 👇
class SingleCard {
  suit: 'clubs' | 'diamonds' | 'hearts' | 'spades';
  rank: IntRange<1, 13>;

  constructor(suit: 'clubs' | 'diamonds' | 'hearts' | 'spades', rank: IntRange<1, 13>) {
    this.suit = suit;
    this.rank = rank;  
  }
}

const aceOfSpades = new SingleCard('spades', 1);
const ace2 = new SingleCard('spades', 2);

this är ett nyckelord som åsyftar till själva "instansen av klassen". This är lite som att "peka på sig själv".

Nu har vi dock en del kodupprepning i koden (t.ex. sviten och rankingen). Låt oss generalisera koden genom att refaktorera den:

type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
  ? Acc[number]
  : Enumerate<N, [...Acc, Acc['length']]>;

type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
type Suits = 'clubs' | 'diamonds' | 'hearts' | 'spades';
type CardRange = IntRange<1, 13>;

class SingleCard {
  suit: Suits;
  rank: CardRange;

  constructor(suit: Suits, rank: CardRange) {
    this.suit = suit;
    this.rank = rank;  
  }
}

const aceOfSpades = new SingleCard('spades', 1);
const ace2 = new SingleCard('spades', 2);

Nu kan vi skapa hela sviten automatiserat:

const spades: SingleCard[] = [];

for (let i = 0; i < 13; i++) {
  const card = new SingleCard('spades', (i + 1) as CardRange);
  spades.push(card);
}

I objekt-orienterad programmering (OOP) finns det också ett koncept som heter "inheritance", eller "arv" på svenska. Det innebär att vi kan ärva egenskaper från en klass, och på så vis utöka den. Vi börjar med att förenkla vår kortlek, så att vi skapar en till klass som har exakt samma egenskaper som "SingleCard", men vi behöver inte skicka med vilken typ av kort det är, för det tar vår nya klass SpadesCard hand om automatiskt:

class SpadesCard extends SingleCard {
  constructor(rank: CardRange) {
    super('spades', rank);
  }
}

const spades: SingleCard[] = [];

for (let i = 0; i < 13; i++) {
  const card = new SpadesCard((i + 1) as CardRange);
  spades.push(card);
}

Här gör vi ett anrop till super() inne i konstruktorn, vilket alltså kallar på "föräldra-klassens" konstruktor, och utför det som ska göras där.

Om vi nu skulle lägga till en metod i vår huvudklass SingleCard, så kan vi anropa den även i SpadesCard utan att ha deklarerat den:

type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
  ? Acc[number]
  : Enumerate<N, [...Acc, Acc['length']]>;

type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

type Suits = 'clubs' | 'diamonds' | 'hearts' | 'spades';
type CardRange = IntRange<1, 13>;

class SingleCard {
  suit: Suits;
  rank: CardRange;
  used: boolean = false;

  constructor(suit: Suits, rank: CardRange) {
    this.suit = suit;
    this.rank = rank;  
  }

  discard() {
    console.log(`${this.suit} ${this.rank} has been discarded`);
    this.used = true;
  }
}

class SpadesCard extends SingleCard {
  constructor(rank: CardRange) {
    super('spades', rank);
  }
}

const spades: SingleCard[] = [];

for (let i = 0; i < 13; i++) {
  const card = new SpadesCard((i + 1) as CardRange);
  spades.push(card);
}

spades[0].discard(); // spades 1 has been discarded

Vi har alltså även ärvt metoden.

🔈 Klasser och interface

Ibland behöver vi generalisera någonting och använda det på flera klasser, men vi vill inte ärva alla egenskaperna utan ha olika egenskaper på klasserna - men dela vissa gemensamma egenskaper.

Då kan vi använda interface och "implementera" detta på olika klasser. Vi kikar på det genom kod (kopierat från boken):

interface Learner {
  name: string;
  study(hours: number): void;
}

class Student implements Learner {
  name: string;

  constructor(name: string) {
      this.name = name;
  }

  study(hours: number) {
      for (let i = 0; i < hours; i+= 1) {
          console.log("...studying...");
      }
  }
}

class Slacker implements Learner {
 // ~~~~~~~
 // Error: Class 'Slacker' incorrectly implements interface 'Learner'.
 //  Property 'study' is missing in type 'Slacker'
 //  but required in type 'Learner'.
  name = "Rocky";
}

Klasser (objektorienterad programmering) 🤿 ​

💡 Introduktion till ämnet (flipped classroom) ​

Klasser (27 min) 🤿 ​

Interface (7 min) 🤿 ​

📖 Läsanvisningar ​

🏋️ Övningsuppgift ​

✅ Avstämning ​

❓ Våga Fråga ​

📚 Resurser ​