TypeScript – deklaruj explicite zwłaszcza dane z JavaScriptu

Dzisiaj podczas przeklikiwania jednego ze scenariuszy w przeglądarce, coś poszło nie tak. Sprawdzam Unit Testy – wszystko działa. Trudno, tak bywa w „realu”. Debuguję i okazało się na końcu, że porównujemy:

"8" === 8

Skąd tam ten string???

Okazało się, że dane przychodzą z kontrolki x-editable dla angulara.

<span edit="4" onbeforesave="onbeforesave($data)"></span> 
$scope.onbeforesave = (value) => {
    return myService.update(value);
}

export class ChangeMaterialService {
    update(numberValue: number): boolean {
        // boom, in runtime value can be of type string
    }
}

typescript logo

Zadeklarowaliśmy elegancko, że value jest typem ‚number’ więc dlaczego przepuszcza stringa? Przy kompilacji (transpilacji?) TypeScriptu typ value to any. Zasady są takie, że any pasuje do wszystkiego. W runtime, mimo że value jakby nie pasuje do sygnatury metody update() to już nic nie jest sprawdzane – jesteśmy w świecie JavaScriptu i tam nie ma statycznego typowania.

Rozwiązaniem jest explicit ustawienie typu dla danych przychodzących w metodzie onbeforesave()

$scope.onbeforesave = (value) => {
    return myService.update(value);
}

powyższy kod się nie skompiluje więc musimy zmienić na:

$scope.onbeforesave = (value: string) => {
    return myService.update(Number(value));
}

lub na:

$scope.onbeforesave = (stringValue: string) => {
    let value = Number(stringValue);

    return myService.update(value);
}

Btw możecie podbić tą odpowiedź TypeScript Converting a String to a number na SO bo IMHO ta druga odpowiedź jest bardziej poprawna dla TypeScript.

Reklamy
Ten wpis został opublikowany w kategorii Programowanie i oznaczony tagami , , . Dodaj zakładkę do bezpośredniego odnośnika.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s