Jak uzyskać typ zmiennej w Typescript?


110

Mam zmienną.

abc:number|string;

Jak mogę sprawdzić jego typ? Chcę zrobić coś takiego jak poniżej:

if (abc.type === "number") {
    // do something
}

Odpowiedzi:


170

Dla :

abc:number|string;

Użyj operatora JavaScripttypeof :

if (typeof abc === "number") {
    // do something
}

TypeScript rozumie typeof🌹

Nazywa się to strażnikiem.

Więcej

Na zajęcia użyłbyś instanceofnp

class Foo {}
class Bar {} 

// Later
if (fooOrBar instanceof Foo){
  // TypeScript now knows that `fooOrBar` is `Foo`
}

Istnieją również inne rodzaje zabezpieczeń, np. inItp. Https://basarat.gitbooks.io/typescript/content/docs/types/typeGuard.html


6
Dodano uwagę, instanceofmimo że nie było to zadane pytanie.
— basarat,

42

Chciałbym dodać, że TypeGuards działają tylko na łańcuchach lub liczbach, jeśli chcesz porównać obiekt, użyj instanceof

if(task.id instanceof UUID) {
  //foo
}

5
Prawdziwe. Warto zauważyć, że można to zrobić za pomocą classes, ale nie za pomocą TypeScript interfaces lub types, ponieważ nie istnieją one w wyeksportowanym pliku JavaScript.
— joeytwiddle

10

Sprawdziłem zmienną, czy jest to wartość logiczna, czy nie, jak poniżej

console.log(isBoolean(this.myVariable));

Podobnie mamy

isNumber(this.myVariable);
isString(this.myvariable);

i tak dalej.


1
zadziałało dla mnie, ale tylko dla poznania typów !!, niestandardowe typy muszą używaćinstanceof
— Carlos.V

3
Będziesz musiał zaimportować, utilaby uzyskać dostęp do tych funkcji (np.import { isString } from 'util';
— 2Toad

Zrezygnowano teraz, zamiast tego użyj if (typeof value === 'string')
— Monir Khan

7

Inne odpowiedzi są poprawne, ale kiedy masz do czynienia z interfejsami , nie możesz używać typeof lub instanceof, ponieważ interfejsy nie są kompilowane do javascript.

Zamiast tego możesz użyć zabezpieczenia typecast + funkcji sprawdzania typu, aby sprawdzić swoją zmienną:

interface Car {
    drive(): void;
    honkTheHorn(): void;
}

interface Bike {
    drive(): void;
    ringTheBell(): void;
}

function start(vehicle: Bike | Car ) {
    vehicle.drive();

    // typecast and check if the function exists
    if ((<Bike>vehicle).ringTheBell) {
        const bike = (<Bike>vehicle);
        bike.ringTheBell();
    } else {
        const car = (<Car>vehicle);
        car.honkTheHorn();
    }
}

A oto skompilowany JavaScript w ES2017:

function start(vehicle) {
    vehicle.drive();
    if (vehicle.ringTheBell) {
        const bike = vehicle;
        bike.ringTheBell();
    }
    else {
        const car = vehicle;
        car.honkTheHorn();
    }
}

To bardzo ważne rozróżnienie dotyczące interfejsów i klas! Żałuję, że nie ma bardziej idiomatycznego sposobu, aby to zrobić, ale ta sugestia działa dobrze.
— Guss
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.