快速入門 - TypeScript 的 What? Why? How?

快速入門 - TypeScript 的 What? Why? How?

What is TypeScript?

1
TypeScript = JavaScript + A type System

TypeScript 是基於 JavaScript 加上強大的型別系統。

Why use TypeScript?

  1. 因為 TypeScript 簡化了 JavaScript,也包含物件導向的概念,因此也提高了程式碼的可讀性和可維護性
  2. TypeScript 會進行型別的檢查,幫助我們在開發時就抓出錯誤並提示,有別於以往 JavaScript 需要運行才能發現錯誤
  3. TypeScript 是開源的
  4. 完全相容 JavaScript 語法,可循序漸進的學習

How to start?

還沒有安裝環境前,我們可以透過線上的 TypeScript 編譯器來練習

安裝

全域安裝 typescript 環境和 ts-node

1
npm install -g typescript ts-node

安裝 ts-node 是整合 tsc 和 node 指令,讓編譯與運行可以透過一個指令完成。

從簡單練習快速了解 TypeScript

這邊的練習主要是從熟悉的 JavaScript 函式帶到一些 TypeScript 語法,讓讀者可以透過簡單的範例內容了解 TypeScript 的益處。

  1. 創建資料夾,並新增一個 index.ts
  2. 在 index.ts 中寫程式碼(這邊寫的都是 JavaScript 的函式寫法)

    1
    2
    3
    4
    function starter(word) {
    console.log('learn TypeScript : ' + word);
    }
    starter('Hello World');
  3. 終端運行 tsc index.ts,可以發現資料中多了一個編譯後的 index.js

  4. 而再次運行 node index.js 可以發現出現 console.log 的內容

而這邊的第 3 步驟與第 4 步驟也可以改用我們剛剛安裝的 ts-node 直接做 ts 檔案的運行(這個指令不會另外編譯 js 檔案)

1
ts-node inedex.ts

  1. 接下來這一步就會使用到 TypeScript 中的 Type Annotations
    Type Annotations 常被翻譯為型別註釋,用來說明變數或是參數的型別。
    如同下方函式參數,加上型別註釋讓 word 為 string。
    1
    2
    3
    4
    5
    function starter(word: string) {
    console.log('learn TypeScript : ' + word);
    }
    starter('Hello World');
    starter(true); // error TS2345: Argument of type 'true' is not assignable to parameter of type 'string'.

當呼叫函式並傳入非 string 的值時,就會出現編譯的錯誤訊息。

  1. 接著再來體驗一下 TypeScript 中的 Interfaces
    Interface 常被翻譯為介面或是接口,可用來定義結構化的子類型。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    interface StartData {
    firstWord: string;
    lastWord: boolean;
    }

    function starterInterface(word: StartData) {
    console.log('learn TypeScript : ' + word.firstWord + '' + word.lastWord)
    }

    starterInterface({ firstWord: 'Hello', lastWord: 'World' })
    // error TS2322: Type 'string' is not assignable to type 'boolean'.

上面的程式碼編譯後可以發現因為 lastWord 指令的型別是 boolean,但卻傳入字串而出現錯誤。
將傳入的內容改為 { firstWord: 'Hello', lastWord: true } 就 ok 啦~

從以上兩個簡短的範例就可以了解使用 TypeScript 為何可以減低很多不必要的錯誤,讓結構更為嚴謹,在往後維護上也可以更便利。

參考資料:

TypeScript 新手指南
TypeScript in 5 minutes
Udemy - Typescript: The Complete Developer’s Guide 2020

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×