跳到主要內容

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 ...
張貼留言
閱讀完整內容

Python AI-問題集

Python AI-問題集 問題集 Jupyter Notebook執行ipywidgets會出現kernel死掉的錯誤發生(The kernel appears to have died) 解決方法 (1) 根據log檔來判斷問題： 例如：log訊息出現OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. (2) 根據問題關鍵字找出問題所在： 利用google查詢所遭遇到的問題，例如我把上面的問題上google查詢可以找到這篇的解法 https://blog.csdn.net/bingjianIT/article/details/86182096 (3)實作解法： 我實作下面解法後，就可以順利執行手寫辨識的程式． //在Python宣告時加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" 參考 https://blog.csdn.net/bingjianIT/article/details/86182096
1 則留言
閱讀完整內容

淺談機器學習原理-Nonlinear Transform

Nonlinear Transform 淺談機器學習原理-Nonlinear Transform Nonlinear Transform *通用能力 gerneralization : 就是將訓練好的模型，放到正式環境可以正常的運作，通常Linear Model的gerneralization會比較好，因為線性模型解決的問題比較單純。缺點是應用侷限比較大。 參考Chih-Chung Chang老師的範例:縣性與非線性分類範例 https://www.csie.ntu.edu.tw/~cjlin/libsvm/ 非線性問題 當如果今天假設要圈出裡面小圈圈的資料，我們就無法使用線性的模型，我們可以用非線性解像圈圈的方程式 s i g n ( − x 1 2 − x 2 2 + r ) sign(-x1^2-x2^2+r) s i g n ( − x 1 2 − x 2 2 + r ) 來解決，在演算法我們利用reduce來將不會的問題透過已知的問題來解決，所以在這個問題 我們將圈圈的方程式(非線性模型)reduce成線性模型來解決。 Reduce 方法論 我們調整圓形的方程式改為 z 0 z_0 z 0 ​ , z 1 z_1 z 1 ​ , z 2 z_2 z 2 ​ 來轉換線性方程式， { ( x n , y n ) } \{{(x_n,y_n)}\} { ( x n ​ , y n ​ ) } => { ( z n , y n ) } \{{(z_n,y_n)}\} { ( z n ​ , y n ​ ) } 在這空間資料中只要能找線，就可將不同的分類區分，圖中可以線性可以線去做分類。 透過向量方式來轉換成線性方程式 我們找到一個方式將非線性資料X透過向量轉換為Z後，希望透過線性方程式方式來學習，得到正解。 當我們Nonlinear transform轉換成線性方程式，當有新的資料進來我們無法使用invertiable(逆向工程)的方式去轉回非線...
張貼留言
閱讀完整內容