TS-类型保护

说明

类型保护是可执行运行时检查的一种表达式，用于在特定的区块中保证变量属于某种确定的类型，可以在此区块中放心的引用此类型的属性，或者调用此类型的方法

TS在遇到以下这些条件语句时，会在语句的块级作用域内「收紧」变量的类型，这种类型推断的行为称作类型守卫(Type Guard)

in 属性判断

in操作符概念

说明

in操作符用来判断某个属性是否在指定的对象或其原型链中，若存在则in运算符返回true

语法


prop in object

prop: 一个字符串类型或者 symbol 类型的属性名或者数组索引（非symbol类型将会强制转为字符串） object：需要检查的对象(或其原型链)

EG

ts
interface Foo {
    foo: string;
}

interface Bar {
    bar: number;
}

type myClass = Foo | Bar

function test(input: myClass) {
    if ('foo' in input) {
        // 这里 input 的类型「收紧」为 Foo
        console.log(1)
    } else {
        // 这里 input 的类型「收紧」为 Bar
        console.log(2)
    }
}

test({bar:1})

typeof 类型判断

typeof 操作符概念

用于检测变量数据类型
typeof操作符返回一个字符串

常见返回结果

可能有如下这几种情况："number"、"string"、"boolean"、"object"、"function" 和 "undefined"

注意

Array,Null等特殊对象使用typeof一律返回object

EG

ts
function test(text: string | number) {
    if (typeof text == "string") {
        // 这里 text 的类型「收紧」为 string
        console.log(1)
    } else {
        // 这里 text 的类型「收紧」为 number
        console.log(2)
    }
}

test(15)

特殊点

typeof类型保护只支持两种形式：typeof v === "typename" 和 typeof v !== typename "typename" 必须是 "number"， "string"， "boolean" 或 "symbol"
但是TS并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护

instanceof 实例判断

instanceof概念

说明

用于判断一个变量是否属于某个对象的实例

EG

ts
//实例判断  
class Foo {
    foo="abc"
}

class Bar {
    bar=123
}


function test(input: Foo | Bar) {
    if(input instanceof Foo){
        //这里input的类型「收紧」为 Foo
        console.log(input,typeof input)
    }else{
         //这里input的类型「收紧」为 bar
         console.log(input,typeof input)
    }
}

test({bar:123})

字面量类型保护

EG

ts
type myRules1 = {
    id: number,
    name: string,
    success: 1
}

type myRules2 = {
    id: number,
    name: string,
    success: 0
}

function test(input: myRules1 | myRules2) {
    if (input.success === 1) {
        console.log("login success")
    } else {
        console.log("login falied")
    }
}

test({id:1,name:"mi",success:0})

自定义类型保护(也称为类型保护函数)

is 类型谓词

说明

TS中is关键字也被称为类型谓词，用于判断一个变量属于某个接口或类型

语法

ts
prop is object

常用场景

is关键字一般用于函数返回值类型中，判断参数是否属于某一类型，并根据结果返回对应的布尔类型

EG

ts
//自定义类型保护  
function test(input:number): input is number  {
    let result = typeof input === "number"
    console.log(result,typeof result)
    return result
}

test(100)

扩展函数

自定义类型保护扩展

ts
const isNumber = (val: unknown): val is number => typeof val === 'number'
const isString = (val: unknown): val is string => typeof val === 'string'
const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
const isFunction = (val: unknown): val is Function => typeof val === 'function'
const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object'

function isPromise<T = any>(val: unknown): val is Promise<T> {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}

const objectToString = Object.prototype.toString
const toTypeString = (value: unknown): string => objectToString.call(value)
const isPlainObject = (val: unknown): val is object => toTypeString(val) === '[object Object]'

目录

说明

分类