Ga naar inhoud

Typescript

Introductie

Voordat we bezig gaan met het schrijven van de applicatie is het belangrijk om enkele concepten van Typescript te doorgronden. Deze onderwerpen staan in dezelfd video serie als die we voor OOP hebben gebruikt. De opzet voor de zelfstudie is hetzelfde als OOP. Je mag dit alleen doen, maar leren in paren of groepjes kan ook. Voordeel van samen leren is dat je kan overleggen en aan elkaar kunt uitleggen. De volgende onderwerpen zullen aanbod komen:

  • Generics
  • Decorators
  • Modules & Namespaces

Deze topics zullen veel gebruikt worden bij de twee frameworks waarmee we de applicatie voor deze module gaan maken. Bekijk de filmpjes goed, maak aantekeningen, programmeer mee en maak de oefenen en beantwoord de vragen.

Hoofdstuk 7

Dit hoofdstuk gaat over Generics. Door Generics toe te passen maken we onze code veel beter herbruikbaar. Daarom worden Generics veel gebruikt bij frameworks en is het belangrijk dat we goed snappen hoe Generics werken en toegepast worden.

Bekijk de volgende video's:

Je hebt de volgende code:

interface Animal {
  name : string;
}

interface Machine {
  typeOfMachine : string;
}

type Entity = Animal | Machine;

function greet<T extends Animal>(arg: T): void {
  console.log("Hello " + arg.name);
}

function hello<T extends Machine>(arg: T): void {
  console.log("Bliep bliep " + arg.typeOfMachine);
}

const a:Entity = {name : 'Miep'};
const b:Entity = {typeOfMachine : 'AASDF-33432-BFB'};

greet(a);
hello(b);

V1: Leg uit welk typen de parameters zijn van beide functies en waarom?

A1:

Bekijk de volgende video:

De volgende code is gegeven:

function createNewObject<T>(element: T[]): [T, string] {
  return [element, "This is text."];
}

V2: Waarom werkt deze code niet en vertel hoe de code wel werkt met een aanpassing aan de functie signature en niet de body van de functie.

A2:

V3: Kan je uitleggen waarom expliciet wordt aangegeven welk type T is per functie in de code hierboven?

A3:

V4: Schrijf een generic functie dat als parameter een array verwacht en de elementen van de array afdrukt.

A4:

Bekijk de volgende video:

Gegeven is de volgende code

class PrintToConsole <T> {
  attr : T;

  constructor(attr : T) {
    this.attr = attr;
  }

  setAttr(attr: T) {
    this.attr = attr;
  }

  print() {
    console.log(this.attr);
  }
}

let a : PrintToConsole<number> = new PrintToConsole(1);
let b : PrintToConsole<string> = new PrintToConsole('2');
let c : PrintToConsole<string | number> = new PrintToConsole(3);

a.print();
b.print();
c.print();

a.setAttr(0);
b.setAttr(0);
c.setAttr('0');

a.print();
b.print();
c.print();

V5: Is de declaratie en initializatie van object c correct? Licht je antwoord toe.

A5:

Bekijk de volgende video's:

Hoofdstuk 8

Dit hoofdstuk gaat over Decorators. Via Decorators kunnen we in run-time de class bewerken of ervoor zorgen dat bepaalde attributes of zelf de class correct zullen functioneren. Bij de frameworks die we gebruiken komt het concept van de Decorator weer terug.

Bekijk de volgende video's:

Gegeven is de volgende code:

function Logger(target: Function) : void {
  console.log('Logging... ' + target);
}

function Test() {
  return function(con: Function) {
    console.log("Test");
  }
}

@Logger
@Test()
class Person {
  name = 'martijn';

  constructor() {
    console.log('Creating person object...');
  }
}

const pers = new Person();

console.log(pers);

V6: In welke volgorde worden de decorators uitgevoerd?

A6:

Bekijk de volgende video:

V7: Schrijf nu een class voor Animal. De class Animal heeft een attribute voor sound. Set de waarde voor sound. Voeg ook een method met de naam makeSound. MakeSound geeft de waarde van sound terug. Maak nu een decorator waarin een object van Animal wordt gemaakt en de functie makeSound wordt aangeroepen in een console log.

A7:

Bekijk de volgende video's:

V8: Schrijf de code voor de volgende beschrijving. Let ook op dat attributen private, public of protected zijn en pas toe alle het andere dat je geleerd hebt in eerder hoofdstukken.

Er zijn twee classes: Monteur en Machine. De monteur heeft een naam die wordt afgedrukt met een speciale functie daarvoor. De machine heeft een serienummer en aan de machine is een monteur gekoppeld. Beide waarden worden in een speciale functie afgedrukt. Een nieuwe machine heeft nog geen monteur, daarom is de waarde van naam onbekend. Zorg nu dat via een decorator de monteur gekoppeld wordt aan de machine.

A8:

Bekijk de rest van de video's

Hoofdstuk 9 en 10

Bekijk alle filmpjes van hoofdstuk 9 om een beeld te krijgen hoe Typescript in de praktijk wordt toegepast bij het maken van een website. Ga daarna verder met hoofdstuk 10. Hoofdstuk 10 gaat over het groeperen van scripts binnen projecten en komt veel terug bij het schrijven applicaties in Typescript.

V9: Wat is het verschil tussen named export en default exports?

A9:

Bekijk de volgende video's: