skip to Main Content
String Enums W TypeScript

String enums w TypeScript

Jak typ danych może wyrazić dokładnie 1000 słów? enum String.

String może zawierać wszystkie słowa świata. Kiedy chcemy ograniczyć się tylko do kilku w TypeScirpt mogliśmy wykorzystać union types

Teraz (od wersji 2.4 – która powinna się wyjść lada dzień) mamy do dyspozycji możliwość tworzenia typów wyliczeniowych, które jako wartość mogą przyjmować łańcuchy znaków.
Czytaj resztę...
Tymczasowe Sprawdzanie Typów W Kodzie JavaScript Dzięki Visual Studio Code Oraz TypeScript

Tymczasowe sprawdzanie typów w kodzie JavaScript dzięki Visual Studio Code oraz TypeScript

Programistyczny edytor Visual Studio Code, jest napisany w TypeScript, co więcej każda nowa wersja Visual Studio Code przychodzi razem z nową wersją kompilatora TypeScript. Tak się składa, że oba produkty Microsoftu są ze sobą dobrze powiązane.

Ostania aktualizacja Visual Studio Code w wersji 1.12 (kwiecień 2017), przychodzi z kompilatorem TypeScript 2.3. Ta wersja otrzymała możliwość sprawdzania typów w kodzie JavaScript poprzez przełącznik --checkJs.

Możesz sprawdzić poprawność typów w kodzie JavaScript tymczasowo. Jeżeli dodasz na początku pliku .js komentarz // @ts-check, wtedy kompilator TypeScript przejdzie po typach i podkreśli na czerwono błędy.

Czytaj resztę...
TypeScript 2.3 – Generatory

TypeScript 2.3 – Generatory

W TypeScript 2.3, który pojawi się w maju. Jedną z nowych możliwości, dostępnych w języku, będzie możliwość korzystania z generatorów.

TypeScript goni z zmianami w pojawiającymi się JavaScript. Jak TypeScript goni za zmianami to ja też muszę.

Generator to funkcja, która potrafi zwracać wiele wartości. Potrafi uwaga, uwaga generować je, na przykład na podstawie poprzednich wartości.

Klasycznie jak funkcja coś zwraca to funkcja razem z zwróconą wartością kończy swój żywot. W przypadku generatorów one giną, gdy:

  • Wykonywanie kodu dojdzie do klamry zamykającą funkcję
  • Generator wyrzuci wyjątek
  • Generator zostanie przerwany

Kod:

Czytaj resztę...
Zapisywanie Ustawień W Przeglądarce; Fasada Dla LocalStorage Lub SessionStorage

Zapisywanie ustawień w przeglądarce; fasada dla localStorage lub sessionStorage

Moja gra The Ship Game nie wymaga back-endu w postaci serwera bazą danych. Jak zapisać dane bez bazy danych? Można postawić na to co daje nam współczesna przeglądarka i jej JavaScriptowe obiekty localStorage oraz sessionStorage.

Gdy popatrzymy na interfejs obiektów typu Storage, czyli localStorage i sessionStorage to on wygląda on następująco.

Notacja z typami według TypeScriptu

  • length: number – właściwość tylko do odczytu. Zwraca ilość danych przechowywanych w Storage.
  • clear(): void – czyści cały Storage z danych.
  • key(index: number): string – Zwraca i-ty klucz z Storage.
  • getItem(keyName: string): string – Wyciąga wartość pod kluczem keyName.
  • setItem(keyName: string, keyValue: string): void – Zapisuje wartość keyValue pod kluczem keyName.

Fajny interfejs do zapisywania stringów do bazy. A co z obiektami? Jakbym chciał zapisać takie coś:

Czytaj resztę...
TsLint – Utrzymywanie Kodu W Jednym Stylu I Zapobieganie Bólowi Głowy

TsLint – utrzymywanie kodu w jednym stylu i zapobieganie bólowi głowy

TsLint to TypeScriptowa wersja JsLinta…

Linty to programy które sprawdzają twój kod pod względem:

  • Czytelności
  • Łatwość utrzymania
  • Błędy funkcjonalne

TsLint w projekcie TheShipGame jest uruchamiany przez WebPacka:

test oznacza, że jest dopasowany do rozszerzeń .ts oraz .tsx. .ts to rozszerzenie standardowe dla TypeScript, natomiast .tsx oznacza podobnie do .jsx pliki korzystające z rozszerzonej składni używanej np. przez bibliotekę React.

Czytaj resztę...
TypeScript Dzielenie Kodu Na Wiele Plików, Moduły I WebPack – Krok Po Kroku

TypeScript dzielenie kodu na wiele plików, moduły i WebPack – Krok po kroku

Ostatnio skończyliśmy na HelloWorld, teraz skupimy się jak można podzielić nasz kod na wiele plików.

Kod TypeScript tak jak JavaScript dzieli się na moduły.

Aby umożliwić korzystanie z modułów w TypeScript należy z edytować tsconfig.json i dodać

Określając module określamy jaki wzorzec, akceptowany przez popularne ładowarki-pakietów. Zmiana ustawienia module zmienia kod, który jest generowany przez słowa kluczowe export i import

Czytaj resztę...
TypeScript I JQuery W Visual Studio Code – Krok Po Kroku

TypeScript i jQuery w Visual Studio Code – krok po kroku

Postanowiłem się nauczyć „nowego” języka – TypeScript. To język zaprojektowany przez Duńczyka Anders Hejlsberg współtwórcę C#.

A tak przy okazji języki programowania stworzone przez Duńczyków:

  • Anders Hejlsberg
    • Delphi
    • C#
    • TypeScript
  • Bjarne Stroustrup – C++
  • Rasmus Lerdorf – PHP

Dlaczego TypeScript?

TypeScript jest językiem opierającym się o JavaScript i tłumaczonym na JavaScript. Wynikiem pliku app.ts jest plik z kodem app.js.

TypeScript został wprowadzony po to, aby wprowadzić sprawdzanie poprawności typów. Świetnym bonusem jest lepsze podpowiadanie kodu przez InteliSense, przy wsparciu JSDoc otrzymujemy kawałki dokumentacji przy pisaniu kodu.

Istniejący kod JavaScript można uzbroić o same definicje typów, dzięki czemu Visual Studio Code będzie podpowiadać nam kod mimo, że nie został napisany w TypeScript.

Cel: Stworzenie środowiska pracy z TypeScript i jQuery

Skupię się na mimimum bez tysiąca bibliotek do z budowania projektu, wspierania EcmaScript 2015, wykorzystywania Sassa etc.

Bazuje na tym tutorialu, ale zauważyłem, że posiada kilka dziur w opisie oraz nie opisuje jak połączyć TypeScript z najpopularniejszą biblioteką JavaScript.

Czytaj resztę...
Back To Top