我有一个变量。
abc:number|string;
我如何检查它的类型?我想做的事情如下:
if (abc.type === "number") {
// do something
}
我有一个变量。
abc:number|string;
我如何检查它的类型?我想做的事情如下:
if (abc.type === "number") {
// do something
}
当前回答
在typescript中输入保护
要在条件语句之后确定变量的类型,可以使用类型保护。typescript中的类型保护如下所示:
一个允许你缩小某物类型的表达式 在一个条件块中。
换句话说,它是一个条件块中的表达式,typescript编译器从中有足够的信息来缩小类型。在类型保护的块内,类型将更加特定,因为编译器已经推断出关于类型的更多信息。
例子
declare let abc: number | string;
// typeof abc === 'string' is a type guard
if (typeof abc === 'string') {
// abc: string
console.log('abc is a string here')
} else {
// abc: number, only option because the previous type guard removed the option of string
console.log('abc is a number here')
}
除了typeof操作符,还有内置的类型保护,比如instanceof, in,甚至你自己的类型保护。
其他回答
我想补充的是,TypeGuards只适用于字符串或数字,如果你想比较一个对象使用instanceof
if(task.id instanceof UUID) {
//foo
}
下面是一种方法,如果你的变量类型是一个包含多个对象接口的联合,你想在其中进行决定:
interface A {
a: number;
}
interface B {
b: boolean;
}
let x: string | A | B = /* ... */;
if (typeof x === 'string') {
// x: string
} else if ('a' in x) {
// x: A
} else if ('b' in x) {
// x: B
}
如果你想确保你处理了每个选项,你可以添加一个耗尽性检查。一旦你处理了每个选项,TypeScript会注意到这个变量在此时已经没有可能的其他类型了。它通过赋予never类型来表达这一点。
如果我们添加一个最后的else分支,要求变量为never类型,我们将向类型检查器(以及我们自己)证明这个分支永远不会被调用:
// As long as a variable never holds a type it's not supposed to,
// this function will never actually be called.
function exhaustiveCheck(param: never): never {
throw Error('exhaustiveCheck got called somehow');
}
if (typeof x === 'string') {
// x: string
} else if ('a' in x) {
// x: A
} else if ('b' in x) {
// x: B
} else {
// x: never
exhaustiveCheck(x);
}
如果你忘记处理一个case,你会得到一个类型错误:
if (typeof x === 'string') {
// x: string
} else if ('b' in x) {
// x: B
} else {
// x: A
exhaustiveCheck(x); // TYPE ERROR: Argument of type 'A' is not
// assignable to parameter of type 'never'.
}
Type of可以用于此
if (typeof abc === "number") {
// number
} else if (typeof abc === "string"){
//string
}
其他答案是正确的,但当你处理接口时,你不能使用typeof或instanceof,因为接口不会被编译成javascript。
相反,你可以使用类型转换+函数check 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();
}
}
这是ES2017中编译后的JavaScript:
function start(vehicle) {
vehicle.drive();
if (vehicle.ringTheBell) {
const bike = vehicle;
bike.ringTheBell();
}
else {
const car = vehicle;
car.honkTheHorn();
}
}
因为Typescript 4.4你可以像下面这样做:
function foo(arg: unknown) {
const argIsString = typeof arg === "string";
if (argIsString) {
console.log(arg.toUpperCase());
}
}