JavaScript początkowo miał służyć do tworzenia krótkich, zaledwie kilkuliniowych fragmentów kodu, które umieszczano w stronach internetowych. Nikt nie przypuszczał, że zyska tak ogromną popularność i zacznie być wykorzystywany do pisania zaawansowanych aplikacji, składających się z tysięcy linii kodu.
Pomimo dynamicznego rozwoju i powszechnego stosowania JavaScript w tworzeniu aplikacji, nie jest on językiem idealnym. Jego skromne początki i pierwotne przeznaczenie sprawiły, że posiada pewne specyficzne cechy, które mogą utrudniać tworzenie rozbudowanych aplikacji.
Przykładowo, JavaScript nie sygnalizuje błędu, gdy odwołujemy się do nieistniejących elementów w obiekcie lub gdy próbujemy pomnożyć wartość null przez liczbę.
W JavaScript, pusty ciąg znaków („”) jest traktowany jako równy zero (0) podczas porównywania za pomocą operatora równości (==). Co gorsza, JavaScript nie ujawnia takich błędów na etapie tworzenia kodu. Zauważymy je dopiero po uruchomieniu programu.
TypeScript, który bazuje na JavaScript, powstał jako odpowiedź na wyzwania związane z tworzeniem aplikacji w JavaScript. TypeScript wprowadza statyczną kontrolę typów podczas pisania kodu, co pozwala na wychwytywanie błędów wcześniej.
Statyczna kontrola typów oznacza, że błędy w kodzie są identyfikowane bez konieczności jego uruchamiania. Opiera się ona na weryfikacji typów danych używanych w kodzie na etapie jego tworzenia.
TypeScript to typowany nadzbiór języka JavaScript. Oznacza to, że każdy poprawny kod JavaScript jest również poprawnym kodem TypeScript. „Typowany” oznacza, że TypeScript wprowadza reguły dotyczące sposobu używania różnych typów danych. TypeScript jest również językiem o silnym typowaniu, co oznacza, że nie można łatwo ominąć ograniczeń narzuconych przez system typów.
TypeScript to znaczący krok naprzód w rozwoju stron internetowych. Umożliwia pisanie bardziej czytelnego kodu, który jest łatwiejszy w utrzymaniu. Wymusza również dobre praktyki programistyczne i pomaga deweloperom w identyfikowaniu i unikaniu błędów na etapie tworzenia oprogramowania.
TypeScript jest bardziej niezawodny i ułatwia refaktoryzację kodu, dzięki czemu idealnie nadaje się do tworzenia rozbudowanych aplikacji, w przeciwieństwie do JavaScript. Ponieważ TypeScript bazuje na silnym typowaniu, warto przyjrzeć się bliżej konwersji typów, jej znaczeniu i sposobom, w jakie TypeScript ją obsługuje.
Konwersja typów w TypeScript i jej znaczenie
Konwersja typów to proces zmiany wartości z jednego typu danych na inny, na przykład przekształcenie tekstu w liczbę. Może odbywać się w sposób niejawny, gdy kompilator automatycznie konwertuje kompatybilne typy danych, gdy zajdzie taka potrzeba.
Konwersja typów może być również jawna, gdy w kodzie źródłowym wyraźnie określimy potrzebę zmiany typu. W takim przypadku mówimy o rzutowaniu typów.
Konwersja typów jest istotna, ponieważ umożliwia programistom pracę z różnymi formatami danych, zachowując jednocześnie zgodność z oczekiwanymi typami w TypeScript. Pomaga także zapewnić przewidywalne wyniki działania programu.
Jako programista, masz możliwość samodzielnego rzutowania typów, aby upewnić się, że Twój kod spełnia wymagania TypeScript dotyczące typów. Dzięki temu kod staje się czytelniejszy, bardziej zrozumiały i pomaga uniknąć błędów związanych z typami.
Konwersje typów wspomagają również walidację danych i pomagają TypeScript w programowaniu poprzez udostępnienie wbudowanych narzędzi, takich jak autouzupełnianie, które są powiązane z określonymi typami.
Typowym przykładem konwersji typów jest zmiana tekstu na liczby. Podczas przekształcania tekstu w liczby w TypeScript, aby uniknąć błędów, konwertowane są tylko ciągi znaków, które reprezentują liczby. Możesz zatem przekształcić teksty takie jak „1”, „235”, „5234.5”, ale nie teksty takie jak „cześć”.
Przyjrzyjmy się różnym sposobom konwertowania tekstu na liczby w TypeScript:
Asercja typu z użyciem „as”
Podczas pracy z różnymi typami danych w kodzie TypeScript, zdarza się, że dysponujesz informacjami o typie wartości, których TypeScript nie jest w stanie sam ustalić. W takich sytuacjach, informujesz TypeScript, jaki typ ma zmienna, zamiast pozwalać kompilatorowi na jego wywnioskowanie. Taki proces nazywamy asercją typu.
Asercja typu odbywa się za pomocą słowa kluczowego „as”. Aby wykorzystać asercję typu do konwersji tekstu na liczbę, najpierw ustawiamy typ tekstu na „unknown”. Dzieje się tak, ponieważ domyślnie TypeScript traktuje każdą konwersję tekstu na liczbę jako potencjalny błąd, ze względu na brak wystarczającego podobieństwa pomiędzy tymi typami. Aby przekształcić tekst na liczbę, wykonaj poniższe kroki:
/** * ustawiamy typ zmiennej numString na nieznany, w przeciwnym razie * TypeScript zinterpretuje ją jako typ string */ let numString: unknown = "23452"; // Konwersja typu za pomocą "as" - numString jest konwertowany na liczbę // i przypisany do zmiennej score let score = numString as number; console.log(score); console.log(score * 35);
Wynik:
23452 820820
Jak widać na podstawie wyników, zmienna numString została przekonwertowana na liczbę i przypisana do zmiennej score. Następnie możemy wykonywać na niej operacje matematyczne, takie jak mnożenie, ponieważ jej wartość jest liczbą.
Asercja typu za pomocą <>
Do konwersji tekstu na liczbę można również zastosować asercję typu z użyciem znaków <>. Działa ona dokładnie tak samo jak asercja ze słowem kluczowym „as”. Jedyna różnica dotyczy składni, która została przedstawiona poniżej:
let numString: unknown = "23452"; // Asercja typu za pomocą <> do przekonwertowania tekstu na liczbę let score = <number>numString; console.log(score); console.log(score * 35);
Wynik:
23452 820820
Wyniki są takie same jak w przypadku użycia słowa kluczowego „as”. Ponownie, pamiętaj, aby nie używać asercji typu do konwertowania tekstów, które nie zawierają wartości liczbowych.
Użycie konstruktora Number
Aby przekonwertować tekst na liczbę za pomocą konstruktora Number, przekaż tekst, który chcesz przekonwertować, do konstruktora Number, jak pokazano w poniższym fragmencie kodu:
let numString = "23452"; // typ wywnioskowany jako string let lives: string = "20"; // typ string dodany ręcznie // przekazanie tekstu do konstruktora Number w celu przekonwertowania na liczbę let score = Number(numString) console.log(score / 17) // przekazanie tekstu do konstruktora Number w celu przekonwertowania na liczbę let remainingLives = Number(lives); console.log(remainingLives - 4)
Wynik:
1379.5294117647059 16
Używając konstruktora Number, nie musisz ustawiać typu tekstu na „unknown”. Działa on zarówno z tekstami, których typ został zdefiniowany ręcznie, jak i z tymi, których typ został wywnioskowany jako „string”. Pamiętaj jednak, aby przekazywać teksty liczbowe, takie jak „514”. Jeśli przekażesz tekst, którego nie można przekonwertować na liczbę, wynikiem będzie NaN (Not-a-Number).
Użycie operatora jednoargumentowego plus (+)
Operator jednoargumentowy plus (+), który poprzedza pojedynczy operand, jest obliczany na podstawie tego operandu. Na przykład +2 daje liczbę 2, +542 daje liczbę 542 i tak dalej. Jeżeli jednak operand nie jest liczbą, operator jednoargumentowy plus (+) podejmie próbę przekonwertowania go na liczbę.
Przykładowo, +”98″ da wartość 98, a +”0″ da liczbę 0. Z tego powodu możemy wykorzystać operator jednoargumentowy plus (+) do konwersji tekstów na liczby. Jeśli przekażesz tekst, którego nie można przekonwertować na liczbę, wynikiem będzie NaN, jak pokazano poniżej:
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Użycie operatora jednoargumentowego plus (+) do przekonwertowania tekstu na liczby
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} jest typu ${typeof num1}`);
console.log(`${num2} jest typu ${typeof num2}`);
console.log(notNumber);
Wynik:
23452 jest typu number 973.82 jest typu number NaN
Użycie operatora jednoargumentowego plus (+) to dobry sposób na konwersję tekstów na liczby, ponieważ jest szybki i nie wykonuje żadnych dodatkowych operacji na operandach.
Użycie parseInt() i parseFloat()
Podobnie jak w JavaScript, TypeScript nie rozróżnia liczb całkowitych od liczb dziesiętnych, zwanych również liczbami zmiennoprzecinkowymi. Wszystkie są traktowane jako typ „number”. Należy jednak pamiętać, że zachowanie funkcji parseInt() i parseFloat() jest nieco inne.
parseInt() przyjmuje argument w postaci tekstu, analizuje go i zwraca liczbę całkowitą w określonym systemie liczbowym. parseFloat() również przyjmuje tekst, analizuje go i zwraca liczbę zmiennoprzecinkową.
Na przykład, jeśli przekażesz „897” zarówno do parseInt(), jak i parseFloat(), otrzymasz liczbę 897. Jeśli natomiast przekażesz 897.75 do obu tych funkcji, parseInt() zwróci 897, a parseFloat() zwróci 897.75.
Dlatego podczas konwersji tekstów reprezentujących liczby całkowite, użyj parseInt(), natomiast jeśli tekst reprezentuje liczbę z miejscami po przecinku, użyj parseFloat(), jak pokazano w poniższym przykładzie:
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Analizowanie tekstów numerycznych z liczbami dziesiętnymi")
console.log(`Użycie parseInt -> ${parseInt(numString1)}`);
console.log(`Użycie parseFloat -> ${parseFloat(numString1)}`);
console.log("Analizowanie tekstów numerycznych z liczbami całkowitymi")
console.log(`Użycie parseInt -> ${parseInt(numString2)}`);
console.log(`Użycie parseFloat -> ${parseFloat(numString2)}`);
console.log("Analizowanie tekstów, których nie można przekonwertować na liczbę")
console.log(parseInt(word));
console.log(parseFloat(word));
Wynik:
Analizowanie tekstów numerycznych z liczbami dziesiętnymi Użycie parseInt -> 897 Użycie parseFloat -> 897.75 Analizowanie tekstów numerycznych z liczbami całkowitymi Użycie parseInt -> 724 Użycie parseFloat -> 724 Analizowanie tekstów, których nie można przekonwertować na liczbę NaN NaN
Podsumowanie
Podczas pracy z tekstami, na przykład z danymi zwracanymi przez API, często trzeba je przekonwertować na liczby, aby móc na nich wykonywać operacje matematyczne. W takich przypadkach, rozważ metody konwersji tekstów na liczby, które zostały omówione w tym artykule.
Należy jednak zachować ostrożność podczas konwersji tekstu na liczbę, ponieważ w wyniku próby konwersji tekstu nienumerycznego można otrzymać NaN.
Aby uniknąć takiego błędu, upewnij się, że wszystkie teksty, które chcesz przekonwertować na liczbę, reprezentują liczby. Możesz także użyć instrukcji warunkowej „if”, aby sprawdzić, czy wynik nie jest NaN, co pomoże uniknąć błędów w kodzie.
Zachęcamy również do zapoznania się z najlepszymi bibliotekami i środowiskami wykonawczymi dla TypeScript, które pomogą w rozwoju Twoich umiejętności programistycznych.
newsblog.pl