iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
1
自我挑戰組

Typescript 初心者手札系列 第 2

【Day 02】搭建開發測試環境 - Hello TypeScript

前言

閱讀這篇文章前,讓我們來想想看:

  • 如何用一句話說明什麼是 TypeScript?
  • 為什麼要用 TypeScript進行開發?

如果有點不清楚答案的話,可以先看看第一天的文章喔!

第一天TypeScript 起手式初步地介紹了 TS 的功能與價值。但是,這只是個開始,接下來,學習動手實作 TS 才是重點。

今天,我們就來學習如何搭建 TS 的測試和開發環境,嘗試印出 Hello TypeScript 吧!。

不用安裝,直接使用的線上介面 - 官網 Playground

TypeScript 官方網站提供了一個線上測試介面 Playground,讓使用者可以在左側輸入 TS 語法,右側會自動顯示編譯後的 JS 程式碼

在playground的左側輸入

function hello(language: string): string {
  return "Hello " + language;
}

hello("TypeScript");

點擊run,即編譯成右側的 JS 程式碼

"use strict";
function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

打開瀏覽器的檢查模式 console,就可以看到 Hello TypeScript 了!

本地安裝 TypeScript 編譯工具

TS 編譯工具的作用是將 TS 檔案(含.ts或.d.ts副檔名)編譯成 JS檔案(含.js副檔名)。

在安裝 TS 編譯工具之前,我們需要先確認安裝Node.js以及 npmyarn 套件版本管理工具,而後就可以開始安裝了。

  1. 首先,在終端機輸入指令:
npm install -g typescript

-g 表示全域環境安裝,安裝完成之後就可以在任何地方將 TS 檔案編譯成 JS 檔案。

  1. 創建一個hello.ts檔案
    使用 TS 語言的檔案會統一以.ts為檔名(倘若是用 TypeScript 撰寫 使用 JSX 的React應用 則以.tsx為檔名)。

  2. 在hello.ts檔案中撰寫程式碼
    這裡使用 TS 註解語法:指定參數 language 的資料型別為字串(string)

function hello(language: string): string {
  return "Hello " + language;
}

hello("TypeScript");
  1. 進到專案資料夾,使用 tsc 命令進行編譯
tsc hello.ts

編譯時,TS 會進行靜態型別檢查,而後,會在專案資料夾下產生一個新的 hello.js 檔案,裡面是編譯後的JS程式碼。

function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

可以看到,原先 TS 中的型別註解已经被移除,生成的 J S檔案沒有任何型別判斷的程式碼。

那麼,如果 TS 程式碼的型別有誤呢?

例如,將上面的程式碼修改如下:

function hello(language: number): string {
  return "Hello " + language;
}

hello("TypeScript");

將傳入參數設定為數字(number),而後卻是傳入字串(string),那又會產生什麼呢?讓我們輸入tsc hello.ts命令再編譯一次。

哎呀!跳出了錯誤警告

但是,值得注意的是,即使有錯誤警告,仍然編譯出了JS檔案,我們仍然可以使用編譯後的檔案,印出 Hello TypeScript。

function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

小結

今天介紹了兩種建立 TS 程式碼運行環境的方式,一個是線上環境,另一個則是本地開發環境,都很簡單,可以立馬動手試試看!

至於,如何自由地將 TS 檔案編譯成我們要的 JS 檔案?就留待明天介紹tsconfig.json設定檔時,再來細細探討吧。

參考資料:
TypeScript官網
TypeScript入門教程


上一篇
【Day 01】TypeScript 起手式 - What’s TypeScript ?
下一篇
【Day 03】 TypeScript 編譯設定 - tsconfig.json
系列文
Typescript 初心者手札30

尚未有邦友留言

立即登入留言