無聊看看

前言 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 .colo...

前言 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 抽...

前言 呈 TypeScript(2) 資料型態 提到string、number、boolean基本資料類型，本節我們開始講如何宣告這些變數和這些資料型態有什麼限制與用法． 聯集型別(Union Types) 當定義的變數資料型態可能會有多個資料型態，我們可以使用聯集類型語法（“｜”），將不同資料類型做聯集分配．聯集型別的好處是讓我們更靈活使用資料型態指派． 語法： //可以定義不同資料型態，使用“｜”區分就可以 let myVar : string |number ; 範例 let myVar : string|number ; myVar="Hello"; //編譯成功 myVar=1234; //編譯成功 myVar=true; // 'boolean' only refers to a type, but is being used as a value here. //多個資料類型作聯集 let myMessage: string|number|boolean; myMessage="Hello"; myMessage=1234; myMessage=true; var、let、 const## (1) var 表示預先不知道初始值使用，預設會給undefined， 語法： var myVar ; 範例： var value ; // undefined var data = 100; // 有明確定義初始值 範例： function xy() { var dataX = 10; // 在xy()裡面為全域變數10 if(true) { var dataY = 20; console.log(dataX); console.log(dataY); } console.log(dataX); console.log(dataY); } 結果： 10 20 10 20 hoisting問題： 當我一開始不用var宣吿變數時，在JavaScript執行時會將...

前言 TypeScript函式語法優點會對資料型態做檢查，不像JavaScript那麼自由定義，你需要宣告參數的型態和回傳參數的型態．近一步會介紹rest/optional/default params 宣告方式和使用情境． JavaScript需要不需要知道函數參數資料型態，但是TypeScript有需要明確定義 JavaScript呼叫函式參數不需要知道參數的個數， 但是TypeScript有明確定義，並提供rest/optional/default params宣告方式 基本函式宣告 TypeScript的函式宣告必須明確定義參數的資料型態、個數以及資料型態，基本上用法跟其他程式語言一樣． 語法： function 函式名稱 (參數名稱：資料型態) ：回傳資料型態{ //函式功能 } 範例： 函式宣告 let hello:string = "Hello World" ; //命名函式 function sayHello(message:string){ console.log(message) } sayHello(hello) //匿名函式 let anon_Hello = function(message:string):void{console.log(message)} anon_Hello(hello); 預設參數(Default Parameters) 預設參數是當傳入 undefined 或是沒有傳入時，則會以 default parameter 取代。但是注意的地方為宣告預設參數必須在一般參數的後面，不然前面參數需要為undefined． 範例： //預設參數 function feed(name="dog"):void{ console.log(name); } feed("cat"); feed(); feed(undefined); 輸出結果： cat dog dog 可選項參數(Optional Parameters) TypeScript語法呼叫函式如果 數目不正確 是無法編譯，為了解決這個問題TypeScript提供optional parameters...

前言 本章節介紹TypeScript的資料型態，因為TypeScript超集合(superset)，所以在定義資料型態需要依照JavaScript規則．但是TypeScript提供一個強型別語法規範，在開發中大型應用上，讓JS架構在開發上或是維護上更容易找出問題．由以後的介紹可以知道TypeScript簡單來說就是將JavaScript物件化、規則化，讓他得以更好擴充、維護。 資料型態 TypeScript資料型態對應JavaScript資料型態 TypeScript JavaScript 說明 範例 boolean boolean 布林值 sex:boolean = true number number 數值型態 total:number=100; hex:number=0xf00d; string string 字串型態 message:string=’今天天氣晴天’ sentence:string= 這是一個句子，${message} Array object 陣列 list:string[]=[‘a’,’b’,’c’,’d’] Tuple boolean 類陣列但可儲存不同資料型態 item:[number,string]=[‘a’,1,’b’] enum 無 定義常數 enum Color {a, b, c}; enum Color {a=1, b, c}; any var 定義變數時不預定資料型態 variable01: any = 4; void undefined 僅儲存undefined或null值 value:void const 無 定義常數 pi:const=3.1415 宣告變數語法 變數：資料型態 ＝ 值 範例: num:number=100 斷言 Type assertions(斷言) 我們可以把斷言解釋成物件轉型，當有些物件/資料型態不同，可以透過斷言來改變物件/資料型態，但是當不...

前言 相信前端開發者對typescript不陌生，TypeScript是微軟所發展開源的程式語言，主要用來開發大型前端應用平台，由Anders Hejlsberg （C#, TurboPascal 之父）所負責發展TypeScript語言專案． 特性 我們根據Anders Hejlsberg的影片介紹大致得知TypeScript有幾種特性： TypeScript是一種程式語言，讓Javascript發展有更好應用延伸 TypeScript是JavaScript的超集合，副檔名為.ts需要編譯成.js檔 表示JS函式庫也可以被TypeScript所使用 TS語法也可以兼容JS語法 *.ts需要編譯成.js檔，才可以瀏覽器使用 TypeScript是opensource TypeScript遵循ECMAScript 版本標準，只要是能執行這些標準的 JavaScript 引擎都支援 環境建置 我主要是用visual studio code來開發TS專案，接下來會介紹如何安裝IDE、node.js和Typescript開發環境 (1)下載 Visual Studio Code 如果不是MAC版本可以按other platforms 連結會有其他版本提供選擇(Mac, Windows,Linux(.deb, .rpm的作業系統) (2) 下載 Node.js (3)安裝TypeScript套件 完成前兩項任務後，可以在Visual Studio Code下安裝TypeScript套件，用來開發 、編譯TS腳本． #> sudo npm install -g typescript (4)編譯TS檔 以下是官方的範例，新增一個ts腳本為greeter.ts，內容如下，但是我們要使用需要把它轉成.js檔． function sayHello(person) { return 'Hello, ' + person; } var user = 'Jack'; document.write(sayHello(user)) 執行tsc指令來編譯greeter.ts檔，編譯完會產生hellow.js腳本 > tsc greeter...