{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/ciekawostki-typescript-1-typ-vs-interfejs","result":{"data":{"markdownRemark":{"html":"

W TypeScripcie mamy do dyspozycji dwa podobne byty, które przy deklarowaniu typów wydają się być zamienne - type oraz interface. Czy te dwa typy czymś się różnią?

\n
type Person1 = {\n  name: string\n}\n\ninterface Person2 {\n  name: string\n}
\n

W ogólności, poza subtelną różnicą w składni - do type \"przypisujemy\" deklarację, a interface deklarujemy wprost, bez znaku = - te dwie konstrukcje można stosować zamiennie. Obie będą weryfikować typ, np.:

\n
const alice: Person1 = {\n  name: \"Alice\",\n  age: 20,\n  // -> tu będzie błąd\n}\n\nconst bob: Person1 = {\n  name: \"Bob\",\n  age: 25,\n  // -> tu będzie błąd\n}
\n

Obie konstrukcje możemy też używać zamiennie w bardziej złożonych przykładach, jak sygnatury indeksu czy typy funkcji, np.:

\n
type Dictionary1 = { [key: string]: string }\ninterface Dictionary2 {\n  [key: string]: string\n}
\n

Zarówno typ, jak i interfejs możemy \"podziedziczyć\" (właściwe określenie w świecie TS to raczej - rozszerzyć):

\n
class Employee1 implements Person1 {\n  name: string\n}\n\nclass Employee2 implements Person2 {\n  name: string\n}
\n

Jakie zatem mamy różnice?

\n
    \n
  1. Jeśli definiujemy unię, to możemy zastosować tylko tylko type: type State = 'on' | 'off'
    2. \n
  2. Tylko type może rozszerzać unię: type StateExtended = State & 'paused'
    3. \n
  3. Teoretycznie interfejsem można wyrazić krotkę, ale za pomocą typu jest to dużo bardziej czytelne i naturalne:
    4. \n
\n
type Pair = [number, number]\n\n// zamiast jakiegoś dziwadła\n\ninterface Tuple {\n  0: number\n  1: number\n  length: 2\n}
\n
    \n
  1. Z drugiej strony interface umożliwia scalanie deklaracji, czyli coś w stylu partial class z C#. Chodzi o to, że możemy w jednym pliku zadeklarować interfejs, a w innym - \"dalszą jego część\", finalnie uzyskując interfejs, który będzie połączeniem obydwu deklaracji, np.:
    2. \n
\n
// plik Person.ts\ninterface Person {\n  name: string\n}\n\n// plik PersonAddress.ts\ninterface Person {\n  address: string\n}
\n

Ten myk nie jest potrzebny raczej w naszym kodzie (możemy przecież scalić deklaracje do jednego pliku), ale przydaje się, gdy chcemy zmodyfikować typ, który dostajemy z jakiejś zewnętrznej biblioteki. Ten mechanizm wykorzystuje też podstawowa biblioteka TS - nowości i zmiany w kolejnych standardach ES to kolejne pliki, które rozszerzają wcześniejsze deklaracje: zatem wybierając odpowiedni standard ES, de facto wybieramy zestaw plików z deklaracjami, które są scalane.

\n

Ten wpis jest częścią serii o TypeScripcie, inspirowaną lekturą książki D. Vanderkama pt. \"TypeScript. Skuteczne programowanie\".

","excerpt":"W TypeScripcie mamy do dyspozycji dwa podobne byty, które przy deklarowaniu typów wydają się być zamienne - oraz . Czy te dwa typy czymś się różnią? W…","frontmatter":{"date":"01 September, 2020","path":"/blog/ciekawostki-typescript-1-typ-vs-interfejs","title":"Ciekawostki Typescript #1 - typ vs. interfejs"},"fields":{"readingTime":{"text":"2 min read"}}}},"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}