TypeScript: Objecten

We kunnen verschillende waarden groeperen door gebruik van objecten. Objecten bestaan uit properties waarbij elke property een waarde kan bevatten van een bepaald/ander type:

let student = {
  name: "George",
  age: 13,
  siblings: ["Jane","Geoff"],
  alive: true
}

Dit object bevat 4 properties: name (een string), age (een number), siblings (een array van strings) en alive (een boolean).

In TypeScript moeten we elke variabel voorzien van een type .Omdat we geen type hebben voor dit specifiek object, moeten we zelf een type voorzien. Hiervoor gebruiken we een interface. Voor objecten definieren we de interface als volgt:

interface Student {
  name: string;
  age: number;
  siblings: string[];
  alive: boolean
}

Een interface voor een object start met het keyword interface en dan een naam. Daarna plaatsen we tussen { } de verschillende properties en hun types.

Nu kunnen we bovenstaand object een type geven:

let student: Student = {
  name: "George",
  age: 13,
  siblings: ["Jane","Geoff"],
  alive: true
}

• Een object van het type Student moet alle properties bevatten die gedefinieerd staan in het interface!

• Een object van het type Student mag geen andere properties bevatten!

De volgorde van de properties is onbelangrijk. Bv. dit student object is ook geldig:

let student2: Student = {
  alive: true,
  age: 14,
  name: "Jane",
  siblings: ["George","Geoff"],
}

Properties aanspreken

We kunnen elke property individueel aanspreken:

let student: Student = {
  name: "George",
  age: 13,
  siblings: ["Jane","Geoff"],
  alive: true
} 
console.log(student.name); // print George
student.age = 15; // verandert de age naar 15
student.siblings.push("Joan"); // voegt een nieuwe sibling "Joan" toe aan de array

Elke property kan je dus gebruiken zoals je een variabel aanspreekt/gebruikt.

Omdat een property gewoon data bevat (een string, een number,...), kan een property ook een functie bevatten:

let student = {
  name: "George",
  age: 13,
  siblings: ["Jane","Geoff"],
  alive: true,
  showIntroduction: () => {
    console.log("Hello my name is George");
    }
}
student.showIntroduction();

De property showIntroduction bevat een functie. Je kan die dus uitvoeren zoals elke andere functie.

Let op: de interface komt niet meer overeen met dit object. Je zal de interface moeten aanpassen om de property function te bevatten. Hiervoor heb je een interface nodig die de functie beschrijft. Dit wordt uitgelegd in TypeScript: Functions

Optionele properties

Normaal zijn alle properties verplicht aanwezig:

interface Student {
  name: string,
  age: number
}

let student1: Student = {name: "George", age:3}; // OK
let student2: Student = { age:4, name: "Geoff"}; // OK
let student3: Student = { age:5, name: "Jane", location: "Antwerp"}; // ERROR
let student4: Student = {age: 6, location: "Bruges"}; // ERROR

Je kan properties optioneel maken door een ? achter de naam van de property te plaatsen:

interface Student {
  name?: string,
  age?: number
}

let student1: Student = {name: "George", age:3}; // OK
let student2: Student = { }; // OK
let student3: Student = { age:5, location: "Antwerp"}; // OK
if(student2.age){
  console.log("hier geraken we niet); // student 2 bevat geen age
}
console.log(student.ag); // ERROR, ag bestaat niet

Readonly properties

Net zoals const een variabel onveranderbaar maakt, kan je zorgen dat een property niet aangepast mag worden. Hiervoor gebruik je het keyword readonly

interface Student {
  readonly name: string,
  readonly age: number
}
let student1: Student = {name: "George", age:3};
student1.age = 4; // ERROR

Je kan dus enkel waarden meegeven bij intialisatie van het object!

Objecten en functies

Objecten kunnen net zoals elk ander type meegegeven worden als parameters of teruggegeven worden als return waarde.

halloStudent vraagt een parameter van het type Student. Omdat de parameter dat type bevat, kan je ook de properties aanspreken in de functie:

interface Student {
  name: string
}

const halloStudent = (student:Student) => {
  console.log("hallo " + student.name); 
}

let student1: Student = {name: "George"};
halloStudent(student1);

giveMeGeorge maakt zelf een nieuw object aan dat ie teruggeeft als return waarde:

interface Student {
  name: string,
  age: number
}

const giveMeGeorge = ():Student => {
  return {name:"George", age:3};
}

let student1: Student = giveMeGeorge();
console.log(student.name);
console.log(student.age);

De return waarde bevat dus een geldig Student object.

JSON

Wanneer we data via APIs doorsturen of in bestanden opslaan, dan gebruiken we meestal JSON. JSON lijkt er op een JavaScript object, maar de schrijfwijze is een beetje anders.

Dit is een JavaScript object. Die steek je meestal in bv. een variabel:

let student = {
  name: "George",
  age: 13,
  siblings: ["Jane","Geoff"],
  alive: true,
  showIntroduction: () => {
    console.log("Hello my name is George");
    }
}

JSON steek je meestal in een .json bestand. Bv:

{
  "name": "George",
  "age": 13,
  "siblings": ["Jane","Geoff"],
  "alive": true
}

Merk op:

• in het JSON bestand kan je geen variabelen gebruiken. Je schrijft dus niet let student = ...

• properties hebben quotes nodig rond hun namen. Het is dus "name" en niet name

• je kan geen functies plaatsen in een JSON bestand. showIntroduction kan dus niet bestaan in het bestand