• 你知道TypeScript的类型保护有哪些吗?
  • 发布于 1周前
  • 66 热度
    0 评论
TypeScript 的 类型保护(Type Guards)是一种确保在代码运行时可以更精确地处理特定类型的方法。通过类型保护,TypeScript 能够根据特定的条件(如值的属性或操作方式)推断变量的类型,从而减少类型错误的可能性。

常见的几种类型保护方式:
1.typeof 类型保护
2.instanceof 类型保护
3.in 操作符
4.自定义类型保护函数(Type Predicates)

5.字面量类型守护(Discriminated Unions)


1. typeof 类型保护
typeof 是 JavaScript 中的一个操作符,TypeScript 使用它来检查基本数据类型(如 string, number, boolean)。常用于保护原始类型。

示例:
function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log("The value is a string:", value.toUpperCase());
  } else {
    console.log("The value is a number:", value.toFixed(2));
  }
}
// 堆代码 duidaima.com
printValue("Hello"); // The value is a string: HELLO
printValue(123.456); // The value is a number: 123.46
在这个例子中,typeof 通过检查 value 是 string 还是 number 来选择合适的操作。

2. instanceof 类型保护
instanceof 检查某个对象是否是另一个对象的实例(即其构造函数的原型是否出现在该对象的原型链中)。适用于类实例的类型保护。

示例:
class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // Safe to call bark() here
  } else {
    animal.meow(); // Safe to call meow() here
  }
}

const myDog = new Dog();
const myCat = new Cat();

makeSound(myDog); // Woof!
makeSound(myCat); // Meow!
在这个例子中,instanceof 检查对象是否是 Dog 或 Cat 的实例,以选择调用哪个方法。

3. in 操作符
in 操作符检查对象中是否存在某个属性,这对于联合类型中可能包含不同属性的情况非常有用。

示例:
interface Car {
  drive(): void;
}

interface Boat {
  sail(): void;
}

function move(vehicle: Car | Boat) {
  if ("drive" in vehicle) {
    vehicle.drive(); // Safe to call drive() here
  } else {
    vehicle.sail(); // Safe to call sail() here
  }
}

const car: Car = {
  drive() {
    console.log("Driving the car");
  },
};

const boat: Boat = {
  sail() {
    console.log("Sailing the boat");
  },
};

move(car);  // Driving the car
move(boat); // Sailing the boat
这里,in 操作符检查 vehicle 是否有 drive 属性,以此决定执行 drive() 或 sail()。

4. 自定义类型保护函数(Type Predicates)
通过使用 类型谓词(Type Predicates),可以创建自定义的类型保护函数。类型谓词的语法是:param is Type,它表明如果函数返回 true,则 param 的类型为 Type。

示例:
interface Fish {
  swim(): void;
}

interface Bird {
  fly(): void;
}

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

function moveAnimal(animal: Fish | Bird) {
  if (isFish(animal)) {
    animal.swim(); // TypeScript knows `animal` is a Fish
  } else {
    animal.fly(); // TypeScript knows `animal` is a Bird
  }
}

const fish: Fish = {
  swim() {
    console.log("The fish is swimming");
  },
};

const bird: Bird = {
  fly() {
    console.log("The bird is flying");
  },
};

moveAnimal(fish); // The fish is swimming
moveAnimal(bird); // The bird is flying
在这个例子中,isFish 是一个自定义类型保护函数。它检查 animal 是否为 Fish,并根据类型来调用相应的方法。

5. 字面量类型守护(Discriminated Unions)
字面量类型守护是通过在联合类型中引入一个区分字段(discriminant field)来实现的。通常在每个类型中使用一个固定的字面量属性来进行类型保护。

示例:
interface Square {
  kind: "square";
  size: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Rectangle | Circle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "square":
      return shape.size * shape.size;
    case "rectangle":
      return shape.width * shape.height;
    case "circle":
      return Math.PI * shape.radius * shape.radius;
    default:
      return 0;
  }
}

const square: Square = { kind: "square", size: 5 };
console.log(getArea(square)); // 25
在这个例子中,Shape 类型是由 Square, Rectangle 和 Circle 组成的联合类型,它们都有 kind 字段,通过这个字段我们可以区分出当前的具体类型并相应处理。

总结
TypeScript 提供了多种类型保护方式来安全地处理联合类型或复杂的类型结构:
typeof: 用于检查基本数据类型 (string, number, boolean)。
instanceof: 用于检查对象是否是某个类的实例。
in: 用于检查对象是否具有某个属性。
自定义类型保护函数: 通过类型谓词创建自定义的类型保护函数。

字面量类型守护(Discriminated Unions): 使用区分字段来区分联合类型中的不同类型。


这些类型保护方式可以帮助你在 TypeScript 中更安全地编写代码,并减少运行时错误。
用户评论