Classes vs Interfaces – TypeScript

Jedną ze znaczących różnic pomiędzy klasą a interfejsem jest to, że pojęcie interfejsu nie występuje w JavaScript a zatem po skompilowaniu kodu TypeScript zostanie on usunięty.
Na pierwszy rzut oka widoczną różnicą jest również składnia:

Interface

interface User {
  name: string;
  surname: string;
  age: number;
  active: boolean;
  setStatus: () => boolean
}

Dzięki interface możemy w sposób jawny ustawić prawidłową adnotację oczekiwanego typu. Przykładem może być użycie interfejsów dla odpowiedzi z API. Jeżeli zaimplementujemy interfejs wtedy będzie wiadomo czego oczekujemy od odpowiedzi z serwera nie używamy wtedy typu any, który i tak nic nam nie mówi. Oczywiście tak samo jak klasy interfejs możemy rozszerzać. Nic nie stoi na przeszkodzie aby użyć go wiele razy (o to chodzi). Posługując się przykładem możemy rozszerzyć podany interfejs o role.

interface Admin extends User  {
  role: number;
  permission: AdminPermission;
}

Przypominając interfejs jest używany tylko przez TypeScript w czasie kompilacji, a następnie jest usuwany. Interfejsy nie trafiają do naszych końcowych danych wyjściowych JavaScript. Zachęcam do eksperymentowania z playground.

/* TypeScript */
interface User {
    name: string;
    surname: string;
}

class User implements User {
    name = 'Jon';
}

/* JavaScript */
  "use strict";
class User {
    constructor() {
        this.name = 'Jon';
    }
}

Class

class User {
  name: string;
  surname: string;
  age: number;
  active: boolean;
  setStatus: () => boolean;
}

Można powiedzieć, że największa różnica między klasą a interfejsem polega na tym, że klasa zapewnia implementację czegoś, a nie tylko zapewnia mu kształt (jest swoistą fabryką obiektów) gdy interfejs jest strukturą używaną wyłącznie do sprawdzania typu.

coding-snippets

Snippets VSC – Quick Tips

Pierwszy wpis z serii przydatnych trików. Snippets Visual Studio Code.

W ramach informacji snippets w VSC to nic innego nic pewny schemat/skrót do wprowadzanie powtarzających się wzorców kodu po wciśnięciu klawisza tab.

Jeżeli jesteś jednym z wielu programistów używających do debugowania znanego console.log to trick dla ciebie ! 😀
Zapewne już go używasz. Po wpisaniu słowa log i kliknięciu w tab ustawia się console.log z ustawionym kursorem
w odpowiednim miejscu.

	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}

Dodatkowo : Rozszerzmy podejście do console.log i użyjmy keybidings.

Wchodzimy Keyboard Shortcuts under File > Preferences (Code > Preferences on macOS).

Następnie klikamy na edycje w formacie JSON Open Keyboard Shortcuts


Kolejny krok to definiowanie własnego skrótu w JSON.

// Place your key bindings in this file to override the defaults
[
  {
    "key": "ctrl+shift+c",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log('${SELECTED_TEXT}$1', ${SELECTED_TEXT}$1)$2;"
    }
  }
]

Teraz po zaznaczeniu wybranej wartości którą chcemy wylogować a następnie naciśnięciu zdefiniowanego skrótu klawiaturowego w tym przypadku ctr+shift+c zostanie wstawiony console.log z drugim parametrem jako string wartości, którą logujemy. Dzięki temu w przypadku wielu console jesteśmy w stanie odróżnić co dokładnie wylogowaliśmy.

przykład:

const someCats = "Burek";
console.log(someCats);
// Burek, someCats



Wracając do snippetów…
Innym ciekawym rozwiązaniem, który używam to prosty it dla unit testów 🙂

Tworzymy nowe wchodząc User Snippets under File > Preferences (Code > Preferences on macOS) oraz dodając fragment konfiguracji w JSON. np.

  "Set it test case": {
    "prefix": "test",
    "body": [
      	"it('should $1', () => {$2});"
    ],
    "description": "Set it test case"
  }

Zachęcam do tworzenia własnych snippetów jak i keybidings !

Więcej info https://code.visualstudio.com/docs/editor/userdefinedsnippets