TS中特殊符合的用法与常用场景 !、 !!、 ?、 ??

一. 感叹号用法

1） !的用法——!obj

变量前使用表示取反；
可将变量转为boolean类型： null、undefined、空字符串 取反之后都为true；

2）!的用法——obj!

变量后使用表示类型推断排除 null、 undefined，告诉TS此处一定有值

3）!!的用法——!!obj

!! 用于类型判断，在 ! 之后再做取反

const obj = {
    a: 1,               // !obj['a'] 为false;     !!obj['a']  为true;
    b: '',                // !obj['b'] 为true;    !!obj['b']  为false;
    c: 'test',          // !obj['c'] 为false;    !!obj['c']  为true;
    d: null,            // !obj['d'] 为true;    !!obj['d']  为false;
    e: undefined,        // !obj['e'] 为true;    !!obj['e']  为false;
    f: {},                // !obj['f'] 为false;    !!obj['f']  为true;
    g: { test: 'test'}    // !obj['g'] 为false;    !!obj['g']  为true;
    h: []                // !obj['h'] 为false;    !!obj['h']  为true;
    i: 0                // !obj['i'] 为true;    !!obj['h']  为false;
}

 4）!!的用法——obj!!

变量后使用表示类型推断排除 null、 undefined，告诉TS此处一定有值


例子
　　const uploadRef = ref<UploadInstance>();
　　uploadRef.value!.clearFiles(); // 给uploadRef断言

 

二.问号的用法

1）？的用法

 const obj = res?.data || {}; // obj是从接口中取到的数据
 const dataError = obj.a.b;  // 若obj为空，则此时会报错
 const dataSafe = obj?.a?.b;  // 相当于 const dataSafe = obj && obj.a && obj.a.b  ? obj.a.b : undefined;

 

? 表示该参数是一个可选参数；
当使用某一个对象中的属性时，若无法确定该对象是否会为空就需要在后面加上一个问号来进行判空处理，表示若不为空时再去访问属性。

 

2）??的用法

const foo = str ??   'default';  //  若str 为 null 或 undefined， foo为default

只有当左侧为null或者undefined时，才会返回右侧的数；主要用于设置默认值