iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

前端是該來學一下 TypeScript 了 系列 第 2

Day02: Hello TypeScript! 環境安裝起來 + 牛刀小試~

Q: 同事說自己的 C++ 能力是世界第一,怎麼樣可以讓他意識到自己沒那麼厲害?
A: 實不相瞞,我也不是省油的燈:我的C++實力世界第0

XDD 好 今天的重點是環境安裝啦 是說好開心 今天上完班 就開啟第0天連假了(誤


安裝 node.js 與檢查

在安裝 TypeScript 執行環境前,我們先來確認是否已安裝好 node.js,如果還沒安裝,可以到node.js 官方網站 官方網站進行下載安裝,建議是使用左邊 LTS 版本唷,相對比較穩定。 如果想要管理不同版本的 node 及 npm 也可以使用 nvm 來安裝。

安裝 node.js 時自動會安裝 npm,安裝成功後,可以輸入指令來檢查版號,看是否安裝成功。

node -v
npm -v

如果都有出現版號(如 v14.1),就表示安裝成功啦。


安裝 TypeScript

在全域環境安裝 TypeScript 指令,之後就可以在任何地方執行 tsc 指令了。

npm install -g typescript

一樣來檢查是否安裝成功。

tsc -v

一樣如果有出現版號(如 Version 4.3.5),就表示安裝成功啦。

補充: TypeScript 除了可以使用 npm 安裝(當然也可以用 yarn)之外,還有 Visual Studio Extension 可以安裝, 可參考官網


建立第一個 TypeScript 檔案

在資料夾裡建立 hello.ts 的檔案,TypeScript 編寫的檔案都以 .ts 為字尾,如果是用 TypeScript 編寫 React 時,以 .tsx 為字尾。

接下來在 hello.ts , 我們可以來試看看 TypeScript 提供的型別註記 (Type Annotation) 的功能指定參數型別, 在 person 參數添加 : string , 即定義 person 這個參數的資料型別得是字串型別:

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

let user = "iris";
console.log(sayHello(user));

然後在終端機執行

tsc hello.ts

這時候我們就會看到編譯好的 hello.js:

function sayHello(person) {
    return "Hello, " + person;
}
var user = "iris"; 
console.log(sayHello(user));

這時候我們就完成第一個 TypeScript 檔案了~

那來測試看看有沒有印出來, 在終端機執行

node hello.js 

在終端機有印出 Hello, iris, 就表示成功啦!


TypeScript 會告訴你寫錯了 , JavaScript 不會

接下來我們故意來輸入不同型別,看會怎麼樣~我們試著把傳入 sayHello 的參數改為 array 型別 [0, 1, 2]

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

let user = [0, 1, 2]; 
console.log(sayHello(user));

會發生什麼事呢? TypeScript 會報錯, 告訴你這個參數只接受 string 型別, 不接受數字陣列。

接下來發揮一下實驗精神,一樣再在終端機執行:

tsc hello.ts

即使終端機有報錯,但我們可以看到 TypeScript 還是有進行編譯產生 hello.js 。我們再執行:

node hello.js

印出了 Hello, 1,2,3,但這不是我們所要的資料型別,不符我們預想。而 TypeScript 在開發的時候就會告訴我們不是 string 型別,方便我們快速 debug,但是 JavaScript 不會。

⚠ TypeScript 只會進行靜態檢查,如果發現有錯誤,編譯的時候就會報錯。特別注意,TypeScript 編譯的時候即使報錯了,但還是會產生 js 檔案。如果要在報錯的時候終止 js 檔案的產生,可以在 tsconfig.json 中配置 noEmitOnError 即可。(我們之後會來介紹 tsconfig.json)


這篇我們試看了使用 TypeScript 帶來的好處,但有沒有發現每寫一次,我們都要手動去 tsc xx.ts 跟 node xx.js 一次, 超麻煩的,於是 google 找到了好方法,下篇來分享!


參考資料

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
https://willh.gitbook.io/typescript-tutorial/introduction/get-typescript


上一篇
Day01: 為什麼我想要學 TypeScript
下一篇
Day03:【TypeScript 學起來】自動編譯 tsc + nodemon 好方便
系列文
前端是該來學一下 TypeScript 了 30

尚未有邦友留言

立即登入留言