TS

基礎知識

基礎類型：number string boolean array object undefined void

1. enum 枚舉
2. type interface
3. 聯合類型 | （聯合類型一次只能用一種類型）
4. 交叉類型 & （交叉類型每次都是多個類型的合並類型）
5. typeof 可以用來獲取一個變量聲明或者對象的類型

function toArray(x:number): Array<number>{
    return [x];
}
type Func = typeof toArray;

6. keyof 用來獲取一個對象中的key

interface Person {
    name:string;
    age:number;
}
type K1  = keyof Person; // 'name'|'age'

7. in 用來遍歷枚舉類型

type Keys = 'a'|'b'|'c';

type Obj = {
    [key in Keys]: number;
}
const obj: Obj = {
    a:1,
    b:2,
    c:3
}

8. extends 用以約束泛型

interface ILengthwise {
    length:number;
}
function loggingIdentity <T extends ILengthwise>(arg:T):T {
    return arg;
}
loggingIdentity({length:10,value:1})

9. 泛型：類型參數

interface A<T> {
    a:T;
}
const b:A<number> = {a:0}

10. partial 及 required
    Partial是將必選項變為可選項
    Required是將可選項變為必選項

interface A {
    name:string;
    age:string;
}
// interface B {
//     name?:string;
//     age?:string;
// }

type B = Partial<A>;

type C = Required <B>;
const a:A = {
    name:'',
    age:''
}

常見面試題

1. 你覺得ts的好處是什么
   1.1 ts是js的加強版，是js超集，給js添加了可選的靜態類型或者基於類的面向對象編程，ts的功能比js只多不少
   1.2 ts是面向編程的語言，包含了類、接口的概念
   1.3 ts在開發時就能給出編譯錯誤，js錯誤只能在運行時體現
   1.4 作為強類型語言，可以明確知道所有數據的類型

2. type和interface的區別
   用interface來描述數據結構，用type來描述類型,只是寫法不同

type setUser = (name:string) => void
interface setUser {
  (name:string): void
}

2.1 相同點
都能用來描述函數和對象
都允許extends
2.2 不同點
type可以有別名，可以聲明聯合類型，interface不行
type可以聲明具體某個數組元素的位置
type可做事情比interface多

type Name = string;
type a = b| c;
type PetList = [Dog, Pet];

3. 什么是泛型，泛型的具體使用

4. 如何基於一個已有的類型，擴展出一個大部分內容相似，但是部分區別的類型

interface Test {
  name:string;
  sex:number;
  height:string;
}
type Sex = Pick<TEst,'sex'>;
type WithoutSex = Omit<Test,'sex'>;

實戰

實現routerHelper
實現頁面倒計時

原理