Categories ProgramowaniePosted on

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

Paweł SołtysiakLeave a Comment on 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.

Przykład

let easy = 'abc';
easy = 123 // Błąd: typ wyrażenia '123` nie można przypisać do typu 'string`.

Dzięki // @ts-check możesz testować sprawdzanie typów na kilku plikach zanim przeniesiesz cały kod na TypeScript. No i oczywiście // @ts-check może posłuszyć jako narzędzie do sprawdzania błędów w kodzie.

Kompilator TypeScript jest na tyle mądry, że korzysta z informacji zawartych w JSDoc.

/**
 * Adds two numbers and returns sum of them
 * 
 * @param {number} a 
 * @param {number} b 
 * @returns sum of a and b
 */
function add(a, b) {
    return a + b;
}


add('1', 2); //Bład: typ wyrażenia '1' w pierwszym argumencie nie można przypisać do typu 'number`.

Ustawienia globalne

Jeżeli ta funkcjonalność podoba się tobie tak bardzo, że chciałbyś ją użyć na wszystkich plikach, które masz repozytorium kodu. Można ustawić "javascript.implicitProjectConfig.checkJs": true w ustawieniach workspace (czyli otwarty katalog) lub w ustawieniach użytkownika. Przypomnę, że ustawienia workspace lub użytkownika znajdziesz przez File->Preferences->Settings lub poprzez skrót klawiaturowy Ctrl+,.

Ustawienia jsconfig.json; tsconfig.json

Włączenie sprawdzania typów w kodzie JavaScript może się odbyć poprzez modyfikację pliku jsconfig.json, aby zawierał takie wpisy:

{
    "compilerOptions": {
        "checkJs": true
    },
    "exclude": [
        "node_modules"
    ]
}

lub tsconfig.json.

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true
    },
    "exclude": [
        "node_modules"
    ]
}

Wyłączenie sprawdzania

W przypadku, gdy sprawdzamy wszystkie pliki w projekcie, możemy zachcieć, aby nie które z nich były wyłączone z kontroli typów. Możemy to zrobić poprzez wstawienie na początku pliku komentarza // @ts-nocheck.

lub możemy włączyć sprawdzanie typów na jedną linijkę tak:

let easy = 'abc'
// @ts-ignore
easy = 123 // brak błędu

Pamiętaj o poprawniej wersji

Aby korzystać z tej funkcjonalności potrzebujesz TypeScript w wersji 2.3 lub wyższej. Możesz sprawdzić z jakiej wersji TypeScript korzystasz poprzez Command Palette, skrót klawiaturowy to <Ctrl>+<Shift>+P i wpisanie TypeScript: Select TypeScript Version.

Podsumowanie

Co zostało poruszone w poście:

  • Możliwość włączenia sprawdzania typów w kodzie w JavaScript poprzez komentarz // @ts-check
  • Deklarowanie typów poprzez wykorzystanie komentarzy JSDoc
  • Została opisana możliwość włączenia sprawdzania typów na wielu plikach poprzez globalne i projektowe ustawienia
  • Co trzeba zrobić, aby sprawdzenie typów nie dotyczyło niektórych plików lub niektórych linijek tekstu.
  • Jak sprawdzić aktualnie używaną wersję TypeScript w Visual Studio Code?