TypeScript Rozhraní vs. Typy

Mnoho vývojářů je zmateno při výběru mezi rozhraním a typem jazyka TypeScript. Je to pravděpodobně proto, že jsou si velmi podobné s drobnými rozdíly.

Prozkoumáme některé rozumné postupy a výchozí nastavení a zároveň odhalíme některé skryté klenoty jazyka TypeScript a odpovíme si na otázku: „Mám použít rozhraní nebo typ?“

Jakmile skončíte, podívejte se na můj další článek o TypeScript Rozhraní vs. třídy!

Tady je moje pravidlo: Pro případy použití, jako je vytváření nových typů pomocí věcí, jako jsou primitiva, typy union a typy tuple, dávám přednost použití klíčového slova type. Pro cokoli jiného (objekty/ pole) je to interface.

Klíč interface je nesmírně užitečný při práci s datovými strukturami, protože jde o velmi názornou reprezentaci (i když stejně tak type, to je obvykle moje preference). Je zcela v pořádku zvolit type i pro objekty a pole.

Přesto si pojďme odhalit něco více o typech vs. rozhraních v TypeScriptu, abyste se mohli rozhodnout informovaněji.

Objekty: Typicky bychom definovali datovou strukturu, která by modelovala typ vůči našim zamýšleným proměnným a argumentům funkcí. Většinou je datovou strukturou pole nebo objekt, který může obsahovat několik metod.

Vytvoříme objekt jako rozhraní (doporučený přístup):

interface Milkshake { name: string; price: number; getIngredients(): string;}

Tady dávám přednost použití rozhraní, protože je jasné, že jde o rozhraní, a ne o proměnnou s přiřazenými daty – příjemná výhra v čitelnosti. Používáme name a price, abychom umožnili nastavení záznamů, a getIngredients jako volání naší metody.

🎉 Stáhněte si ji zdarma!

Jste připraveni překročit rámec ForEach? Získejte jistotu s pokročilými metodami – Reduce, Find, Filter, Every, Some a Map.

• Plně pochopte, jak spravovat datové struktury JavaScriptu s neměnnými operacemi
• 31 stran hloubkové syntaxe, reálných příkladů, tipů a triků
• Napište čistší a lépe strukturovanou programovací logiku během 3 hodin

✅ Úspěch! Zkontrolujte si svůj e-mail a užijte si to.

Jako bonus vám také pošleme několik dalších dobrot napříč několika dalšími e-maily.

Když to porovnáme s typem – mohl by být snadno zaměněn za skutečný objekt kvůli přiřazení =:

type Milkshake = { name: string; price: number; getIngredients(): string;};

Je to jen moje malá preference pro volbu interface před použitím type zde – ale klidně použijte klíčové slovo type, pokud chcete.

Interpretace: Typ vs. rozhraní

Intersekce jednoduše znamená spojení jednoho nebo více typů! Tento vzor lze realizovat jak pomocí interface, tak pomocí type.

Předpokládejme následující rozhraní, ukážu vám, jak můžeme intersektovat interface a type:

interface MilkshakeProps { name: string; price: number;}interface MilkshakeMethods { getIngredients(): string;}

U rozhraní bychom intersektovali pomocí klíčového slova extends. Používám více rozhraní, abych vám ukázal, jak rozšířit (dědit) do konečného rozhraní Milkshake, které obsahuje všechny vlastnosti a metody definované jinde:

// { name: string, price: number, getIngredients(): string }interface Milkshake extends MilkshakeProps, MilkshakeMethods {}

Můžeme nyní použít Milkshake kdekoli chceme a můžeme těžit z toho, že máme name, price a getIngredients pouze v jednom odkazu na rozhraní.

Takto bychom to udělali s type a protínáním typů přes &:

// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & MilkshakeMethods;

Doporučuji použít type místo interface, když chcete protínat typy. Použití extends působí trochu rozvláčněji a není tak přehledné na čtení a mám pocit, že právě k tomu bylo klíčové slovo type stvořeno.

Je také velmi snadné prostě kombinovat více typů pomocí type. Přijde mi, že kód je přehlednější než při použití extends s rozhraními.

Rozhraní jsou také omezená – alias type lze použít pro složitější typy, jako jsou tuple, primitiva, uniony a další další:

// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & { getIngredients(): string };

Primitiva: Typ vs. rozhraní

Povíme si něco o primitivních typech. Ano, řetězce, čísla atd. Primitivní typ můžete přiřadit pouze aliasu type:

type MilkshakeName = string;interface Milkshake { name: MilkshakeName; price: number;}

Pokud potřebujete použít primitiv, použijte type. Rozhraní jsou zde pro pouhou jednu hodnotu nepoužitelná, protože je syntaxe nepodporuje.

🎉 Stáhněte si ji zdarma!

