小白晉級之路--TypeScript

一、ts語法中出現的問號

/* TypeScript
    當 product沒有值的時候，不訪問其 price屬性，
	當 product有值的時候再去訪問其 price屬性
*/
product?.price 

二、...運算符

（1）展開運算符

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
 
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

（2）剩餘操作符

let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]
 
// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined
 
// 也可以
function test(a, ...rest){
  console.log(a); // 1
  console.log(rest); // [2,3]
}
 
test(1,2,3)

三、typescript中的class與interface的區別

typescript中聲明一個類型，我們通常會有兩種做法：
1.使用class

  export default class state {
    userInfo: {
        name: string,
        age: number
    }
}

2.使用interface

 export interface STATE {
    userInfo : {
        name: string,
        age: number
    }
}

那麼這兩種聲明類型的方案有什麼區別？

由於typescript的宗旨是兼容js，運行時要擦除所有類型信息，因此interface在運行時是會被完全消除的。而class經過編譯後，在運行時依然存在。因此如果要聲明的類型只是純粹的類型信息，只需要聲明interface即可。