Czym są typy w maszynopisie

Co to są typy?

W skrócie, TypeScript dodaje statyczne typowanie do JavaScript. Ponieważ sam JavaScript nie definiuje takich definicji typów, muszą one zostać zapisane i włączone do procesu kompilacji maszynopisu za pomocą dodatkowych mechanizmów. Innymi słowy, biblioteka JavaScript może zdefiniować funkcję:

export function createPerson(name, age, initScore) { ... }  

Ale w statycznie wpisywanym środowisku TypeScript, byłoby o wiele bardziej przydatne dla programisty, aby mieć coś takiego to:

interface Person {
    name: string,
    age: number,
    score: number
}

export function createPerson(name: string, age: number, initScore?: number): Person;

Celem deklaracji typu , często nazywanych typami, definicje typów lub po prostu typy , mają wypełniać te szczegóły nad implementacjami, identyfikując w ten sposób niewłaściwe użycie API nawet w bibliotekach. Zazwyczaj znajdują się w plikach z rozszerzeniem .d.ts i mogą być zbudowane z plików .ts za pomocą kompilatora. Jednak gdy programy nie były napisane w maszynopisie, deklaracje te są zwykle pisane ręcznie.

Z to powiedziawszy, Twoje zamieszanie jest nieco uzasadnione: więcej niż jedno podejście do instalowania i zarządzania deklaracjami maszynopisu zostało wykonane w czasie. Obecnie jednak istnieje oficjalny (i dlatego zalecany) sposób instalacji i używania plików deklaracji, a to jest udokumentowane tutaj :

W TypeScript 2.0 znacznie łatwiejsze stało się korzystanie z plików deklaracji, pozyskiwanie, używanie i znajdowanie ich. Ta strona dokładnie opisuje, jak zrobić wszystkie trzy

[...]

Uzyskanie deklaracji typu w TypeScript 2.0 i nowszych nie wymaga żadnych narzędzi poza npm.

Jako przykład, pobranie deklaracji dla Angular jest tak proste, jak zainstalowanie tej zależności w projekcie:

npm install --save @types/angular 

Pakiety w przestrzeni nazw @types będą automatycznie rozpatrywane przez kompilator do pobierania deklaracji typu. Co więcej, jeśli te deklaracje są już wbudowane w pakiet npm, nie musisz robić nic innego niż instalowanie tego pakietu (przykładem takiego pakietu jest redux ). Aby uzyskać więcej informacji, zobacz dokumenty na tsconfig.json . Jest też cała sekcja o tworzeniu własnych plików deklaracji, co jest zalecane dla wszystkich programistów chcących dodać deklaracje typu do swoich bibliotek.

Postaram się to wyjaśnić prostym przykładem. Jeśli używasz bibliotek innych firm, takich jak jQuery w projektach Angular lub typescript

Możesz bezpośrednio odwołać się do pliku jquery (angular.plik json) w projektach Angular i napisz kod deklarując $ lub jQuery jak pokazano poniżej

Jak pokazano poniżej

declare var $: any;
ngOnInit() {
   $(document).ready(function() {
     alert('I am Called From jQuery');
   });
}

Kod będzie działał. Ale problem polega na tym, że typescript polega na sprawdzaniu typu i wykrywaniu błędów w kodzie tylko w momencie kompilacji.

Jak maszynopis robi Nie wiem nic o bibliotece jquery nie może wykonywać statyczne sprawdzanie typu. poniższy kod kompiluje się bez żadnych błędów

ngOnInit() {
   $(document).ready(function() {
     $('#my-button').click(1);
 });
}

Podaję zły parametr do kliknięcia funkcji jquery i powyższy kod się skompiluje i w czasie uruchomienia za każdym razem, gdy klikniemy na element przycisku, spowoduje to błąd.

To miejsce, w którym typowanie pojawia się w obrazie. Ale jeśli masz definicje typu dla wtyczki jquery, ten rodzaj błędu może być przechwycony tylko w czasie kompilacji.

Zainstaluj jQuery typuje z pakietów węzłów i referuje je w kodzie

npm install --save jquery
npm install --save @types/jquery

I zaimportuj obiekt jquery w kodzie jak pokazano poniżej

import * as $ from 'jquery';

A teraz powyższy kod nie kompiluje się i wyrzuca błąd mówiąc

Argument of type ‘1’ is not assignable to parameter of type ‘false | EventHandlerBase<HTMLElement, ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>>’

Możesz przeczytać więcej na Jak zainstalować i używać JQuery w projektach Angular

Pracowałem tylko z maszynopisem w ASP.NET (klasyczny) projekt, więc nie mogę powiedzieć, jaki jest typowy sposób, aby to zrobić. Ale jest kilka nieco niekonwencjonalnych opcji:

• Znajdź *.pliki d.ts samodzielnie i po prostu skopiuj je gdzieś do swojego projektu. Nie będą one jednak automatycznie aktualizowane wraz z Twoimi bibliotekami.
• Zadeklaruj wszystko, co biblioteka daje Ci jako dowolne. Na przykład, możesz to zrobić dla JQuery, jeśli nie masz jeszcze zainstalowanych typów JQuery: declare var $: any;