Typ a interfejs w TypeScript

Type vs. Interface to jedna z najbardziej zagmatwanych i interesujących rzeczy w TypeScript. Postaramy się wyjaśnić to zamieszanie.

TypeScript jest tworzony na bazie JavaScript, który dodaje typy statyczne . Posiadanie typów to wspaniała rzecz dla programistów. Pisanie będzie trudne, ale na dłuższą metę nie pożałujesz.

TypeScript ma wszystkie podstawowe typy, takie jak number, string, boolean itp. Wraz z typem podstawowym TypeScript pozwala nam tworzyć niestandardowe typy i definiować wygląd obiektu za pomocą aliasów typów i interfejsów, odpowiednio.

Alias ​​typu to nic innego jak typ. Tworzenie typu z niestandardową nazwą (aliasem) czyni go aliasem typu, niczym więcej.

Przyjrzyjmy się podstawowej składni interfejsów i aliasów typów .

Podstawowa składnia

Interfejsy

Interfejsy będą deklarowane za pomocą słowa kluczowego interface . Sprawdź składnię interfejsów poniżej.

 interface InterfaceName { keyName: typeOfKey ... }

Spójrz na przykładowy przykład poniżej.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Aliasy typu

Aliasy typów będą deklarowane przy użyciu słowa kluczowego type . Sprawdź składnię aliasów typów poniżej.

 type TypeName = { keyName: typeOfKey; ... }

Spójrz na przykładowy przykład poniżej.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Stworzyliśmy typ dla Site za pomocą interfejsu i typu alias . Oba są prawidłowe i mogą być używane dla typów obiektów wymienionych w przykładach. W powyższym przykładzie różni się tylko składnia, co jest oczywiste.

Kontynuujmy badanie różnic między nimi, aby znaleźć więcej rzeczy.

Krotki

Krotka w TypeScript jest wpisaną wstępnie zdefiniowaną tablicą długości. Definiuje typy każdego indeksu.

Krotki możemy deklarować za pomocą aliasów typów. Ale nie możemy tego zrobić za pomocą interfejsów. Zobaczmy, jak to zrobić za pomocą aliasów typów.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

W powyższym przykładzie zdefiniowaliśmy typ dla każdego elementu indeksu tablicy. Jeśli podamy inny typ w tablicy, TypeScript zgłosi błąd.

Czy nie możemy tego zrobić za pomocą interfejsów?

Nie możemy tego zrobić dokładnie tak, jak robimy to z aliasami typów. Interfejsy są używane dla typów obiektów. Tak więc musimy mieć krotkę wewnątrz obiektu, aby używać jej w interfejsach. Zobaczmy przykład.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Jeśli widzisz kod, mamy krotkę o nazwie details w interfejsie. Możemy więc użyć krotek wewnątrz interfejsów.

Podobnie możemy używać aliasów typów dla pojedynczych typów, takich jak string, number, boolean, itp. Ponieważ interfejs jest używany dla typów obiektów, możemy go używać dla pojedynczych typów, takich jak aliasy typów.

Inną interesującą rzeczą jest to, że możemy użyć krotki typu alias w interfejsach . Sprawdź poniższy przykład.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Przejdźmy do następnej rzeczy.

Łączenie deklaracji – interfejsy

Scalanie deklaracji polega na użyciu języka TypeScript do scalania typów interfejsów o tej samej nazwie. Zobaczmy przykład, aby uzyskać większą jasność.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Jeśli widzisz powyższy kod, 3 razy zadeklarowaliśmy interfejs o tej samej nazwie. Kompilator TypeScript skompiluje wszystkie te 3 formularze w jeden typ obiektu, który zawiera wszystkie typy z interfejsów o tej samej nazwie.

Możesz potwierdzić scalanie deklaracji, usuwając jeden klucz z obiektu geekflare . Jeśli usuniesz jeden z kluczy z geekflare , zobaczysz błąd.

Nie możemy zrobić tego samego z aliasami typów. Większość ludzi nie korzysta z tej funkcji. Ogólnie rzecz biorąc, posiadanie wielu interfejsów o tej samej nazwie jest mylące.

Wpisz alias fani, nie martw się o tę funkcję interfejsów .

Rozszerza

Załóżmy, że zadeklarowałeś typ. Teraz chcesz zadeklarować inny typ wraz z typami poprzedniego typu. W takim przypadku możemy rozszerzyć poprzedni typ. Możemy to zrobić zarówno za pomocą interfejsów, jak i aliasów typów .

Zobaczmy ich obu.

Interfejsy

Istnieje słowo kluczowe o nazwie extends dla tego przypadku użycia w TypeScript. Wykorzystamy go do rozszerzenia interfejsów. Sprawdźmy przykład.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Stworzyliśmy interfejs Geekflare , rozszerzając interfejs Site . Wszystkie typy Site będą obecne w interfejsie Geeflare wraz z ich własnymi typami. Możesz usunąć klucz name ze zmiennej geekflare , aby to potwierdzić.

Możemy rozszerzyć wiele interfejsów w następujący sposób.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Wypróbuj rozszerzenie o więcej niż 2 interfejsy dla zabawy. Możemy również rozszerzyć aliasy typów za pomocą interfejsu.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

W powyższym przykładzie rozszerzyliśmy tylko jeden typ. Możesz rozszerzyć dowolną liczbę, podobnie jak w poprzednim przykładzie rozszerzania wielu interfejsów.

Zobaczmy, jak to zrobić za pomocą aliasów typów.

Aliasy typu

Możemy rozszerzyć aliasy typów za pomocą typu przecięcia w TypeScript. Zobaczmy przykład.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Rozszerzyliśmy typ Site o founder dla typu Geekflare za pomocą przecięcia (&) . Możesz to przetestować, usuwając jeden z kluczy ze zmiennej geekflare , co spowoduje wyświetlenie błędu.

Podobnie jak w przypadku interfejsów, możemy rozszerzyć wiele typów w następujący sposób.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Możemy również rozszerzać interfejsy o aliasy typów, tak samo jak interfejsy rozszerzające aliasy typów. Sprawdź poniższy przykład.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Spróbuj rozszerzyć kombinację aliasów typów i interfejsów.

Realizowanie

To nie jest różnica między interfejsami a aliasami typów. Po prostu cecha class do poznania.

Klasa może implementować zarówno interfejs, jak i alias typu w ten sam sposób. Zobaczmy przykłady dla nich obu.

Interfejsy

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Aliasy typu

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Uwaga: jedną rzeczą do zapamiętania jest to, że nie możemy zaimplementować typów unii (|) lub przecięcia (&) z klasami.

Ostatnie słowa

Jak widać w artykułach, możemy zrobić wszystko zarówno z aliasami typów, jak i interfejsami. Nie możemy więc ściśle powiedzieć, że jedno jest lepsze od drugiego. Ostatecznie wybór jednego z nich jest osobistym wyborem. W końcu rozwiniesz swój styl ich używania.

Następnie możesz sprawdzić Typescript vs. Javascript.

Szczęśliwego kodowania