TypeScript 中的问号+冒号双问号问号+点感叹号+点

Posted 2023-02-18 冰雪奇缘lb

?:

?: 是指可选参数，可以理解为参数自动加上undefined

function fun(x: number, y?: number)  // 可选参数
    return x + (y || 0);

fun(1); // 1
fun(1, null); // error, 'null' is not assignable to 'number | undefined'
interface IPro 
  id: string | number;
  page: number;
  key?: string; // 可选属性

---

??

?? 和 || 的意思相似，但是又有区别，?? 相较 || 比较严谨, 当值等于0 的时候 || 就把他给排除了，但是 ?? 不会

console.log(null || 3)   // 3
console.log(null ?? 2)     // 2

console.log(undefined || 2)      // 2
console.log(undefined ?? 2)      // 2

console.log(0 || 2)       // 2
console.log(0 ?? 2)      // 2

---

?.

?. 的意思基本和 && 是一样的，a ?. b 相当于 a && a.b ? a.b : undefined

const a = 
   b:  c: 7 
;
console.log(a?.b?.c);     //7
console.log(a && a.b && a.b.c);    //7

举例：有一个数据 data， 它的属性值可能为 null，undefined，通常我们的写法是直接上 if 判断啥的，然后再取 data 中的属性，但是有了问号点 ?. 写法就简单很多了

---

!.

!. 的意思是断言，告诉 ts 该对象里一定有某个值

const inputRef = useRef<htmlEInputlement>(null);
// 定义了输入框，初始化是 null，但是你在调用他的时候相取输入框的 value，这时候 dom 实例一定是有值的，所以用断言
const value: string = inputRef.current!.value;
// 这样就不会报错了