当前位置：首页 > news >正文

如何在 TypeScript 中使用类型保护

news 2025/6/13 19:56:26

前言

类型保护是一种 TypeScript 技术，用于获取变量类型的信息，通常用于条件块中。类型保护是返回布尔值的常规函数，它接受一个类型并告知 TypeScript 是否可以将其缩小到更具体的值。类型保护具有独特的属性，可以根据返回的布尔值确保被测试的值属于某个集合类型。

类型保护的方式

TypeScript 使用一些内置的 JavaScript 运算符，例如typeof、instanceof和in运算符，用于判断对象是否包含某个属性。类型保护使你能够指示 TypeScript 编译器推断特定上下文中变量的特定类型，从而确保参数的类型与你指定的一致。

类型保护通常用于缩小类型范围，与特性检测非常相似，它允许你检测值的正确方法、原型和属性。因此，你可以轻松地弄清楚如何处理该值。

使用类型保护的主要方式有五种：

关键字instanceof
关键字typeof
in操作符类型保护
缩小类型保护
自定义类型保护函数

`instanceof`类型保护

instanceof是一个内置的类型保护，可用于检查某个值是否是给定构造函数或类的实例。使用此类型保护，我们可以测试某个对象或值是否派生自某个类，这对于确定实例类型的类型非常有用。


interface Accessory {brand: string;}class Necklace implements Accessory{kind: string;brand: string;constructor(brand: string, kind: string) {    this.brand = brand;this.kind = kind;}}class bracelet implements Accessory{brand: string;year: number;constructor(brand: string, year: number) {    this.brand = brand;this.year = year;}}const getRandomAccessory = () =>{return Math.random() < 0.5 ?new bracelet('cartier', 2021) :new Necklace('choker', 'TASAKI');}let Accessory = getRandomAccessory();if (Accessory instanceof bracelet) {console.log(Accessory.year);}if (Accessory instanceof Necklace) {console.log(Accessory.brand);    }

上面的函数getRandomAccessory返回一个Necklace或bracelet对象，因为它们都实现了该Accessory接口。和的构造函数签名Necklace不同bracelet，instanceof类型保护会比较两个构造函数签名来有效地确定类型。

`typeof`类型保护

typeof类型保护用于确定变量的类型。typeof类型保护被认为非常有限且浅显。它只能确定 JavaScript 识别的以下类型：

Boolean
String
Bigint
Symbol
Undefined
Function
Number

其他的typeof 类型保护只会返回 object 。

typeof 类型保护有以下两种写法：


typeof v !== "typename"typeof v === "typename"
`typename` 可以是 `string` 、 `number` 、 `symbol` 或 `boolean` 。

在下面的示例中， StudentId 具有一个 string | number 类型的联合参数条目。我们可以看到，如果变量是 string ，则打印 Student ；如果变量是 number ，则打印 Id 。 typeof 类型保护帮助我们从 x 中提取类型：

typescript
function StudentId(x: string | number) {if (typeof x == 'string') {console.log('Student');}if (typeof x === 'number') {console.log('Id');}
}
StudentId(`446`); //prints Student
StudentId(446); //prints Id

`in`操作符类型保护

in 类型保护检查对象是否具有特定属性，并以此区分不同类型。它通常返回一个布尔值，指示该属性是否存在于该对象中。它用于缩小范围，以及检查浏览器是否支持。

基本语法：

 propertyName in objectName// 在下面的例子中， in 类型保护检查属性 house 是否存在。如果存在，则返回布尔值 true ；如果不存在，则返回 false 。"house" in { name: "test", house: { parts: "door" } }; // => true
"house" in { name: "test", house: { parts: "windows" } }; // => true
"house" in { name: "test", house: { parts: "roof" } }; // => true
"house" in { name: "test" }; // => false
"house" in { name: "test", house: undefined }; // => true// 另一个 in 类型保护如何工作的类似示例如下所示
interface Pupil {ID: string;}interface Adult {SSN: number;}interface Person {name: string;age: number;}let person: Pupil | Adult | Person = {name: 'Britney',age: 6};const getIdentifier = (person: Pupil | Adult | Person) => {if ('name' in person) {return person.name;}else if ('ID' in person) {return person.ID}return person.SSN;}

缩小类型保护

通过缩小检查表达式的值，两个变量相等，意味着两个变量的类型必须相同。如果一个变量的类型未知，但它等于另一个具有精确类型的变量，则 TypeScript 会根据已知变量提供的信息缩小第一个变量的类型：


function getValues(a: number | string, b: string) {if(a === b) {// this is where the narrowing takes place. narrowed to stringconsole.log(typeof a) // string} else {// if there is no narrowing, type remains unknownconsole.log(typeof a) // number or string}
}

上面如果变量 a 等于变量 b ，则两者必须具有相同的类型。在这种情况下，TypeScript 会将其范围缩小为字符串。如果不进行范围缩小， a 的类型仍然不明确，因为它可能是数字，也可能是字符串。

自定义类型保护函数

创建自定义类型保护通常是使用类型保护的强大选项。当你自己编写自定义类型保护时，虽然可以检查的内容没有任何限制。但是如果自定义类型保护编写不正确，则可能导致很多的错误。

示例

typescript
interface Necklace{kind: string;brand: string;
}
interface bracelet{brand: string;year: number;
}
type Accessory = Necklace | bracelet;const isNecklace = (b: Accessory): b is Necklace => {return (b as Necklace).kind !== undefined
}
const Necklace: Accessory = {kind: "Choker", brand: "TASAKI"};
const bracelet: Accessory = {brand: "Cartier", year: 2021};
console.log(isNecklace(bracelet)) //Logs false
console.log(isNecklace(Necklace)) //Logs true