如何在 Typescript 中获取变量类型？

Posted 2023-03-13

【中文标题】如何在 Typescript 中获取变量类型？

【英文标题】：How to get a variable type in Typescript?

【发布时间】：2016-06-03 10:52:35

【问题描述】：

我有一个变量。

abc:number|string;

我如何检查它的类型？我想做如下的事情：

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

【参考方案1】：

我已经搜索了很多如何检查我的字符串变量是否等于我的类型并且没有发现任何有意义的东西，因为运行时不存在任何类型的接口。 所以我们需要在运行时有这个。 我为我的情况找到了解决方案。

type MyType = 'one'|'two';
function isMyType(val: string): val is MyType 
    const list:MyType[] = ['one','two'];
    return list.includes(val as MyType);

...
const incomingValue = 'one';
if(isMyType(incomingValue)) 
    // here typescript see incomingValue as MyType

【参考方案2】：

从 Typescript 4.4 开始，您可以像下面这样：

function foo(arg: unknown) 
    const argIsString = typeof arg === "string";
    if (argIsString) 
        console.log(arg.toUpperCase());
    

【参考方案3】：

我怀疑您可以稍微调整您的方法并使用此处示例中的内容：

https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards

function isFish(pet: Fish | Bird): pet is Fish 
  return (pet as Fish).swim !== undefined;

【讨论】：

typescriptlang.org/docs/handbook/2/…

【参考方案4】：

打字稿中的类型保护

要在条件语句之后确定变量的类型，您可以使用类型保护。 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，甚至是您自己的类型保护。

【参考方案5】：

其他答案是正确的，但是当您处理 interfaces 时，您不能使用 typeof 或 instanceof，因为接口不会被编译为 javascript。

相反，您可以使用 typecast + function 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();
    

【讨论】：

这是接口与类的一个非常重要的区别！我希望有一种更惯用的方法来做到这一点，但这个建议效果很好。

【参考方案6】：

我已经检查了一个变量是否为布尔值，如下所示

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

我们也有

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

等等。

【讨论】：

为我工作，但只是为了了解类型！！，自定义类型必须使用instanceof

您需要导入 util 才能访问这些功能（例如，import isString from 'util';

现已弃用，请改用 if (typeof value === 'string')

【参考方案7】：

对于：

abc:number|string;

使用 JavaScript 运算符typeof：

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

【讨论】：

在instanceof 上添加了注释，尽管这不是被问到的问题。

【参考方案8】：

我想补充一点，TypeGuards 只适用于字符串或数字，如果你想比较一个对象，请使用 instanceof

if(task.id instanceof UUID) 
  //foo

【讨论】：

是的。值得注意的是，您可以使用 classes 执行此操作，但不能使用 TypeScript interfaces 或 types，因为它们在导出的 JavaScript 文件中不存在。