0%

[Typescript101]Typescript教學系列:介紹

前提情要

筆者公司使用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中撰寫程式

1
2
3
4
5
6
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

型別系統優點

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

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

結論

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