[TOC] ## :-: 類型約束 ``` // 約束變量必須為string類型，如果賦值為數字或其他類型則立馬報錯(靜態的，不需要運行) let say: string = "hello"; // 約束函數 function sum(a:number, b:number):number { return a + b; } let num:number = sum(123, 456); // 約束數組有兩種寫法 let nums:number[] = [1, 2, 3]; let nums1:Array<number> = [4, 5, 6]; // :void -- 表示函數沒有返回值 function never():void { console.log('xxx') } // :never -- 表示函數永遠不會有返回 function never():never { while (true) { // ··· 死循環 ··· } } ``` ## :-: 聯合類型 ``` // 約束變量可以是多種類型 let numStr:string|number = 123; numStr = 'abc'; ``` ## :-: 字面量類型 ``` // 字面量類型 約束變量只能賦值 "男" 或 "女" let gender: "男" | "女"; gender = "男"; gender = "女"; ``` ## :-: 函數重載 ``` // 約束函數傳統的a、b參數'保持一致' function xxx(a: string, b: string): string; function xxx(a: number, b: number): number; function xxx(a: string | number, b: string | number) { if (typeof a === "string" && typeof b === "string") { return a + b; } if (typeof a === "number" && typeof b === "number") { return a * b; } new Error("xxxxxxxx"); } xxx(123, 13); ``` ## :-: 類型別名 ``` // 將一種類型單獨抽離出來。(自定義類型) type Gender = "男" | "女"; let gender: Gender; gender = "女"; gender = "男"; ``` ## :-: 類型枚舉 ``` // 會參與編譯，用于后期可能會批量修改的變量值 enum _gender { male = "小哥哥", female = "小姐姐" } let gender:_gender = _gender["man"]; // '小哥哥' ``` ## :-: 定義接口 ``` // 定義接口(約束對象) interface User { name: string | null; age: number; sayHello: (text: string) => void; } let user: User = { name: null, age: 18, sayHello: function(content) { console.log(content); } }; user.sayHello("Hello World~"); // 三種約束函數的形式對比 type Condition1 = (n: number) => boolean; type Condition2 = { (n: number): boolean; }; interface Condition { (n: number): boolean; } // 接口的繼承 interface A { T1:string; } interface B { T2:number; } interface C extends A, B { T3:boolean; } let oA:C = { T1:"123", T2:456, T3:true } // oA 被賦值時必須為 T1:string,T2:number,T3:boolean 不能多也不能少，只能剛剛好 ``` ## :-: TS修飾符 ``` // readonly -- 被修飾的字段為只讀類型 (不在編譯結果中) interface user1 { readonly id: string; name?: string; // 可以為空 age: number; xxx: boolean; } const user1: user1 = { id: "id-001", // name: undefined, age: 18, xxx: true }; // user1.id = "id-002"; // 只讀，不能再次修改 user1.age = 19; user1.xxx = false; // 數組中用readonly修飾后，所有的成員不可被改變。(兩種寫法效果一致) // let arr1: readonly (string|number)[] = [11, "22", 33, "44", 55]; let arr1: ReadonlyArray<number|string> = [11, "22", 33, "44", 55]; // arr1[2] = " 只讀：不可改變，會報錯 "; arr1 = [1, 2, 3]; // 因為是let不是const賦值，arr1可以整個被修改。 ``` ## :-: TS類 ``` // 訪問修飾符(public、private)可以控制類中的某個成員的訪問權限 // - public -- 默認公開的，所有代碼均可訪問。 // - private -- 私有的，只有在類中可以訪問。不對外暴露，防止外部修改 class User3 { readonly id: string = `id-${+new Date()}`; // 不能改變 // name: string; gender: "男" | "女" = "男"; // 默認賦值 pid?: string; // 可空 private password: string = "123456"; // 私有屬性，不允許外部使用。 // public name:string -- 這種寫法是法語糖(簡寫)，會直接增加并修改this.name (只要加了修飾符就會觸發這個語法糖) constructor(public name: string, private _age: number) { // this.name = name; this.age = _age; } // ES6訪問器：用于控制屬性的訪問和讀取。如果將'set age'這個函數整個注釋掉，this.age將會是一個只讀的屬性。 set age(val: number) { // 可以通過各種條件來約束限制值的范圍 if (val < 18) this._age = 18; else if (val > 100) this._age = 100; else this._age = Math.floor(val); } get age() { return this._age; } } const user3 = new User3("xxx", 26.8); console.log(user3.age); // 26 user3.age = -300.5; // 18 ``` ## :-: 泛型 ``` // 泛型：是指附屬于函數、類、接口、類型別名之上的類型。 // 泛型相當于是一個類型變量，在定義時，無法預先知道具體的類型，可以用該變量來代替，只有到調用時才能確定它的類型。(自動推導) function take<T>(arr:T[], n:number):T[] { if (n >= arr.length) { return arr; } const newArr:T[] = []; arr.map((item, index) => index < n && newArr.push(item)); return newArr; } let newArr = take<string|number>([1, "2", 3, 4, "5"], 2); console.log(newArr); // [ 1, '2' ] :(string|number)[] take([1, true, 3], 5); // 自動推導返回類型 :(number|boolean)[] // 在類中使用泛型 class ArrayHelper<T> { constructor(private arr: T[]) {} // 語法糖 log(): T[] { return this.arr; } } new ArrayHelper([1, "2", null]).log(); // :(string|number|null)[] // 泛型約束：用于實現泛型的取值 interface hasNameProperty { name: string; } // 鴨子辯型法，通過繼承接口，可以約束傳入的obj必須包含name的屬性，并且為string類型。 function nameToUpperCase<T extends hasNameProperty>(obj: T): T { obj.name = "xxx"; return obj; } const o = { name: "kevin yuan", age: 22, gender: "男", xxx: "xxx" }; const newO = nameToUpperCase(o); console.log(newO.name, newO.xxx); // 多泛型 function mixinArray<T,K>( arr1:T[], arr2:K[] ) :(T|K)[] { return [...arr1,...arr2]; } mixinArray([1, 2, 3], ["a", "b", "c"]); // :(string|number)[] ```