dlaczego powinieneś wybrać TypeScript zamiast JavaScript
TypeScript od kilku lat cieszy się coraz większą popularnością. Jest wymieniany wśród pięciu najbardziej obiecujących języków w 2020 roku. Angular, jeden z największych frameworków frontendowych, używa maszynopisu. Około 60% programistów JS używa już maszynopisu, a 22% chce spróbować. Dlaczego?
historycznie JavaScript stał się głównym językiem skryptowania stron internetowych i aplikacji w Internecie. Możliwe jest teraz używanie JavaScript zarówno na frontendzie, jak i na backendzie z frameworkami takimi jak Node.js i Deno.
ale czy JavaScript został stworzony do tworzenia dużych, złożonych systemów, takich jak te we współczesnej sieci? Nie.
w tym artykule przedstawimy Ci rozwiązanie tego problemu – TypeScript – i zaczniemy od ścieżki dodawania typów do kodu JavaScript.
oto niektóre z punktów, które omówimy:
- Co To jest TypeScript?
- czym są typy i jak działają w TS?
- JavaScript vs. TypeScript: który wybrać?
- jak zacząć pracę z maszynopisem.
- dalsze zasoby do nauki maszynopisu.
co to jest TypeScript?
w skrócie, TypeScript to superset JavaScript, który ma opcjonalne pisanie i kompiluje się do zwykłego JavaScript.
w prostszych słowach, TypeScript technicznie jest JavaScript ze statycznym typowaniem, kiedy tylko chcesz go mieć.
jakie byłyby powody dodawania statycznego pisania do JavaScript?
mogę wymienić przynajmniej trzy:
- możesz uniknąć mistrzowsko ukrytych błędów ninja, takich jak klasyczny
'undefined' is not a function. - łatwiej jest refaktorować kod bez jego znaczącego łamania.
- orientowanie się w złożonych, wielkoskalowych systemach nie jest już koszmarem.
w rzeczywistości badanie pokazuje, że 15% wszystkich błędów JavaScript może być wykrytych przez maszynopis.
swoboda dynamicznego pisania często prowadzi do błędów, które nie tylko obniżają wydajność pracy programisty, ale mogą również hamować rozwój z powodu rosnących kosztów dodawania nowych linii kodu.
w związku z tym niepowodzenie JavaScript w włączaniu takich rzeczy jak typy i Sprawdzanie błędów w czasie kompilacji sprawia, że jest to zły wybór dla kodu po stronie serwera w przedsiębiorstwach i dużych bazach kodowych. Jak mówi ich slogan, TypeScript to JavaScript, który skaluje się.
czego potrzebuję, aby nauczyć się obsługi maszynopisu?
TypeScript jest zasadniczo js linter. Lub JS z dokumentacją, którą kompilator może zrozumieć.
dlatego w przeciwieństwie do innych języków, takich jak CoffeeScript (który dodaje cukier składniowy) lub PureScript (który w ogóle nie wygląda jak JavaScript), nie musisz się wiele uczyć, aby zacząć pisać kod maszynopisu.
typy w TS są opcjonalne, a każdy plik JS jest prawidłowym plikiem maszynopisu. Podczas gdy kompilator będzie narzekać, jeśli masz błędy pisania w plikach początkowych, to daje z powrotem plik JavaScript, który działa tak jak wcześniej. Gdziekolwiek jesteś, TypeScript spotka cię tam i łatwo jest stopniowo rozwijać swoje umiejętności.
czy TypeScript jest używany na frontendzie czy na backendzie?
TypeScript jest kompilowany do JavaScript. Dlatego TS może być używany wszędzie tam, gdzie można użyć JS: zarówno frontendu, jak i backendu.
JavaScript jest najpopularniejszym językiem do implementacji skryptów dla interfejsu aplikacji i stron internetowych. Tak więc TypeScript może być używany do tego samego celu, ale świeci w złożonych projektach korporacyjnych po stronie serwera.
w Serokell większość naszego interfejsu internetowego jest zaimplementowana w maszynopisie.
czym są typy i jak działają w TS?
Krótkie wprowadzenie do typów
typy są sposobem na odróżnienie poprawnych programów od niepoprawnych, zanim je uruchomimy, opisując w naszym kodzie, w jaki sposób planujemy wykorzystać nasze dane. Mogą się one różnić od prostych typów, takich jak liczba i ciąg znaków, do złożonych struktur idealnie wzorowanych na naszej domenie problemu.
języki programowania dzielą się na dwie kategorie: typowane statycznie lub dynamicznie.
w językach ze statycznym typowaniem, typ zmiennej musi być znany w czasie kompilacji. Jeśli zadeklarujemy zmienną, powinna ona być znana (lub wnioskowana) przez kompilator, jeśli będzie to liczba, łańcuch znaków lub wartość logiczna. Pomyśl O Javie.
w językach z dynamicznym typowaniem niekoniecznie tak jest. Typ zmiennej jest znany tylko podczas uruchamiania programu. Myśl O Pythonie.
TypeScript może obsługiwać statyczne pisanie, podczas gdy JavaScript nie.
ze względu na statyczne pisanie TypeScript, musisz bardziej starać się:
- wprowadzenie niezdefiniowanych zmiennych (pomoc w kompilacji ostrzeżeń)
- suma dwóch łańcuchów, które mają w sobie liczby (jak „4” + „20” = „420”)
- wykonuj operacje na rzeczach, które na to nie pozwalają, takich jak przycinanie liczby.
dzięki systemom typów statycznych możesz tworzyć własne typy kompozytowe. Dzięki temu inżynierowie mogą bardziej szczegółowo wyrazić swoje intencje.
jawne typy również sprawiają, że kod sam się dokumentuje: zapewniają one, że zmienne i funkcje są zgodne z przeznaczeniem i umożliwiają komputerowi zapamiętywanie otaczającego kontekstu.
typy maszynopisu
TypeScript ma wiele podstawowych typów, takich jak Boolean, Number, String, Array, krotka itp. Niektóre z nich nie istnieją w JS; możesz dowiedzieć się więcej o nich w dokumentacji maszynopisu.
oprócz tych, oto kilka innych typów, które chcemy wyróżnić, aby pokazać ekspresję TS:
dowolne & nieznane
podczas gdy każdy jako typ może pokryć, cóż, wszystko, co chcesz, Nieznany jest jego bezpiecznym odpowiednikiem.
ilekroć chcesz uciec od systemu typów, any umożliwia przypisanie do niego dowolnej zmiennej JavaScript. Jest często używany do modelowania przychodzących zmiennych (na przykład z zewnętrznych interfejsów API), które nie zostały jeszcze sprawdzone i których typ jest nieznany.
Unknown jest podobne do wszystkich, ale nie pozwala na wykonywanie żadnych operacji na zmiennej, zanim nie zostanie jawnie sprawdzona.
Void
Void jest używany, gdy nie ma zwracanej wartości, na przykład jako zwracany typ funkcji, które nic nie zwracają.
nigdy
Never jest typem zwracanym dla czegoś, co nigdy nie powinno wystąpić, jak funkcja, która wyrzuci wyjątek.
skrzyżowanie & typy związków
umożliwiają one tworzenie niestandardowych typów, aby lepiej pasowały do Twojej logiki.
typy przecięć umożliwiają połączenie kilku podstawowych typów w jeden typ. Na przykład można utworzyć osobę typu niestandardowego, która ma name: string i phone_number: number. Jest to równoznaczne z powiedzeniem: chcę, żeby moim typem było to i tamto.
typy Unii umożliwiają typowi pobranie jednego z wielu podstawowych typów. Na przykład możesz mieć zapytanie, które zwraca result: string lub undefined. Jest to równoznaczne z powiedzeniem: chcę, żeby moim typem było to czy tamto.
jeśli myślisz o typach jako spacjach, wszystkie te typy szybko mają sens.
typy w maszynopisie mogą być zarówno niejawne, jak i jawne. Jeśli nie piszesz jawnie swoich typów, kompilator użyje wnioskowania typów do wnioskowania typów, których używasz.
pisanie ich jawnie daje jednak korzyści, takie jak pomoc innym programistom, którzy czytają Twój kod i upewnienie się, że to, co widzisz, jest tym, co widzi kompilator.
TypeScript vs. JavaScript
opłaca się być pragmatycznym. Spójrz na ten wykres:
znikąd, TypeScript jest teraz na 7 pozycji w Github pull requests dla Q1 2020, powyżej PHP i C. (Źródło)
chociaż znaczną przyczyną tego jest wsparcie TypeScript przez firmy takie jak Microsoft (który go stworzył) i Google, jest obsługiwane nie bez powodu.
3 powody, dla których warto wybrać TypeScript zamiast JavaScript
1. Maszynopis jest bardziej niezawodny
w przeciwieństwie do JavaScript, Kod maszynopisu jest bardziej niezawodny i łatwiejszy do refaktoryzacji. Umożliwia to programistom unikanie błędów i znacznie łatwiejsze przepisywanie.
typy unieważniają większość głupich błędów, które mogą wkraść się do baz kodu JavaScript, i tworzą szybką pętlę zwrotną, aby naprawić wszystkie małe błędy podczas pisania nowego kodu i refaktoryzacji.
2. Maszynopis jest bardziej wyraźny
Making types explicite skupia naszą uwagę na tym, jak dokładnie zbudowany jest nasz system i jak różne jego części oddziałują ze sobą. W systemach wielkoskalowych ważne jest, aby móc abstraktować resztę systemu, mając na uwadze kontekst. Typy pozwalają nam to robić.
3. TypeScript i JavaScript są praktycznie wymienne, więc dlaczego nie?
ponieważ JavaScript jest podzbiorem maszynopisu, możesz używać wszystkich bibliotek JavaScript i kodu, który chcesz w swoim kodzie maszynopisu.
większość popularnych bibliotek JavaScript ma typy w 2020 roku-zdecydowanie Typed to repozytorium z typami dla wielu różnych bibliotek JavaScript, których możesz użyć, aby twoje interakcje z nimi były bardziej bezpieczne.
oznacza to, że można stopniowo przyjmować TypeScript w bazie kodu JavaScript, najpierw dodając typy do poszczególnych modułów, a następnie rozszerzając do …
wady maszynopisu
nie możesz po prostu wziąć zespołu JavaScript lub repozytorium JavaScript i natychmiast przełączyć je na Idiomatyczny maszynopis. Są kompromisy i poświęcenia z góry.
podczas gdy możemy spierać się o oszczędności, które są jednoznaczne w odniesieniu do typów, na dłuższą metę, w krótkiej perspektywie ich dodanie zajmuje więcej czasu. To chyba nie jest wielka sprawa, ale jest to argument na rzecz JavaScript.
dlatego możesz nie wybierać maszynopisu dla małych projektów i prototypów na własny użytek.
Testy A typy
pokrótce poruszę dyskusję na temat testowania vs. typów: obie te rzeczy łapią różne klasy błędów, więc sensowne jest zrobienie obu w sposób niepartyjny.
nadal możesz używać zarówno testów jednostkowych, jak i bardziej zaawansowanych technik, takich jak testowanie oparte na właściwościach za pomocą TS, zachowując zalety systemu typów statycznych.
podsumowując, oto szybkie porównanie obu języków:
| maszynopis | JavaScript |
|---|---|
| TS jest obiektowym językiem skryptowym | JS jest obiektowym językiem skryptowym |
| zależny język (kompiluje się do JavaScript) | niezależny język (może być interpretowany i wykonywany) |
| skompilowany język, nie może być wykonany bezpośrednio w przeglądarce | interpretowany język, wykonywany bezpośrednio w przeglądarce internetowej |
| można pisać statycznie | dynamicznie |
| lepiej ustrukturyzowany i zwięzły | bardziej elastyczny, ponieważ nie jesteś ograniczony przez system typów |
| ma .rozszerzenie ts | marozszerzenie js |
| stworzony w firmie Microsoft przez Andersa Hejlsberga (projektanta C#) i utrzymywany przez Microsoft | stworzony przez Brendana Eich (Netscape) i utrzymywany przez ECMA (European Computer Manufacturers Association). |
| dobry wybór dla złożonych projektów | dobry do pracy z małymi, prostymi projektami |
Przewodnik szybkiego uruchamiania maszynopisu
kompilator maszynopisu
aby skompilować kod TS, musisz zainstalować tsc (skrót od TypeScript compiler). Najłatwiej to zrobić przez terminal. Można to łatwo zrobić za pomocą npm za pomocą następującego polecenia:
npm install -g typescriptjeśli chcesz używać maszynopisu z kodem Visual Studio, na ich stronie internetowej znajduje się przydatny przewodnik.
po zainstalowaniu tscmożesz skompilować pliki za pomocą tsc filename.ts.
migracja plików z JavaScript do maszynopisu
Załóżmy, że chcemy zmienić następujący plik JavaScript na TypeScript z powodu dziwnego zachowania:
function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);dobre wieści. Każdy plik JS jest technicznie poprawnym plikiem maszynopisu, więc masz świetny start – wystarczy przełączyć rozszerzenie pliku na .ts od .js.
TypeScript ma wnioskowanie typów, co oznacza, że może automatycznie wnioskować niektóre typy, których używasz, bez ich dodawania. W tym przypadku zakłada, że funkcja sumuje dwie zmienne typu any, co jest prawdą, ale obecnie nie ma większego zastosowania.
jeśli chcemy sumować tylko liczby, możemy dodać podpis typu do my_sum, aby akceptował tylko liczby.
function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);teraz TypeScript wyświetla nam błąd.
Argument of type 'string' is not assignable to parameter of type 'number'.
dobrze, że znaleźliśmy błąd. 🙂 Aby uniknąć błędów takich jak te, można również dodać definicje typów do zmiennych.
let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok. TypeScript jest dość elastyczny w tym, co może zrobić i jak może Ci pomóc. Aby uzyskać mniej trywialny przykład, jak przenieść istniejącą bazę kodu JavaScript do maszynopisu lub użyć maszynopisu do ulepszenia kodu JS, przeczytaj ten przewodnik.
jak używać maszynopisu w przeglądarce?
aby uruchomić TypeScript w przeglądarce, musi być transpilowany do JavaScript za pomocą kompilatora TypeScript (tsc). W tym przypadku tsc tworzy nowy .plik js na podstawie .kod ts, którego możesz użyć w dowolny sposób, używając pliku JavaScript.
zasoby do dalszej nauki
TypeScript Deep Dive
Ten darmowy zasób internetowy ma wszystko, czego potrzebujesz, aby zacząć od maszynopisu, w tym bardziej szczegółowe wyjaśnienia sekcji, które już omówiliśmy tutaj.
Ucz Się Maszynopisu Od Podstaw!
praktyczny 3-godzinny kurs, który omawia wszystkie podstawowe funkcje maszynopisu, jak używać go do interakcji z niektórymi frameworkami JS i jak korzystać z mocy maszynopisu podczas pisania JavaScript.
ćwiczenie jest najlepszym źródłem do ćwiczenia pisania kodu w nowym języku programowania. Mentorzy, którzy poprowadzą cię w stronę idiomatycznego kodu, mnóstwo zabawnych zadań treningowych – nie ma nic, czego nie można by nie pokochać w tej witrynie.
Ogólnie Rzecz Biorąc, TypeScript jest doskonałym narzędziem, które można mieć w zestawie narzędzi, nawet jeśli nie używasz go w pełni. Łatwo jest zacząć od małych i rozwijać się powoli, ucząc się i dodając nowe funkcje w miarę upływu czasu. Maszynopis jest pragmatyczny i przyjazny dla początkujących, więc nie ma się czego bać.
mam nadzieję, że ten artykuł będzie przydatny w Twojej podróży maszynopisu. Jeśli chcesz uzyskać pomoc lub masz jakieś pytania, zadaj je na naszych mediach społecznościowych, takich jak Twitter lub Facebook.