typescrip基礎

1.基礎類型

1.typescript一共有多少種類型，新增了哪幾個類型
    布爾，數字，字符串，數組，Object
    undefined，Null：null,undefined是全部類型的子類型,null和undefined可賦值給number類型的變量。
    元組：let x: [string, number];
    枚舉：enum Color {
            Red = 1, 
            Green = 2, 
            Blue = 4
          }
    Any
    Void：void類型沒什麼用，只能賦undefined和null
    never
注意：在寫類型的時候，只有Object和Array是開頭大寫的，其他的都是開頭小寫
2.數組的兩種聲明方式
3.元組和數組的不一樣之處（2點）
4.枚舉：編號，手動修改編號，映射
複製代碼

2.接口

interface LabelledValue {
  label: string;
  color?: string;
  readonly x: number;
  [propName: string]: any;
}
1.屬性只能夠多但不能少
2.可選屬性
3.只讀屬性
4.什麼是額外屬性檢查：對象字面量會通過額外屬性檢查，當將它們賦值給變量或做爲參數傳遞的時候。 若是一個對象字面量存在任何「目標類型」（這裏的任何目標指的是可選屬性，必須有的屬性，可能存在的屬性）不包含的屬性時，你會獲得一個錯誤。
5.處理額外屬性的三個方法
    使用類型斷言：createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
    添加額外屬性
6.可索引的類型：只要有【】括號，且後面的類型不是any，是number也罷，仍是聯合類型也罷，都是
  可索引的類型
    interface LabelledValue {
      [propName: string]: string;
      [index: string]: number;
      [age: string]: boolean;
      [width: string]: number;
      [height: string]: number;
-----------------上面是----------------------------------
      [propName: string]: any;
      [index: string]: any;
      [age: string]: any;
      [width: string]: any;
      [height: string]: any;
    }
  可索引的類型和和額外屬性檢查寫法上很像，可是有惟一的區別，就是對值的約束類型不同，
  額外屬性檢查必須是any
7.接口函數類型：
    聲明
    interface SearchFunc {
      (source: string, subString: string): boolean;
    }
    約束變量
    let mySearch: SearchFunc;
    類型約束：
        參數：
            變量名能夠隨意，可是(參數)對應位置的類型必須一致
            返回值的類型必需要和接口約束的類型一致
    mySearch = function(src: string, sub: string): boolean {
      let result = src.search(sub);
      return result > -1;
    }
    
8.類類型接口:
        類靜態部分與實例部分的區別:
        
        // 經過一個函數，做爲傳參約束實例部分
        interface ClockConstructor {
            new (hour: number, minute: number): ClockInterface;
        }
        // class實現這個接口，用於約束靜態部分
        interface ClockInterface {
            tick();
        }
        // 必須經過一個函數來約束，這個函數具備一下特色：
               傳入的參數：實例部分約束，傳入類和實例化用的參數
               返回的約束：靜態部分約束，
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}
        
        class DigitalClock implements ClockInterface {
            constructor(h: number, m: number) { }
            tick() {
                console.log("beep beep");
            }
        }
        class AnalogClock implements ClockInterface {
            constructor(h: number, m: number) { }
            tick() {
                console.log("tick tock");
            }
        }
        
        let digital = createClock(DigitalClock, 12, 17);
        let analog = createClock(AnalogClock, 7, 32);
複製代碼

3.類型兼容性

類型兼容性主要解決引用類型賦值的時候的類型檢測問題
1.對象賦值：賦值者屬性可多不可少，多餘屬性不檢測
interface Named {
    name: string;
}
let x: Named;
let y = { name: 'Alice', location: 'Seattle' }; // 多一個location，不檢測
x = y; // OK
2.函數賦值：參數名稱無論,類型一致，賦值者參數可少不能多
let x = (a: number) => 0;
let y = (b: number, s: string) => 0;
y = x; // OK
x = y; // Error 參數不能多
3.可選參數及剩餘參數
可選參數與必須參數是可互換的。 源類型上有額外的可選參數不是錯誤，目標類型的可選參數在源類型裏沒有對應的參數也不是錯誤。
4.類的兼容性：符合對象的兼容性，直觀實例屬性
class Animal {
//實例屬性number必須檢測
    feet: number;
// 靜態屬性name不用檢測
    static name：string；
// 構造屬性也不用檢測
    constructor(name: string, numFeet: number) { }
}
class Size {
    feet: number;
    constructor(numFeet: number) { }
}
let a: Animal;
let s: Size;
// 由於實例屬性一致的
a = s;  // OK
s = a;  // OK
類的私有成員和受保護成員
當檢查類實例的兼容時，若是目標類型包含一個私有成員，那麼源類型必須包含來自同一個類的這個私
有成員。 一樣地，這條規則也適用於包含受保護成員實例的類型檢查。 這容許子類賦值給父類，可是不能賦值給其它有一樣類型的類。

