前情提要

筆者公司使用Angular開發應用系統，使用了也已經有兩三年了，雖兩三年的Angular撰寫經驗，但筆者自認為只能算是一個半個前端，因開發的是內部系統，比較沒有艱深的功能要實現，且筆者公司買現成的Template版型來套用，滿習慣且熟悉Template版型提供的撰寫結構及相關套件，趁這一次轉換工作空檔，就先把Typescript底子打好吧。

Typescipt本身是Javascript的超集，完全相容Javascript現有語法，加上型別系統，前端程式寫起來，猶如寫後端程式一樣，加上Angular2開始，透過DI取得所有服務，筆者平常後端使用Dotnet Core，因Dotnet Core框架也是內建DI機制，因此對筆者來說特別熟悉感。：

筆者這邊會參考

統整上述網站內容，整理成自己理解的版本。

內容

基本上Typescript可以寫前端(Angular, Vue, React)，後端(Nodejs)，開發環境部份，共有的是node, npm，開發工具則選擇Visual Studio Code，或者相似的IDE皆可。

安裝Typescript

第一步驟就是要先安裝Typescript

1	npm install -g typescript

來測試看看安裝是否成功

1
2
3

tsc --version
# 輸出結果
# Version 4.6.4

Hello World

按照學習新的程式語言慣例，來個Hello World吧

1 2	touch hello.ts code .

接著在hello.ts中撰寫程式

function sayHello(person: string) {
  return "Hello, " + person;
}

let user = "Eugene";
console.log(sayHello(user));// 預期輸出為 Hello Eugene

編譯

編譯指令

上步驟撰寫完hello.ts後，透過第一步驟安裝的typescript，讓其編譯成javascript吧。

1	tsc hello.ts

編譯選項

透過tsc指令編譯其typescript檔案時，可以增加options選項來客製化編譯結果

noImplicitAny : 指示編譯器在具有隱含 any類型的運算式和宣告上引發錯誤
noEmitOnError : 之後文章再補充
target: 指定 JavaScript 檔案的 ECMAScript 目標版本。此範例會編譯與 ECMAScript 6 相容的 JavaScript 檔案
目錄選項 : 產生js檔案的目錄

宣告方式如

1 2	tsc hello.ts --noImplicitAny tsc hello.ts --target "ES2015"

編譯後執行

若編譯成功後會在同個目錄中會產生hello.js檔案，就透過node指令來執行hello.js吧

1
2
3

node .\hello.js
# 輸出結果
# Hello Eugene

型別系統優點

先以這個簡單的案例，來感受一下有型別系統的優點吧，因sayHello的input的型別指定為string，我們試著傳入非string型別的參數看看，筆者就故意輸個[1, 2, 3]

熟悉的紅色毛毛蟲，IDE提示訊息非常清楚，傳入的參數型別是number[]而非string，永遠不會寫錯啦。

結論

Typescript介紹文，今天就先到這邊啦，下一篇來介紹「型別系統」，看能不能堅持寫個系列文，跟自己說加油。

Buy me a coffee

Eugene's Blog

[Typescript101]Typescript教學系列:介紹