iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
4

前言

會碰到 TypeScript 是因為之前無意間取得 深入淺出設計模式 ,覺得那些為了解決問題而整理出來的設計模式太有趣了,包含那些 Class、Interface 的使用等等,都為我之後再開發 React 帶來很深遠的影響。

筆者還是要先聲明,JavaScript 仍然有辦法透過自身實現 interface, 但它所需要的工程可能比想像中的多,這時也許我們能夠回想 class 的出現為 JavaScript 操作 Prototype 帶來多大的改變,就能猜想 TypeScript 僅僅增加了 interface 就能產生多少便利,

但是並不代表 TypeScript 改變了 JavaScript 。

TypeScript 與 React 相同,最後終究得經過編譯,才能讓瀏覽器讀懂。


前置準備

  1. 一顆擁有學習熱忱的心。

TypeScript

TypeScript 是 JavaScript(以下簡稱 JS )所有版本的超集合,因此除了新增一些語法外它與原生的 JS 其實並無不同,也就是說今天就算是開了一個 .ts 的 TypeScript 檔案,也能夠在裡面暢打 JS ,當然你還是得將他編譯為 .js 檔案,即使內容不會改變。

使用方法

安裝 TypeScript

因為之後可能會一直用到,所以直接開啟終端機,並在 install 時加上 -g 將 TypeScript 裝在全域環境中:

npm install -g typescript

因為是加到全域環境中,如果沒權限無法安裝的話就加上 sudo 吧!

建立新專案

這個篇章需要重新建立一個新專案,等到熟悉 TypeScript 一點,再將 TypeScript 加入先前篇章建立的專案中。

使用 npm init -y 初始化 package.json,就能看見一切重頭開始,接下來用 cd 指令進入專案裡,另外運行 tsc --init 初始化 TypeScript 的專案內容,輸入完後可以看見專案下多了一個 tsconfig.json,它是 TypeScript 的設定檔,裡面有許多可以設置的設定,而且每個設定後都有註解說明在做什麼的,非常貼心,現在我們暫時不需要動它:

基本用法

在專案目錄下建立副檔名為 .ts 的檔案:

|-index.ts
|-package.json
|-tsconfig.json

將它打開,建立一個 function,用來輸出傳入的參數,像這樣子:

const printParam = param => console.log(param);

但明明 function 的語法上沒什麼問題,卻可以看到 param 下方出現紅線警告,將滑鼠移過去會得到下方訊息:

多麼新奇的錯誤對吧!這個意思是說,因為沒有替 param 指定任何型別,所以它被預設為 any,如果今天是手動替它設置 any 就還好,但是被預設為 any 就是危險的了,因為就無法確定傳入的型別會不會導致 printParam 出錯。

加上型別吧!在 TypeScript 中,只要在變數後面打上 : 就能替變數加上 stringnumber 等型別,例如:

const printParam = (param: string) => console.log(param);

而 function 本身也是需要型別的,即使它沒顯示錯誤,而 function 的型別也很簡單,如果是只有執行,例如 printParam 的情況,就設置為 void,如果有回傳什麼,就以回傳變數的型別為主,printParam 的情況為:

const printParam = (param: string): void => console.log(param);

那現在,分別用 String 和 Number 兩種型別來執行 printParam

const printParam = (param: string): void => console.log(param);

printParam('string');

printParam(1234);

理所當然可以看見 printParam(123) 的那行出現警告:

警告內容為,printParam 的參數應該要是字串型態,Number 是不行的哦!

如果確定要讓 printParam 可以接收兩種型別,可以在 param 後指定多個型別,而每個型別之間使用 | 隔開:

const printParam = (param: string | number): void => console.log(param);

這麼一來就沒問題了!

編譯

認識完基本型別後就可以就能試著將 TypeScript 編譯成 JavaScript 了,過程也很簡單,只需要在終端機中輸入:

tsc index.ts

就能看見相同目錄下增加了一個同名的 .js 檔案,裡面便是編譯過後的 JavaScript:

從編譯過後的 JavaScript 來看,可以發現 printParam 並沒有做任何關於型別的判斷,也就是說 TypeScript 的檢查僅僅是在 .ts 內而已。

但是有些編輯器是不像 Visual Studio Code 會出現紅色底線,如果不使用該編輯器,就得一個一個看嗎?

不對哦!因為在編譯 TypeScript 時,就會自動將語法不正確的地方揪出來,並停止編譯,例如在 index.ts 內再執行一次 printParam,並且這次傳入 {} 空物件:

printParam({});

假設在開發時忽略了這個錯誤,就進行編譯,那編譯時就會出現錯誤訊息中斷編譯,並告訴你說,在哪個檔案的哪一行中出現了什麼問題,得先修正完後才能正常編譯:

本文的範例程式碼會提供在 GitHub 上,歡迎各位參考(當然是提供可以編譯的版本)


結尾

本篇章用最簡單的方式建立了 TypeScript 的專案,也學習了基本的型別宣告和編譯(更多型別可以參考官方文件),接下來的章節會繼續介紹 Class 與 Interface。

如果文章中有任何問題,或是不理解的地方,都可以留言告訴我!謝謝大家!


上一篇
Day22 | 創建假 History ,騙過真 Router
下一篇
Day24 | 只要別搞混 Class,你想得到通通有
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

1 則留言

1
b97201019
iT邦新手 5 級 ‧ 2020-03-16 14:14:40

請問初始化的指令是不是變成了tsc --init

Askie Lin iT邦新手 5 級 ‧ 2020-03-25 16:15:17 檢舉

Hi b97201019

有看到這篇 stackoverflow 提到 TypeScript 在 v1.6 後支援了用指令創建 tsconfig.json 的功能:

The correct command is --init not init:
$ tsc --init

我執行 $ tsc init 會去找 init.ts 存不存在。

不好意思!我漏掉這則留言了!

感謝提醒,是我的文章內容有問題,非常感謝你!

我要留言

立即登入留言