5.泛型：對於沒指定泛型類型的泛型參數時，會把全部泛型參數當成any比較。 而後用結果類型進行比較
檢測兩點：key一致  value的類型一致

// key和value的類型都一致，value類型沒有指定，默認是any
interface Empty<T> {
}
let x: Empty<number>;
let y: Empty<string>;
x = y;  //ok  
// key一致，可是vlue類型不一致，不兼容
interface NotEmpty<T> {
    data: T;
}
let x: NotEmpty<number>;
let y: NotEmpty<string>;
x = y;  // Error

對於函數檢測：
    
複製代碼

3.高級類型

1.交叉類型

2.聯合類型：聯合類型約束變量  和  聯合接口約束對象是不同的
    聯合類型約束變量：並集
    function padLeft(value: string, padding: string | number) {
        // padding 符合 string 或 number
    }
    聯合接口約束對象：交集
    interface Bird {
        fly();
        layEggs();
    }
    interface Fish {
        swim();
        layEggs();
    }
    function getSmallPet(): Fish | Bird {
        // 返回的對象只能使用Fish 和 Bird的共有屬性
    }
    let pet = getSmallPet();
    pet.layEggs(); // okay
    pet.swim();    // err  非共有的屬性
3.類型保護與區分類型
    3.1 類型斷言：<Fish>pet  方括號斷言類型
            let pet = getSmallPet();
            // 每個成員訪問都會報錯
            if (pet.swim) {
                pet.swim();
            }
            else if (pet.fly) {
                pet.fly();
            }
            添加類型斷言就OK了
            let pet = getSmallPet();
            if ((<Fish>pet).swim) {
                (<Fish>pet).swim();
            }
            else {
                (<Bird>pet).fly();
            }
    3.2 typeof類型保護
        typeof類型保護*只有兩種形式能被識別：
            typeof v === "typename"
            typeof v !== "typename"， "typename"必須是 "number"， "string"， "boolean"或 "symbol"。
    3.3 instanceof的右側要求是一個構造函數，TypeScript將細化爲：
        if (padder instanceof StringPadder) {
            padder; // 類型細化爲'StringPadder'
        }
    3.4可選參數：可選參數會被自動地加上 | undefined:也就是隻能不賦值或者賦值undefiend或者賦值對應的類型
        function f(x: number, y?: number) {
            return x + (y || 0);
        }
        f(1, 2);
        f(1);
        f(1, undefined); // Ok
        f(1, null); // err 只能賦值undefiend
    3.5可選屬性：只能不賦值或者賦值undefiend或者賦值對應的類型
        class C {
            a: number;
            b?: number;
        }
        let c = new C();
        c.b = 13;
        c.b = undefined; // ok
        c.b = null; // error, 'null' is not assign
        
    3.6若是編譯器不可以去除 null或 undefined，你可使用類型斷言手動去除。 語法是添加 !後綴：
        function fixed(name: string | null): string {
           // !後綴去除了null和undefined
           return name!.charAt(0)
        }
    3.7類型別名 type 能夠像接口那樣約束變量
        type Name = string;
        type NameResolver = () => string;
        聯合類型配合類型別名比較多
        type NameOrResolver = Name | NameResolver;
        function getName(n: NameOrResolver): Name {
            if (typeof n === 'string') {
                return n;
            } else {
                return n();
            }
        }
        類型別名和接口的區別：
            1.類型別名不能被 extends和 implements
            2.須要使用聯合類型或元組類型，這時一般會使用類型別名。
            type strOrNum = string | number
    3.8字符串字面量類型:容許你指定字符串必須的固定值
        3.8.1類型別名 聯合類型 類型保護配合使用，實現相似枚舉的功能
            type Easing = "ease-in" | "ease-out" | "ease-in-out";
            class UIElement {
                animate(dx: number, dy: number, easing: Easing) {
                    if (easing === "ease-in") {
            
                    }
                }
            }
        3.8.2容許你指定字符串必須的固定值能夠區分函數重載：
            // 固定傳入img
            function createElement(tagName: "img"): HTMLImageElement;
            // 固定傳入input
            function createElement(tagName: "input"): HTMLInputElement;

    
    













複製代碼