一、类型的断言?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")
|