前言
JavaScript使用函式和prototype-based的方式去實現元件化，但是會造成以後維護災難的發生，日前ES6也開始加入類別的特性，但是TypeScript一開始就有以物件導向語言去做發展．我目前覺得TypeScript發展模組開發會好管理．
類別函式宣告
語法：
class 類別名稱{
//屬性 private|public|protect
修飾子 屬性名稱;
//建構子
constructor(){
//內容
}
函式名稱(參數名稱：參數類型）：回傳類型{
//內容
}
}說明：
private : 私人修飾子宣告讓外面無法直接存取該屬性
public : 公用修飾子讓外面可以直接存取該屬性
protect : 保護修飾子只能讓有繼承的類別可以存取該屬性
範例：類別宣告
class Person {
private name:string ;
constructor(name:string){
this.name = name
}
sayHi() {
return `The person's name is ${this.name}`;
}
}
let person = new Person('Jack');
console.log(person.sayHi());
輸出結果：
The person's name is Jack
繼承(Default Parameters)
TypeScript有時我們需要可以利用繼承方法來建構元件，元件的可用性更好使用．
範例：
//預設參數
class Robot extends Person{
public talk(){
console.log('I am a robot');
}
}
let robot = new Robot('robot 1 ');
robot.talk() ;
輸出結果：
I am a robot
抽象(abstract)
抽象類別跟介面很像，最大部分不同地方是抽象類別只需要實作部分需告方法，如果有類別大部分方法的行為相同，但是有少部分的不同，就可以定義為抽象類別．例如：我們定義一個抽象類別為動物(Animal)，所有的動物都會靠嘴巴覓食(forage)所以可以實作相同方法，走路(walk)或是跑(run)這個方法，每個動物實作的方法不同，我們可以定義成抽象函式，舉例狗是用四隻腳走路，跑也是，但是鳥走路可能是用跳;跑步可能是用飛．
範例：
abstract class Animal{
type:string ;
forage():void{
console.log(this.type+"吃飯")
}
abstract walk(); //抽象函式
abstract run(); //抽象函式
}
class Bird extends Animal{
constructor(type:string){
super();
this.type = type;
}
walk() {
console.log(this.type+"用跳的")
}
run() {
console.log(this.type+"用飛")
}
}
class Dog extends Animal{
constructor(type:string){
super();
this.type = type;
}
walk() {
console.log(this.type+"用四隻腳走路")
}
run() {
console.log(this.type+"用四隻腳跑步")
}
}
let dog = new Dog("狗");
dog.walk();
dog.run();
let bird = new Bird("鳥");
bird.walk();
bird.run();
輸出結果：
狗用四隻腳走路
狗用四隻腳跑步
鳥用跳的
鳥用飛
介面(Interface)
在typeScript的介面是一種規格，其定義屬性和方法，跟其他語言的interface
使用情境相同，通常用來定義前端元件的介面，例如表格的欄位定義成介面，可以依照不同的需求去實作表格欄位定義，這個好處是對表格欄位來說比較好維護．
範例：
interface ICar {
color:string; //顏色
engine:string;//引擎
type:string; //型號
speed:number; //速度
setSpeed(speed:number) ; //設定引擎速度
}
在實作介面中，TypeScript需要重新宣告屬性一次，然後實作這個介面所定義的規格．
範例：
class HRV implements ICar{
color: string;
engine: string;
type: string;
speed: number;
constructor( color:string, engine:string, type:string){
this.color = color ;
this.engine =engine;
this.type = type ;
}
setSpeed(speed: number) {
this.speed = speed;
}
}
var hrv :ICar = new HRV("blue","SOHC 直列 4 汽缸 i-VTEC 智慧型可變汽門正時與揚程電子控制系統","一般");
hrv.setSpeed(100);
console.log(hrv.engine);
console.log(hrv.speed);
介面繼承
介面繼承又稱介面擴充，他可以像類別一樣延展介面功能，增加元件介面的可用性．由範例知道有一個介面為Shape定義基本的顏色，Square就是延伸Shape功能增加長度和寬度．
範例：
interface Shape{
color:string;
}
interface Square extends Shape{
width:number;
height:number;
}
let square = {};
square.color="blue" ;
square.width=100;
square.height=10;
留言
張貼留言