Narzędzia JavaScript Flow i TypeScript są podobne pod wieloma względami. Różnią się jednak funkcjonalnością i możliwościami jako statyczne warcaby.
Dowiedz się, jak wypada porównanie Flow i TypeScript i który jest najlepszym narzędziem do sprawdzania statyki dla Twojego następnego projektu.
Co to jest przepływ?
Flow to statyczne narzędzie do sprawdzania typów w JavaScript, stworzone przez Facebooka w celu wcześniejszego identyfikowania błędów kompilacji i kodu w czasie wykonywania. Czyni to poprzez monitorowanie wartości przekazywanych przez kod i zmian ich typów danych w czasie. Ten system sprawdzania statycznego poprawia niezawodność i czytelność. Pomaga także ograniczyć występowanie błędów w kodzie JavaScript.
Co to jest TypeScript?
TypeScript to nie tylko narzędzie do sprawdzania typów, takie jak Flow, ale także mocno typowany język programowania. Microsoft stworzył język, budując go na JavaScript.
Zgodnie z konwencją należy tworzyć pliki TypeScript z rozszerzeniem .ts. Możesz skompilować plik TypeScript do kodu JavaScript, więc wszędzie tam, gdzie działa JavaScript, można również uruchomić TypeScript.
Konfigurowanie przepływu dla Twojej aplikacji JavaScript
Możesz zintegrować Flow z dowolnym frameworkiem JavaScript, którego zdecydujesz się użyć w swoim projekcie. Będziesz musiał skonfigurować kompilator JavaScript, taki jak Babel, aby obsłużyć wszystkie typy przepływu w kodzie i skompilować go do standardowego JavaScript.
Aby zainstalować Flow w swoim projekcie, uruchom następujące polecenie:
dodatek przędzy --dev pojemnik przepływu
Następnie należy globalnie zainstalować interfejs wiersza poleceń Flow. Ten interfejs CLI udostępnia kilka poleceń służących do tworzenia aplikacji przepływowych.
W systemie macOS użyj Homebrew aby zainstalować Flow CLI:
napar zainstalować przepływ-cli
Będziesz musiał wiedzieć jak korzystać z Windows PowerShell zainstalować Flow na komputerze z systemem Windows.
Aby zainstalować Flow CLI w systemie Windows, uruchom ten skrypt w terminalu PowerShell:
np "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Projekty Flow wymagają .flowconfig plik zawierający wszystkie niezbędne konfiguracje narzędzia.
Uruchom to polecenie, aby utworzyć plik konfiguracyjny Flow w nowym lub istniejącym projekcie:
npm uruchom przepływ init
Należy pamiętać, że niektóre platformy mogą domyślnie dostarczać projekty z plikiem konfiguracyjnym Flow.
Ostatnią rzeczą do zrobienia jest dodanie skryptu Flow do swojego pakiet.json plik:
"skrypty": {
"przepływ": "przepływ"
},
Pomyślnie skonfigurowałeś Flow do działania w aplikacji JavaScript.
Konfigurowanie TypeScript w twoim projekcie
Uruchom następujące polecenie, aby zainstalować TypeScript w swoim projekcie:
np zainstalować maszynopis --save-dev
Powinieneś także zainstalować kompilator, aby skompilować kod TypeScript do zwykłego JavaScript. Możesz też potrzebować skonfiguruj konfigurację TypeScript, aby uzyskać lepszy przepływ pracy doświadczenie.
Zainstaluj globalnie kompilator TypeScript za pomocą tego polecenia:
np zainstalować -g maszynopis
Aby zainicjować a tsconfig.json config, wprowadź następujące polecenie w swoim terminalu:
tsc --w tym
Powyższe instrukcje pozwolą Ci rozpocząć korzystanie z TypeScript w swoim projekcie.
Budynek Z Przepływem
Aby napisać kod Flow w pliku JavaScript, zadeklaruj składnię Flow na początku kodu, przed jakimikolwiek wyrażeniami lub instrukcjami:
// @przepływ
Możesz ustawić typy danych zmiennych i funkcji za pomocą adnotacji. Flow zgłosi błąd, jeśli oczekiwany typ nie zostanie spełniony.
Na przykład:
// @przepływ
niech foo: liczba = "Cześć";
Flow zgłosi tutaj błąd, ponieważ oczekiwany typ wartości bla jest liczbą, a nie ciągiem znaków.
Uruchomić przepływ npm aby zobaczyć wyjście błędu w terminalu:
Włączenie rozszerzenia Flow w dowolnym edytorze tekstu spowoduje wyświetlenie błędów w edytorze podczas pisania kodu.
Flow używa również wnioskowania o typie, aby określić, jaka powinna być oczekiwana wartość wyrażenia.
Na przykład:
// @przepływ
funkcjonowaćZrób coś(wartość) {
zwracana wartość * "Witam";
};
pozwalać wynik = zróbCoś(6);
Nie można wykonywać operacji arytmetycznych między liczbą sześć a ciągiem znaków Witam.
wyjście z przepływ npm będzie błąd:
Programowanie za pomocą TypeScript
Składnia TypeScript jest bardzo podobna do składni Flow. Możesz definiować typy zmiennych i funkcji za pomocą adnotacji typu, tak jak w Flow.
TypeScript jest dostarczany z kilkoma innymi funkcjami podobnymi do Flow, takimi jak wnioskowanie o typie.
Weź przykładowy kod TypeScript:
// Maszynopis.ts
wpisz Wynik = "przechodzić" | "ponieść porażkę"
funkcjonowaćzweryfikować(wynik: wynik) {
jeśli (wynik "przechodzić") {
log konsoli ("Przeszedł")
} w przeciwnym razie {
log konsoli ("Przegrany")
}
}
Możesz biegać tsc Typescript.ts aby skompilować ten kod do zwykłego JavaScript waniliowego.
Byłby to ten sam kod TypeScript skompilowany do zwykłego JavaScript:
funkcjonowaćzweryfikować(wynik) {
jeśli (wynik "przechodzić") {
log konsoli ("Przeszedł")
} w przeciwnym razie {
log konsoli ("Przegrany")
}
}
Plusy i minusy TypeScript i Flow
Teraz wiesz, jak zacząć używać obu narzędzi w swoim projekcie JavaScript. Powinieneś znać zalety i wady korzystania z każdego z nich.
Integracja
Proces konfiguracji do korzystania z Flow jest nieco bardziej złożony niż w przypadku TypeScript. Będziesz musiał skonfigurować kompilator JavaScript, taki jak Babel lub flow-remove-types, aby usunąć typy przepływów z kodu. TypeScript zawiera kompilator do konwersji kodu TypeScript na JavaScript, co ułatwia integrację.
TypeScript ma znacznie lepsze narzędzia i większość frameworków JavaScript obsługuje je domyślnie. Większość popularnych środowisk IDE zapewnia pierwszorzędną obsługę języka TypeScript. Flow jest również obsługiwany, ale wymaga specjalnej wtyczki.
Wspólnota
W przeciwieństwie do Flow, frameworki JavaScript, takie jak React, React Native, Vue i Angular, obsługują TypeScript od razu po wyjęciu z pudełka.
To powszechne przyjęcie i duża społeczność skutkują lepszymi zasobami edukacyjnymi, aktualizacjami i obsługą narzędzi.
Elastyczność
Flow działa jako narzędzie do sprawdzania typów, które działa, aby ostrzec Cię o potencjalnie złym kodzie. TypeScript zapobiega pisaniu złego kodu i ma ścisły system typów. TypeScript również obsługuje enkapsulacja obiektów, która ułatwia zarządzanie złożonym kodem. Flow nie ma tej funkcji.
Usługi
TypeScript zapewnia wszystkie usługi języka JavaScript, takie jak refaktoryzacja kodu i automatyczne uzupełnianie. Flow to statyczne narzędzie do sprawdzania typów, które zapewnia dogłębne zrozumienie i analizę napisanego kodu.
Flow może pracować aż do zaimportowanych modułów i bibliotek Twojego projektu i rozpoznać, w jaki sposób wpływają one na Twój kod. Na przykład może wykryć i zgłosić ostrzeżenie, gdy brakuje wymaganej biblioteki w twoim projekcie lub gdy próbujesz uzyskać dostęp do definicji, która nie istnieje.
Którego narzędzia do sprawdzania statycznego należy użyć?
Istnieje wiele ważnych argumentów przemawiających za użyciem każdego narzędzia, ponieważ każde z nich ma inne funkcje. Niektóre mogą mieć najwyższy priorytet dla jednego programisty i niski priorytet dla drugiego. Oba narzędzia dobrze się sprawdzają pod każdym względem i oferują korzyści związane z ich używaniem.
Powinieneś zbadać wymagania swojego projektu i na ich podstawie podjąć przemyślaną decyzję.