跳到主要內容

TypeScript(6)模組化

前言

TypeScript的模組化大概可以分兩個部分(1)模塊(module)方式是ES6模組標準(2)命名空間(namespace)是TypeScript所制定的方法，這兩個概念會讓元件化更容易實作，在TypeScript一個*.ts檔案為一個模塊，接下來會介紹import和export這兩個語法，如何使用它們來完成模組化．

Note: TypeScript 1.5以後內部模塊稱為命名空間，外部模塊稱為模組，這是為了跟ECMAScript 2015一致．

第一部分：模塊(module)

在模組(.ts檔)定義將變數、函式和類等，外部無法存取內部邏輯，只能透過export語法去導出所需要變數、函式和類給其他模組((.ts檔)使用，當我們規劃元件時，該模組本身export的函式、變數和類就是模組的限制，這些在規劃元件藍圖時就應該考慮哪些資料需要提供給外部模組使用/不使用．在TypeScript可以支援不同的模組化系統如：AMD、SystemJS、ES Modules等等．

Export 語法

(1) export 變數

//檔名 moduleEx.ts
export var 變數名稱 = 值;
export const 變數名稱 = 值

範例：
export var kk=1234;
export const PI=3.1415 ;

(2) export 介面

//檔名 moduleEx.ts
export interface 介面 {
   //介面內容
}

範例：
export interface IShap{
    width:number;
    heigh:number; 
}

(3) export 類別

//檔名 moduleEx.ts
//方法一
export class 類別名稱 {
   //類別內容
}
//方法二
class 類別名稱 {
   //類別內容
}
export {類別名稱}

範例：
//方法一： 可以參考下面範例
//方法二
class Car{
    constructor(color:string, engine:string){
        this.color = color ; 
        this.engine = engine ; 
    }
    color:string ;
    engine:string ;

    getColor(){
        return this.color ; 
    }

    getEngine(){
        return this.engine ; 
    }
}
export {Car}

(4) export 函式

//檔名 moduleEx.ts
//方法一
export function 函式名稱 {
   //函式內容
}
//方法二
function 函式名稱 {
   //函式內容
}
export {函式名稱}

範例：
//方法一
export function sayHello(name:string){
    console.log("Hi! "+name)
}
//方法二
function sayHello(name:string){
    console.log("Hi! "+name)
}
export {sayHello}

import 語法

當我編譯有import檔案時，編譯時也會連同import的檔案．如下面moduleImport.ts有載入moduleEx.ts時也會一起編譯．

範例： tsc moduleImport.ts

import {載入名稱1,載入名稱2,...} from './TS檔案路徑'

範例：//檔名 moduleImport.ts
import { kk,Car, sayHello} from './moduleEx'
console.log(kk)
let car = new Car("RED","HRV"); 
console.log(car.getColor()); 
console.log(car.getEngine());
sayHello("Jack");

範例結果

123
RED
HRV
Hi! Jack

第二部分：命名空間(namespace)

當未宣告命名空間類別都會放在global namespace中，當有相同類別名稱就會出現編譯錯誤．命名空間主要是解決1.有相同類別名稱的衝突問題．2.邏輯分類．下面這兩種寫法TypeScript仍都支援，但是官方比較建議用namespace的語法．

Internal Module Syntax (Old) 語法：

module 名稱{
     //定義類別
     class 類別名稱 {}

}

Namespace Syntax (New) 語法：

namespace 名稱{
     //定義類別
     class 類別名稱 {}

}

當開發時有兩個類別名稱都叫Account會員類別，這時編譯會有類別同名衝突的問題，但是在實務的功用卻不同一個Account用來紀錄公司內部員工的資料，另一個Account是用來處理約聘或是工讀生的資料，這是可以利用namespace分別宣告其命名空間為HR 和TEMP，很容易就可以分辨．

範例：

namespace HR{
    export class Account{
        name:string;
        salary_monthly:number;
        showSalary(){
            console.log(this.name+":月薪"+this.salary_monthly) ;
        }
    }
}

namespace TEMP{
    export class Account{
        name:string;
        salary_hourly:number;
        showSalary(){
            console.log(this.name+":時薪"+this.salary_hourly) ;
        }
    }
}

var acc01 = new HR.Account() ; 
var acc02 = new TEMP.Account() ; 
acc01.name="jack" ; 
acc01.salary_monthly=100000 ;
acc02.name="blay" ; 
acc02.salary_hourly=105;
acc01.showSalary() ;
acc02.showSalary() ;

執行結果：

jack:月薪100000
blay:時薪105

參考

  1. 官方模塊說明
  2. tutorialspoint
  3. https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
  4. 深入探討 TypeScript 之 Module

留言

張貼留言

這個網誌中的熱門文章

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(逆向工程)的方式去轉回非線...
張貼留言
閱讀完整內容