TypeScript

動手玩TypeScript-1

動手玩TypeScript 系列文章:

閱讀本文前須備知識:物件導向概念;若有撰寫C#或Java經驗更佳

老實說,筆者第一次看到 “TypeScript” 這個名詞感覺有點奶油
無論是唸起來還是看起來,都有一點不知為何怪怪的感覺 XD
直到稍微深入了解後,才知道原來這名詞有他的用意

在動手玩TypeScript之前,我們得先聊聊什麼是 AltJS
AltJS這個名詞也很妙,我在書上看到它,但在網路上卻沒有什麼參考資料可找
(猜測可能日本朋友比較有在用,如有錯誤還請指正…)
AltJS的概念是:可替代JS的語言 (Alternative JavaScript)

目前流行的語言大多是基於類別的(Class based)語言
然而JavaScript是基於原形的(Prototype based)
這個特性使得它較不容易撰寫大型的程式
(因為要變大,通常就得寫class,而JS的class並不好寫…)
但JS的強大,不應因為這樣而被掩蓋 (實際上也無法被掩蓋…)
因此有一些人開發出了新的語言,再透過編譯,將它編譯成JavaScript
這樣的語言就是AltJS

TypeScript是一個由微軟開發的Open Source的AltJS (沒看錯,真的是Open Source)
有了微軟的加持,可以想見Visual Studio一定對它的支援度很高
的確,無論是使用Visual Studio,還是Visual Studio Code來寫TypeScript
都可以享受到IntelliSense的便利性
而且, Visual Studio還會自動一存檔就編譯,真方便!

在撰寫TypeScript之前,需要先安裝它的SDK
您可以透過VS 2017(含以上) 安裝它 (沒有特殊需求的話,選最新的即可)

透過VS 2017安裝TypeScript SDK

或者您也可以透過 Node.js 來安裝它
npm install -g typescript

寫TypeScript如果堅持不想使用VS也可以的
您可以用任何文字編輯器寫完TypeScript程式
然後在命令提示字元(Windows)或終端機(Mac、Linux)下指令進行編譯
編譯過後,會在同一資料夾、產生相同主檔名的 .js檔案,如:

指令:tsc abc.ts
結果:產生 abc.js

說了這麼多,回頭來解釋一下TypeScript名稱的由來
有寫過JS的朋友知道,它是一個弱型別的語言
變數可以直接用var來宣告,不用表明型別
弱型別的語言,雖然寫起來較快
但有時會因為Viewer(通常是瀏覽器)腦補做強制轉型(Casting)而出現未預期的結果
於是,微軟開發TypeScript時,就把它規劃成強型別的語言,來避免這些事兒
可能因為型別(Type)如此的重要,因此就命名為TypeScript

咱們實際來寫一個TypeScript(以下簡稱TS),感受一下TS的強大之處

我們來建立一個 Bird class (鳥類別)
Attributes(屬性) 有 _name(姓名) 和 _age(年紀)
Methods(成員函式) 有 getInfo()sing()

我們開啟VS 2017,新增一個檔案名為 test_bird.ts

class Bird
{
    _name: string;
    _age: number;

    constructor(name: string, age: number)
    {
        this._name = name;
        this._age = age;
    }

    getInfo(): string{
        return "This bird's name is " + this._name + " and age is " + this._age.toString();
    }

    sing(songName: string): void {
        document.write(this._name + "is singing the song : " + songName + "<br>");
    }
}

存檔後,VS會幫我們自動產生 test_bird.js

我們還需要一個HTML檔,這裡取名為 test_bird.html

<html>
	<head>
		<script type="text/javascript" src="test_bird.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            var bird = new Bird("Woodstock", 1);

            document.write(bird.getInfo() + "<br>");
            bird.sing("Mary had a little lamb");
        </script>
	</body>
</html>

用瀏覽器開啟 test_bird.html
結果如下:

熟悉OOP的朋友應該看得懂上面的程式碼


class Bird裡,有幾個重點:
1. 定義 _name 和 _age 時左方沒有存取修飾詞 public、protected或private
 則TS會採用預設值:public
2. TS中常見的資料型態只有:number、string、bool、null、any,不太多
 宣告Attribute的方式為
  var 名稱: 型別;
 * 這裡順便補充一下,在宣告變數時,除了 var,也可以使用 let
  差別是,
let 是宣告區域變數,常使用在 if 或 for 等限定區域內
3. Constructor(建構子)的宣告採取直接寫 constructor() 方式
4. 任何Methods中使用Class attributes的時候,不可忽略 this (否則VS會報錯)
5. getInfo(): string 表示回傳的型別是string (C#和Java是寫成 string getInfo())
 如果Method沒有回傳值,可以寫成void,也可以乾脆不寫
6. 在 getInfo() 中,我們使用加號來把字串連接起來
 雖然TS允許 _age(型別為number) 直接和字串連接
 但我們最好還是養成好習慣,後面加上 .toString() 先轉成字串比較保險

看完上面的範例,可能會覺得TS除了語法有點特殊以外,好像也沒什麼了不起 XD
不!光是TS可以幫忙翻譯成JS這點,就值得我們學習它了
用JS寫Class其實還蠻彆扭的
有了TS的幫助,我們可以更專注在邏輯上,減少被語法淹沒的風險~

第2節我們將介紹 Inherit(繼承)

 

Facebook留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。