跳到主要內容

TypeScript(5) 類別

前言

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;

參考

  1. typescript class introduction
  2. https://codeday.me/bug/20170629/33692.html
  3. https://www.youtube.com/watch?v=KXc7PzE0FZM

留言

張貼留言

這個網誌中的熱門文章

JavaBean 和POJO

前言 今天介紹JavaBean和POJO的不同，這兩個名詞在JAVA文章常常被拿來使用以及討論。在JDK1.1時候釋出才有的一個標準架構，很多時候常常被搞混，所以我們特別開闢一章來加以討論。POJO規範在企業級應用已經廣大的被使用的規範。 解釋 POJO : 全名為Plain-old-Java-object，只需要繼承Object就可以，沒有特定規定，只要建立的類別有setter/getter方法都可以稱為POJO JavaBean: JavaBean通常用來封裝多個物件成為單獨物件使用，規範比較嚴格，規則如下 規則 說明 1 需要實作序列(Serializable/Externalizable) 2 不能有參數的建構子( no-arg constructor) 3 需要有公用setter/getter 4 屬性必須要私人(private) 5 屬於特定POJO規則 比較 所有的JavaBean都為POJO，但是所有的POJO不一定為JavaBean 都可以當作重複元件 都必須序列化 特性都為可用性、易用性和持久化使用 - 應用 由圖我們可以知道POJO在應用程式中，主要用來存取資料庫資料達到持久化的目的，並提供給商業邏輯流程處理使用。這種POJO的架構提供程式人員開發時的可以很有規則將資料封裝並加以使用。 範例1. JavaBean(以員工為實例) JavaBean建立員工物件，可以發現Employee物件建構子沒有任何參數，屬性為私有化並setter/getter的命名方式。 //實作序列化 public class Employee implements java.io.Serializable{ private int id; private String name; //無參數建構子 public Employee(){} //以下實作setter/getter public void setId(int id){this.id=id;} public int getId(){return id;} public void setName(String ...
張貼留言
閱讀完整內容

GSON基礎教學

GSON 前言 JSON是很常見的資料交換格式，在JAVA領域常用處理JSON的函式庫:GSON、FastXML和JSON-B，本章節會以GSON為主，學習目標如下 JSON格式說明 GSON 套件函式 GSON: 物件轉換JSON字串 GSON: JSON字串轉換物件 JSON 格式說明 JSON全名為JavaScript Object Notation，它是一種輕量級的資料交換格式，會大為流行的理由，主要是他比傳統用xml更輕巧且容易處理， JSON表達方式物件會用大括弧{}，陣列則是用中括號[]。 用JSON字串來表達Employee的物件內容，由JSON字串可以知道物件name、age、sex和salary屬性。 JSON表示員工資料方式: {“name”:”Jack Bryant”, “age”:18, “sex”:”M”,”salary”:3500.00} JSON陣列表示方式: 跟我們使用JAVA的陣列方式類似，內容值可以是數字’、文字、布林、陣列、物件、null等等。 範例: 字串: [“紅”、”橙”、”黃”、”綠”、”青”、”藍”、”紫”} 布林: [true, true, false, false, true, true] GSON 套件函式 Gson為google所發布的函式庫，主要將物件與json字串之間的轉換時方便使用。當我們將JAVA物件轉換成JSON字串稱為 序列化 ，JSON字串轉換至JAVA物件稱為 反序列化 。 GSON: 物件轉換JSON字串 有了JSON基本概念後，我們進入本章重點，首先我們需要建立員工類別(Employee)，定義如下 物件 屬性 員工類別 Employee name 名字 age 年紀 sex 性別 salary 薪水 /** * name:員工類別 */ public class Employee implements Serializable { //constructor public Employee(String name, double salary){ this.name = name; this.sala...
張貼留言
閱讀完整內容

PHP與Python搭配

今天介紹如何利用php網頁呼叫目錄下的python程式工作或是資料交換，本人整理的方法有兩種 使用system()、exec()、shell_exec()呼叫程式 (1) string system ( string return_var ] ) 參考網址 官網解釋system()用來執行外部命令，返回為印出的結果，passthru()跟system()類似但是它不會返回結果。 範例1. 利用system執行ls指定並顯示在網頁上，無法使用變數保留ls的結果 檔案名稱: psystem.php $jsondata= system("ls -al", $result); 結果: (2) exec() : string exec ( string output [, int &$return_var ]] ) 參考網址 範例2. 利用exec執行python程式並可以回傳json格式給前端網頁做處理並顯示。我們ptopy.php就是可以看到callpy()為執行py的函式，它執行完pyEx01.py會將結果給$jsondata變數，做後面json解析。 檔案名稱: ptopy.php function callpy() { $jsondata= exec("/usr/bin/python pyEx01.py"); return $jsondata ; } $jsondata= callpy(); echo $jsondata ; echo " " ; $obj = json_decode($jsondata) ; echo "name:".$obj-> { 'name'} .',' ; echo "id:".$obj-> { 'id'} ; 檔案名稱: pyEx01.py import sys ...
張貼留言
閱讀完整內容