Mörkt tema
Objekt, type och interface
💡 Introduktion till ämnet (flipped classroom)
⏰ Tidsåtgång: c.a. 5 min
- 📖 Learning TypeScript av Josh Goldberg: Objects
❓ Våga Fråga
🔈 Transkription
🔈 Video 5 - Objekt, Type och Interface
För att tvinga oss att skriva kod på ett visst format så kan vi ta till hjälpmedel från TypeScript. Detta är särskilt bra när vi vill säkerställa att vår data verkligen innehåller allt som vi förväntar oss att den ska innehålla.
ts
type HighscoreItem = {
name: string;
score: number;
}
const player1: HighscoreItem = {
name: 'John Doe',
score: 100,
};
const player2: HighscoreItem = {
name: 'Jane Doe', // Error: saknar "score"
socre: 120, // Error: "socre" är inte definierat på typen HighscoreItem
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Vill vi att en egenskap ska vara frivillig, kan vi använda oss av ?.
ts
type HighscoreItem = {
name: string;
score: number;
nickname?: string;
}
const player1: HighscoreItem = {
name: 'John Doe',
score: 100,
// OK att utelämna nickname
};1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Vi kan också använda oss av "unions":
ts
type Book = {
author: string | undefined;
pages: number;
genre: 'Crime' | 'Fiction' | 'Poetry';
}1
2
3
4
5
2
3
4
5
Notera att typer alltid skrivs med stor bokstav i början. Det är en konvention.
Vi kan också kombinera två typer till en s.k. "intersection":
ts
type Artwork = {
name: string;
genre: string;
};
type Painting = {
material: 'Canvas' | 'Paper' | 'Napkin';
}
type GalleryPiece = Artwork & Painting;
/*
Blir till:
GalleryPiece = {
name: string;
genre: string;
material: 'Canvas' | 'Paper' | 'Napkin';
}
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18