Як отримати тип змінної в Typescript?


110

У мене є змінна.

abc:number|string;

Як я можу перевірити його тип? Я хочу зробити щось на кшталт нижче:

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

Відповіді:


168

Для:

abc:number|string;

Використовуйте оператор JavaScripttypeof :

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

TypeScript розуміє typeof🌹

Це називається типовою охороною.

Більше

Для класів ви б використовували, instanceofнаприклад

class Foo {}
class Bar {} 

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

Існують також інші типи охорони, наприклад, inтощо. Https://basarat.gitbooks.io/typescript/content/docs/types/typeGuard.html


6
Додано примітку, instanceofхоча це не було задане питання.
— базарат

42

Я хотів би додати, що TypeGuards працює лише на рядках або числах, якщо ви хочете порівняти об'єкт використання instanceof

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

5
Правда. Варто зазначити, що ви можете це зробити з classes, але не з TypeScript interfaces або types, оскільки вони не існують у експортованому файлі JavaScript.
— joeytwiddle

10

Я перевірив змінну, якщо вона булева чи ні, як показано нижче

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

Так само і у нас

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

і так далі.


1
працював для мене, але просто для того, щоб знати типи !!, користувальницькі типи мають використовуватиinstanceof
— Carlos.V

3
Вам потрібно імпортувати utilдля доступу до цих функцій (наприклад,import { isString } from 'util';
— 2Toad

Оприлюднено зараз, використовуйте if (typeof value === 'string') замість цього
— Monir Khan

7

Інші відповіді вірні, але коли ви маєте справу з інтерфейсами, ви не можете використовувати typeof або instanceof, оскільки інтерфейси не компілюються в JavaScript.

Натомість ви можете використовувати typecast + функцію перевірки typeguard для перевірки змінної:

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();
    }
}

І це складений JavaScript у ES2017:

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

Це дуже важлива відмінність щодо інтерфейсів проти класів! Мені б хотілося, щоб це було ідіоматичнішим, але ця пропозиція працює добре.
— Гасс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.