【TypeScript】02 面向對象

【聯合類型】

聯合類型（Union Types）可以通過管道(|)将變量設定多種類型，指派時可以根據設定的類型來指派。

注意：隻能指派指定的類型，如果指派其它類型就會報錯。

var val:string|number 
val = 12 
console.log("數字為 "+ val) 
val = "Runoob" 
console.log("字元串為 " + val)      

可以将聯合類型作為函數參數使用：

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("輸出數組....") 
disp(["Runoob","Google","Taobao","Facebook"])      

可以将數組聲明為聯合類型：

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**數字數組**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  
 
arr = ["Runoob","Google","Taobao"] 
console.log("**字元串數組**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}      

【TypeScript接口】

interface interface_name { 
}      

接口的方法即抽象方法，隻有聲明而沒有具體實作：

但是屬性還是一樣的隻有聲明

接口被描述成一種類型，這裡是由我們的變量對接口進行實作

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 對象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  對象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)      

【聯合類型和接口】

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字元串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字元串數組
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一個函數表達式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());      

【接口和數組】

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] / 錯誤元素 1 不是 string 類型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 錯誤      

【接口多繼承】

TypeScript和我們的Java接口一樣允許多繼承：

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)      

【TypeScript 類】

class Car { 
    // 字段 
    engine:string; 
 
    // 構造函數 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("發動機為 :   "+this.engine) 
    } 
}      

建立執行個體：

var obj = new Car("Engine 1")      

同Java一樣，TypeScript不支援類的多繼承，也是一樣的多重繼承：

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重繼承，繼承了 Child 和 Root 類
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)      

方法的重寫：

class PrinterClass { 
   doPrint():void {
      console.log("父類的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 調用父類的函數
      console.log("子類的 doPrint()方法。")
   } 
}      

Static靜态，類的變量

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值為 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化靜态變量
StaticMem.disp()       // 調用靜态方法      

instanceof 運算

var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());
var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj 對象是 Person 類執行個體化來的嗎？ " + isPerson);      

就連通路修飾符也是一樣。。。

private
protected
public      

• public（預設） : 公有，可以在任何地方被通路。
• protected : 受保護，可以被其自身以及其子類和父類通路。
• private : 私有，隻能被其定義所在的類通路。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利潤為 : "+obj.interest+"，抽成為 : "+obj.rebate )