ts里面的 ! 和 ? 还有 as以及各种符号的意义以及使用

!用法

• 用在变量前表示取反
• 用在赋值的内容后时，使null和undefined类型可以赋值给其他类型并通过编译

let y:number

y = null        // 无法通过编译
y = undefined   // 无法通过编译

y = null!
y = undefined!

// 由于x是可选的，因此parma.x的类型为number | undefined，无法传递给number类型的y，因此需要用x!
interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x!
    return y
}

如果存在空情况的判断并赋具体值时，可以不用!，但是如果要想令y存在等于undefined的情况还是需要用!

interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x || 1    // 如果为undefined，返回y=1，如果不为undefined，则返回parma.x的值
    return y
}

?用法

• 除了表示可选参数外
• 当使用A对象属性A.B时，如果无法确定A是否为空，则需要用A?.B，表示当A有值的时候才去访问B属性，没有值的时候就不去访问，如果不使用?则会报错

// 由于函数参数可选，因此parma无法确定是否拥有，所以无法正常使用parma.x，
// 使用parma?.x向编译器假设此时parma不为空且为IDemo类型，同时parma?.x无法保证非空，
// 因此使用parma?.x!来保证了整体通过编译
interface IDemo {
    x: number
}

let y:number

const demo = (parma?: IDemo) => {
    y = parma?.x!
    console.log(parma?.x)   // 只是单纯调用属性时就无需!    
    return y
}
    
// 如果使用y = parma!.x!是会报错的，因为当parma为空时，是不拥有x属性的，会报找不到x的错误

但是?用法只能读操作而不能写操作，对一个可能为空的属性赋值是不会被编译通过的，此时还需用用到类型断言

interface IDemo {
    x: number
}

// 编译报错，不能赋值给可选属性
const demo = (parma?: IDemo) => {
    parma?.x = 1    
}
    
// 使用类型断言  
const demo = (parma?: IDemo) => {
    let _parma = parma as IDemo
    _parma.x = 1
}

类型断言 as

把一个大的范围断言成小的、精确的范围

type Method = 'GET' | 'POST'
function dd(url: string, method: Method) {
    console.log('lll');

};
let option = {
    url: 'https:',
    method: 'POST'
}
// dd(option.url, option.method)第二个参数会报错的,因为option.method的值是个字符串类型，
// 而不是自己定义的Method类型
// 可以用类型断言 as 因为string类型是大的范围，缩小到'POST'和'GET'这种小范围的类型
dd(option.url, option.method as Method)


// 当然也可以给option定义一个类型
type getOption = {
    url: string,
    method: Method
}
let option：getOption  = {
    url: 'https:',
    method: 'POST'
}
dd(option.url, option.method)

非空类型断言 ！

表示确定某个标识符是有值的，跳过ts在编译阶段对它的检测

function aa(value?:string){
    //加上 ! 的意思是确保value一定是有值的
    console.log(value!.length);
}
aa('ppp')；

可选链操作符 ?.

它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行。

type person = {
    name: string,
    age: number,
    friend?: {
        name: string,
        age?: number
    }
}
let p: person = {
    name: '张三',
    age: 10,
}
console.log(p.friend?.name);

?? 和 !!的作用

• !! 将一个其他类型转换成boolean类型，类似于Boolean()
• ?? 空值合并操作符，当操作符的左侧是null或者undefined时，返回其右侧操作数，否则返回左侧操作数

let ss:string|null|undefined=undefined;
console.log(ss??'你好');
// ss??'你好' 可以给ss添加默认值 '你好' 意思就是如果 ss有值而且不是null和undefined时，
// ss就是上面赋给的值，如果是null或者undefined，ss的值就是默认值'你好'