Jste připraveni překročit rámec ForEach? Získejte jistotu s pokročilými metodami – Reduce, Find, Filter, Every, Some a Map.

• Plně pochopte, jak spravovat datové struktury JavaScriptu s neměnnými operacemi
• 31 stran hloubkové syntaxe, reálných příkladů, tipů a triků
• Napište čistší a lépe strukturovanou programovou logiku během 3 hodin

✅ Úspěch! Zkontrolujte si svůj e-mail a užijte si to.

Jako bonus vám také pošleme několik dalších dobrot napříč několika dalšími e-maily.

Pro většinu případů by však bylo jednodušší použít přímo primitivní hodnotu:

interface Milkshake { name: string; price: number;}

Nezkomplikujte si kód! Typ vs. rozhraní

Ať už jste zvolili type nebo interface, způsob, jakým je používáme u třídy, je stejný:

type Size = { size: string};interface Milkshake { name: string; price: number; getIngredients(): string;}class Order implements Size, Milkshake { // Size size = 'large'; // Milkshake name = 'Vanilla'; price = 399; getIngredients() { return ; }}

Třídy nepodporují implementaci/rozšiřování typů unie, protože jsou považovány za statické modrotisky. To znamená, že musíte být super explicitní ohledně každého typu, který implementujete, protože kvůli omezením jazyka TypeScript nyní nemůže být dynamický nebo se měnit.

Přečtěte si více o TypeScript Interfaces vs. Classes!

Funkce: Typicky bych funkci vytvořil pomocí aliasu type, protože většinou chceme psát anonymní funkci:

type IngredientsFn = () => string;const getIngredients: IngredientsFn = () => ;

Jestliže by vám však více vyhovovalo použití interface, zde je návod, jak to udělat:

interface IngredientsFn { () => string;}

Přijde mi to prostě trochu kostrbaté ve srovnání s použitím type, ale obojí je opět zcela validní TypeScript a při kompilaci kódu v tom není žádný rozdíl.

Kdy nepoužívat Type

Když už jsme prozkoumali různá srovnání a doporučené přístupy, je čas promluvit si o Slučování deklarací, funkci v TypeScriptu, která se týká právě interface a byla by důvodem, proč zvolit interface místo type.

Chceme-li sloučit typy pomocí type, museli bychom udělat něco takového a vytvořit nový finální type:

type MilkshakeProps = { name: string; price: number;};type MilkshakeMethods = { getIngredients(): string;};type Milkshake = MilkshakeProps & MilkshakeMethods;

Náš type Milkshake je nyní typovým aliasem MilkshakeProps a MilkshakeMethods. Všimněte si, že abychom dosáhli tohoto chování, museli jsme vytvořit Milkshake, čímž jsme získali 3 individuální typové aliasy.

U rozhraní ve skutečnosti existuje chytřejší přístup (někdo by mohl říci až příliš chytrý), který se nazývá slučování deklarací.

Sloučení deklarací můžeme dosáhnout tak, že jednoduše dvakrát deklarujeme stejné interface ve stejném oboru (to může být buď importem rozhraní z jiného modulu, nebo jeho lokální deklarací vedle jiného rozhraní):

// declared once...interface Milkshake { name: string; price: number;}// declared again the same, it works!interface Milkshake { getIngredients(): string;}// { name: string, price: number, getIngredients(): string }const milkshake: Milkshake = { name: 'Banana', price: 399, getIngredients() {...}};

Milkshake nyní obsahuje name, price a getIngredients! Je však slučování deklarací dobrá věc? Upřímně řečeno nejsem jeho příznivcem a mám pocit, že by mohlo vést k větší škodě než užitku. Spíše bych vaše typy skládal přes type než používal slučování deklarací – ale alespoň teď znáte hlavní rozdíl(y).

Závěr

Tak tady to máte! Hlavní rozdíly mezi typy a rozhraními v TypeScriptu.

Když to shrnu, tak i s některými osobními preferencemi, zůstal bych u interface pro objekty a pro skládání nových typů za běhu bych používal klíčové slovo alias type. Tyto nové typy by mohly být i z rozhraní nebo jiných typů, například tuples, unions a intersection types. Možností je mnoho, ale pochopením přístupů můžeme začít vybírat ten správný nástroj.

Většinou jsou rozhraní a typy v podstatě stejné, kromě několika rozdílů, které jsme zde popsali. Doufám, že se vám čtení líbilo!

Pokud to se svými znalostmi jazyka TypeScript myslíte vážně, dalším krokem je podívat se na mé kurzy jazyka TypeScript, kde se podrobně naučíte úplné základy jazyka a také mnoho pokročilých případů použití, které budete potřebovat při každodenním vývoji v jazyce TypeScript!

Přeji vám šťastné kódování!