迹忆客 专注技术分享

使用 typeof 运算符检查 TypeScript 中变量的类型，例如 if (typeof myVar === 'string') {}。 typeof 运算符返回一个字符串，该字符串指示值的类型，并且可以用作 TypeScript 中的类型保护。

const myVar: string | number = 'hello world';

console.log(typeof myVar); // 👉️ "string"

if (typeof myVar === 'string') {
  console.log(myVar.toUpperCase()); // 👉️ "HELLO WORLD"
}

// ✅ Use instanceof for classes
class Person {}
const person = new Person();
console.log(person instanceof Person); // 👉️ true

const err = new Error('Something went wrong');
console.log(err instanceof Error); // 👉️ true

// ✅ Use Array.isArray to check if array
console.log(Array.isArray([1, 2, 3])); // 👉️ true

我们使用 typeof 运算符来检查 TypeScript 中变量的类型。

运算符返回一个字符串，指示值的类型，可以用作类型保护。

const myVar: string | number = Math.random() > 0.5 ? 'Hello' : 1000;


// 👉️ myVar has type string or number here

if (typeof myVar === 'string') {
  // 👇️ myVar has type string here
  console.log(myVar.toUpperCase());
} else {
  // 👇️ myVar has type number here
  console.log(myVar.toFixed(2));
}

myVar 变量使用联合类型进行类型化，并且可以具有字符串或数字类型。

我们不能直接访问变量上的字符串内置方法，因为它可能是一个数字。

在我们的 if 条件中，我们检查 myVar 的类型是否为字符串，因此 TypeScript 知道该变量在 if 块中存储了一个字符串。

变量可能存储的唯一其他可能类型是数字，因此变量在 else 块中被键入为数字。

以下是使用 typeof 运算符的一些示例。

console.log(typeof 'hello'); // 👉️ "string"
console.log(typeof 100); // 👉️ "number"
console.log(typeof true); // 👉️ "boolean"
console.log(typeof [1, 2, 3]); // 👉️ "object"
console.log(typeof {}); // 👉️ "object"
console.log(typeof function example() {}); // 👉️ "function"
console.log(typeof NaN); // 👉️ "number"
console.log(typeof undefined); // 👉️ "undefined"
console.log(typeof null); // 👉️ "object"
console.log(typeof class A {}); // 👉️ "function"

请注意 ，将 typeof 运算符与数组一起使用会返回对象。

要检查变量是否存储在数组中，请使用 Array.isArray() 方法。

const arr: string[] = ['a', 'b', 'c'];

console.log(Array.isArray(arr)); // 👉️ true

Array.isArray 方法返回一个布尔结果 - 如果传入的值是一个数组，则返回 true，否则返回 false。

NaN（不是数字）的类型是数字。 如果我们需要检查特定值是否为 NaN，请使用 Number.isNaN 方法。

const example = Number('hello');
console.log(example); // 👉️ NaN

if (Number.isNaN(example)) {
  console.log('Passed in value is NaN');
}

如果传入的值的类型为数字并且为 NaN，则 Number.isNaN 方法将返回 true。

当我们执行 typeof null 时，typeof 运算符返回“object”。

console.log(typeof null); // 👉️ "object"

如果要检查变量是否存储空值，请不要使用 typeof 运算符，而是直接检查。

const example = null;

if (example === null) {
  console.log('Variable stores a null value');
}

注意 ，typeof 运算符始终返回一个字符串。 一个非常常见的错误是执行以下操作。

const myVar = undefined;

if (typeof myVar === undefined) {
  console.log('myVar is undefined');
} else {
  console.log('👉️ This block runs');
}

运行示例中的 else 块是因为我们正在检查 myVar 的类型是否等于未定义的值。 这计算结果为 false，因为 typeof myVar 返回一个“未定义”字符串，而不是未定义的值。

typeof 运算符为类返回“函数”。 这是因为 JavaScript（和 TypeScript）中的类只是函数的语法糖。

如果我们需要检查变量是否存储特定类的实例，请使用 instanceof 运算符。

class Person {}

const person = new Person();

if (person instanceof Person) {
  console.log('value is an instance of Person');
}

instanceof 运算符返回一个布尔值，指示构造函数的原型属性是否出现在对象的原型链中。

person 对象是使用 Person 类创建的，因此它是该类的一个实例。

instanceof 运算符在 TypeScript 中非常有用，因为它可以用作类型保护。

class Person {
  walk() {
    console.log('person is walking');
  }
}
class Animal {
  run() {
    console.log('animal is running');
  }
}

function example(x: Person | Animal) {
  // 👉️ x is type Person or Animal here
  if (x instanceof Person) {
    // 👇️ x is type Person here
    x.walk();
  } else {
    // 👇️ x is type Animal here
    x.run();
  }
}

该函数采用 Person 或 Animal 类型的参数，因此在访问特定于类的方法之前，我们必须检查传递给函数的类的实例。