謎之聲 只要是超人迷一定知道這句話 "為什麼世界需要超人?" 出現在一部電影"超人歸來"中.

我們先準備好開發環境:

安裝Node.js

簡單的說 Node.js 就是在伺服器端可以執行Javascript 的東西

到 Node.js 官網下載Node.js 並且安裝好之後, 接著開啟Command Prompt 視窗, 輸入下面指令

npm i -g yarn

安裝yarn

Yarn 跟 Npm 一樣都是Javascript 套件版本管理工具, 但是Npm 令人詬病的是安裝都是非常的慢, 快取機制用起來效果也不是很好, 所以Yarn 的出現解決了這些問題, 透過Yarn 安裝過的套件都會在本機目錄產生 Cache (目錄在 %LOCALAPPDATA%/Yarn/config/global/), 也就是只要安裝過一次, 下次砍掉node_modules 目錄重新安裝都會從 Cache 讀取.

安裝好yarn 之後, 現在開始就可以用yarn 替代npm 來管理套件.

安裝VSCode

VSCode 是Visual Studio Code 的簡稱, 是由微軟開發的文字編輯器, 也內建了Git 版本控制功能, 同時也具有開發環境功能, 例如程式碼補全, 提示(IntelliSense), 程式碼片段(Code Snippet) 和程式碼重構等. 可以到 code.visualstudio.com 官網下載.

以上環境安裝好之後, 我們就可以開始前端開發之旅, 無論是Javascript 開發環境, 還是Typescript 開發環境都是由此開始.

首先打開VSCode , 選取File --> Open Folder... 選 "D:\Demo" 任何資料夾皆可.

按下 CTRL + SHIFT + ` 打開Terminal 視窗, 輸入

yarn init

它會自動初始化 demo 專案

在Terminal 視窗, 輸入

yarn add -D typescript

這個步驟是安裝最新版的Typescript Compiler 工具.

按照以上步驟, 安裝完後會發現專案資料夾裡多了 package.json 檔案, 剛剛的設定都可以在裡面找到.

專案資料夾中也多了 node_modules 目錄, 這個目錄是存放專案需要用到的套件, 每當你執行yarn 安裝套件

yarn add xxx

yarn 就會下載套件到 node_modules 資料夾存放, 以供專案編譯發佈使用.

package.json 檔案中是一個json 內容, 裡面描述了

以後你可以把這個D:\Demo 整個資料夾複製到別台電腦, 別台電腦(前提是有安裝node.js 和 yarn)只需要輸入

yarn

就會自動幫你下載並安裝Demo 專案所需要的套件.

將專案複製給別人時, 記得排除 node_modules 資料夾, 可以節省複製的時間. 但別台電腦就會另外花時間透過網路下載套件.

接下來我會提供程式碼片段範例, 你可以用VSCode 來動手試試Javascript 和Typescript 區別, 感受一下它們的差異.

副檔名

開發Web 應用程式有經驗的軟體開發人員都知道, Javascript 檔案只要使用一般的文字編輯器即可編輯(存成 .js 檔案), 而Typescript 檔案則是 .ts 檔案. 也可以使用Sublime Text, NotePad++, VSCode 等編輯器進行開發.

當你在VSCode 編輯好 xxx.ts 檔案之後, 按下CTRL + SHIFT + ` 打開Terminal 視窗, 輸入

node .\node_modules\typescript\bin\tsc .\xxx.ts

tsc 是一個Typescript Compiler 程式, 就像C# 的csc (C# Compiler 程式)一樣, 它分析 .ts 檔案語法有沒有錯誤, 並且編譯為 .js 檔案(C# 則是編譯為 .dll 檔案)

tsc 就會幫你把Typescript 編譯成Javascript xxx.js 檔案, 你可以拿這個 .js 檔案去瀏覽器執行.

宣告變數

在Javascript 當你宣告一個變數時, 可以不需要指定型別, 在執行時期(runtime) 的時候會自動推導, 轉換該變數的型別, 這樣的特性對於一開始撰寫程式碼非常的快速方便.

運行(runtime) 時才知道一個變數類型的叫做 動態類型

在下面Javascript 程式碼片段, 你不需要特別指定變數是Integer, String 或是甚麼型別, 所有變數定義都是var , 它們在執行的時候就會自動推導這些變數是哪種型別.

var a = 1;
var b = "Hello javascript";

首先看看一段Javascript 程式碼

function greeter(person) {
   return "Hello, " + person.name;
}

當開發人員看到這段程式碼的時候, 除非開發人員本身很了解系統, 不然的話,
根本沒有人知道person 類別(Class)到底有哪些屬性(Property). 就算是維護開發人員, 一旦很久沒有維護這段程式碼, 也會隨著時間忘記這個person 類別(Class)的定義.

想想看, 如果這是個大型專案(有上百個原始碼檔案), 你要花很多時間去搜尋所有的原始碼檔案, 搜尋person 的有關的程式碼, 再收集 person.xxx 用了哪些屬性? 最後才能知道這個 person 類別(Class)的屬性全貌.

再來看看這一段add 方法

function add(a, b) {
   return a + b;
}

當你執行以下程式的時候, 你認為c 的結果是甚麼?

var c = add(1, 2);

想當然耳, 答案就是 3

執行下一段程式, 你認為結果是甚麼?

var c = add(1, "2");

結果答案是 "12"

a 是數字, b 是字串, 用編輯器撰寫程式碼的時候, 呼叫使用add 方法編輯的時候沒有"提示"/"提醒"/"警告"這段程式碼, 執行(runtime)的時候也不會噴出例外錯誤.

謎之聲 量子觀點: 在現象被觀察之前, 無一是實在的

這跟量子太像了, 不確定性在變量被觀察之前, 無一是確定的, 直到你觀察它, 才能確定它的型態.

當程式碼開始龐大時, 如果沒有事先規範和定義, 對於參數(parameters)的傳遞, 方法(function)的回傳常常會存在許多不確定性, 這些都是潛在的問題.

編譯的時候(compile-time)就知道變數類型的是 靜態類型

第一個Javascript 例子, 改用Typescript 來寫會是如下

function greeter(person: IPerson): string {
   return "Hello, " + person.name;
}

在Typescript 中我們可以明確定義這個方法(function) 的輸入參數定義型態, 以及回傳值的定義型態. 當開發人員打開VSCode 編輯器看到這段程式碼, 可以用滑鼠移到 IPerson 上面, 按下快速鍵F12 , 就可以馬上跳到 IPerson 的介面定義地方.

VSCode 會自動幫你打開該定義的原始碼檔案:

interface IPersion {
  name: string;
  lastName: string;
}

在這段程式碼中可以得知TypeScript 加入了interface 的關鍵字, 而且 IPerson 介面中的每一個成員都有宣告了它的 type: string, 並且在 greeter 方法的參數中也加入了型別的描述, 這樣一來就讓程式碼變得嚴謹得多.

Typescript 不僅讓開發人員利用這些語法撰寫更嚴謹的程式之外, 也更容易讓其它工具來做程式碼分析(例如最佳化程式碼), 或是VSCode 編輯器中的語法提示(Intellisense)功能.

強烈建議 開發人員使用更加穩固的Typescript 語言來宣告強類型變數