前言
类型保护是一种 TypeScript 技术，用于获取变量类型的信息，通常用于条件块中。类型保护是返回布尔值的常规函数，它接受一个类型并告知 TypeScript 是否可以将其缩小到更具体的值。类型保护具有独特的属性，可以根据返回的布尔值确保被测试的值属于某个集合类型。
类型保护的方式
TypeScript 使用一些内置的 JavaScript 运算符，例如typeof、instanceof和in运算符，用于判断对象是否包含某个属性。类型保护使你能够指示 TypeScript 编译器推断特定上下文中变量的特定类型，从而确保参数的类型与你指定的一致。
类型保护通常用于缩小类型范围，与特性检测非常相似，它允许你检测值的正确方法、原型和属性。因此，你可以轻松地弄清楚如何处理该值。
使用类型保护的主要方式有五种：
关键字
instanceof关键字
typeofin操作符类型保护缩小类型保护
自定义类型保护函数
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 string
console.log(typeof a) // string
} else {
// if there is no narrowing, type remains unknown
console.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
结论
TypeScript 类型保护有助于确保类型的值，从而改善整体代码流程。大多数情况下，建议使用 instanceof 类型保护、 typeof 类型保护或 in 类型保护来解决，但是，在绝对必要时你可以使用自定义类型保护。