typeScript断言 as

一、类型的断言 as

在一些时候ts无法获取具体的类型信息(HTMLElement),但是这些(HTMLImageElement)信息有又独特的属性和方法,此时就需要告诉ts当前的这个数据类型到底是那种（TS只允许类型断言转换为 更具体 或者 不太具体(any/unKnown) 的类型版本. 这种情况会导致ts类型混乱）

//断言1HTMLElement as HTMLImageElement
let test = document.getElementById("test") as HTMLImageElement
test.innerText = "xxx";
test.appendChild(document.createElement("div"));
test.onclick = function (){
    console.log("xxxx")
};
test.addEventListener("click",()=>{
    console.log("xxxx222")
})
test.src = "图片地址url"


//断言2
let str: string = "你好世界";
let str2: unknown = "你好世界";
// let num: number = str as number
//Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first  ==>TS不允许直接把确定的数据类型断言成另一个具体数据类型, 而是需要你首先去把这个类型断言成为一个unknown或者any这种不具体的,再把不具体的类型断言成另一个具体类型,这种规则可以防止不可能的强制转换;
let num: number = str as unknown as number


//断言3
class Person{
    sayHello(){
        console.log("hello")
    }
}
class Child extends Person{
    sayWorld(){
        console.log("世界")
    }
}
// child.sayHello
let c = new Child();
c.sayHello();//父类
c.sayWorld();

function fn(p: Person){
    p.sayHello();
    (p as Child).sayWorld()
}
fn(c)

二、非空断言 (!)

//可选类型msg?:string ==> undefined | string
function fn(msg?:string){
    //因为传入的msg有可能是为undefined的, 这个时候是不能执行uppercase方法
    //error: Object is possibly 'undefined'.
    console.log(msg!.toUpperCase())
}
//但是, 此时我们可以确定我们传入的参数有有值的, 这个时候就可以使用非空类型断言
//非空断言 使用的!, 表示可以确定某个标识(变量)是有值的, 可以跳过ts在编译阶段对它的检测
fn("hello")