Rozhraní

Tvar objektu jde popsat ještě jinak: rozhraním (anglicky interface).

interface Prisera {
    jmeno: string;
    zivoty: number;
}

Znamená totéž jako type Prisera = { jmeno: string; zivoty: number };. Prisera použijete v anotacích stejně a chybové hlášky jsou stejné. Jen se jinak píše: za interface následuje název a hned za ním složené závorky, bez rovnítka. Každá vlastnost se obvykle píše na samostatný řádek.

Rozhraní se obzvlášť hodí k rozšiřování. Boss je příšera, která má něco navíc: fázi souboje. Pomocí extends (rozšiřuje) dostane rozhraní Boss všechny vlastnosti rozhraní Prisera (jmeno a zivoty) a přidá svoje:

interface Prisera {
    jmeno: string;
    zivoty: number;
}

interface Boss extends Prisera {
    faze: number;
}

const vlk: Prisera = { jmeno: "vlk", zivoty: 30 };
const drak: Boss = { jmeno: "drak", zivoty: 300, faze: 1 };

function popis(prisera: Prisera): string {
    return `${prisera.jmeno}: ${prisera.zivoty} životů`;
}

console.log(popis(vlk));
console.log(popis(drak));
console.log(drak);

Vypíše:

vlk: 30 životů
drak: 300 životů
{ jmeno: "drak", zivoty: 300, faze: 1 }

Společné vlastnosti napíšete jen jednou. A když Prisera dostane novou vlastnost, dostane ji i Boss.

Všimněte si, že funkce popis čeká parametr typu Prisera, a přesto jí můžete předat draka. Boss má všechno, co má příšera, a tak je také příšerou. Obráceně to nejde: příšera není boss, protože nemá fázi:

interface Prisera {
    jmeno: string;
    zivoty: number;
}

interface Boss extends Prisera {
    faze: number;
}

function popisBosse(boss: Boss): string {
    return `${boss.jmeno}, fáze ${boss.faze}`;
}

const vlk: Prisera = { jmeno: "vlk", zivoty: 30 };
console.log(popisBosse(vlk));

main.ts(15,24): error TS2741: Property 'faze' is missing in type 'Prisera' but required in type 'Boss'.

type, nebo interface? Pro tvar objektu fungují oba zápisy a ve skutečném kódu uvidíte oba. Mnoho týmů používá interface pro objekty a type pro všechno ostatní, třeba pro typy funkcí z minulé lekce nebo pro sjednocení z příští lekce, která se jako rozhraní zapsat vůbec nedají. Tento kurz používá obojí.

Typické chyby:

• Rovnítko za názvem, jako u type: interface Prisera = { … } skončí hláškou '{' expected. Za názvem rozhraní následují rovnou složené závorky.
• Objekt bosse bez vlastnosti navíc: Property 'faze' is missing in type '{ jmeno: string; zivoty: number; }' but required in type 'Boss'.