Co je TypeScript Interface vs Type?

TypeScript podporuje vlastní typy, které lze definovat buď pomocí „ rozhraní “ nebo „ typ “. Rozhraní může být implementováno třídou nebo objektem, zatímco alias typu lze použít pouze k vytvoření nového názvu pro existující typ nebo k definování sjednocení typů. Ačkoli jsou typy a rozhraní často zaměnitelné, existují určité rozdíly v jejich funkčnosti a syntaxi, díky kterým jsou pro konkrétní scénáře vhodnější.

Tento blog popíše rozhraní a typ TypeScript a jejich rozdíl.

Co je TypeScript Interface vs Type?

“ Rozhraní ' a ' typ ” se používají k definování vlastních typů v TypeScript. Existují však určité rozdíly v jejich funkčnosti a syntaxi. Hlavní rozdíl mezi rozhraním a typem je v tom, že rozhraní definuje nový typ, zatímco alias typu nikoli.

Rozhraní může být implementováno třídou nebo objektem, zatímco typy mohou definovat složitější typy pomocí funkcí, jako jsou sjednocení a průniky. Obecně platí, že rozhraní se běžněji používají pro definování tvarů objektů a rozhraní API, zatímco typy se častěji používají pro definování komplexních datových typů a typů nástrojů. Pochopme oba tyto zvlášť.

Co je rozhraní TypeScript?

Rozhraní TypeScript je technika k definování tvaru objektu TypeScript. Vytváří se pomocí klíčového slova „ rozhraní “ a specifikuje sadu atributů a metod, které objekt vyžaduje, aby mohl být klasifikován jako tohoto typu. Je ekvivalentní třídě v objektově orientovaném programování; nedefinuje však žádnou implementaci. Rozhraní se používají hlavně pro kontrolu typu a zajištění, že objekt odpovídá specifické struktuře.

Než budete pokračovat, mějte na paměti, že aby bylo možné spustit soubor TypeScript, musí být transpilován do souboru JavaScript a poté spustit kód JavaScript na terminálu pomocí daných příkazů:

tsc název_souboru.ts
název_souboru uzlu.js

Příklad

Vytvořte rozhraní s názvem „Uživatel“, které definuje tři atributy a metodu „ získat informace() “:

uživatelské rozhraní {
jmeno: string;
prijmeni: string;
věk: číslo;
získat informace ( ) : neplatné;
}

Vytvořit třídu' Student “, který se dědí s rozhraním. Třída definuje své atributy, konstruktor, který přiřadí hodnoty atributům, a metodu „getInfo()“, která zobrazí hodnoty vzhledem k atributům:

třída Student implementuje Uživatel {
jmeno: string;
prijmeni: string;
věk: číslo;

konstruktér ( firstName: string, lastName: string, age: number ) {
this.firstName = jméno;
this.lastName = prijmeni;
this.věk = věk;
}
získat informace ( ) : neplatný {
konzole.log ( 'Informace o studentovi:' )
konzole.log ( '- Název: ' + this.firstName + ' ' + toto.příjmení ) ;
konzole.log ( '- Věk: ' + tento.věk ) ;
}
}

Vytvořte objekt „ Student “ s názvem “ std “ z “ Uživatel ” zadejte voláním konstruktoru s klíčovým slovem „new“ a poté zavolejte metodu getInfo() pro tisk dat na konzole:

const std: Uživatel = nový student ( 'Netopýr' , 'Steve' , 17 ) ;
std.getInfo ( ) ;

Výstup

Co je typ TypeScript?

Typy TypeScript se většinou používají pro vytváření aliasů pro existující typy i pro vytváření složitějších typů. Představuje konkrétní tvar nebo strukturu dat. Může být definován/deklarován pomocí „ typ “. Typy TypeScriptu lze použít k tomu, aby byl kód srozumitelnější a omezilo se opakování/duplikace.

Příklad

Nejprve definujte typ ' Uživatel ' za použití ' typ ” klíčové slovo zadané s pěti vlastnostmi jedna z nich je volitelný atribut, který je “ telefon “:

typ Uživatel = {
jmeno: string;
prijmeni: string;
věk: číslo;
email: řetězec;
telefon?: řetězec;
} ;

Definujte funkci s názvem „ getFullName “, který přebírá parametr typu „ Uživatel “ a vytiskne data obsahující informace o osobě, včetně „ název “, “ stáří “, “ e-mailem ' a ' telefonní číslo “:

funkce získat informace ( osoba: Uživatel ) : neplatný {
konzole.log ( 'Uživatelské informace:' )
konzole.log ( '- Název: ' + osoba.jméno + ' ' + osoba.příjmení ) ;
konzole.log ( '- Věk: ' + osoba.věk ) ;
konzole.log ( '- E-mailem: ' + osoba.e-mail ) ;
konzole.log ( '-Telefonní číslo: ' + osoba.telefon ) ;
}

Nyní vytvořte objekt ' osoba 'typu' Uživatel ” s páry klíč–hodnota:

const person: User = {
jméno: 'Mily' ,
příjmení: 'Micheal' ,
stáří: 28 ,
e-mailem: 'mili124@yahoo.com' ,
telefon: '086-34581734'
} ;

Nakonec vytiskněte informace o uživateli voláním funkce getInfo():

konzole.log ( získat informace ( osoba ) ) ;

Výstup

To bylo vše o rozhraní a typu TypeScript.

Závěr

V TypeScriptu „ rozhraní ' a ' typ ” se používají k definování vlastních typů. Rozhraní může být implementováno třídou nebo objektem, zatímco typy mohou definovat složitější typy pomocí funkcí, jako jsou sjednocení a průniky. Toto jsou výkonné funkce, které mohou pomoci psát organizovanější a škálovatelnější kód. Tento blog popsal rozhraní a typ TypeScript a jejich rozdíl.

Co je TypeScript Interface vs Type?