Deno 入門指南
  • 前言
  • Deno 更新日誌
  • 簡介
    • Deno 跟 Node.js 的主要差異
    • Hello, World!
  • TypeScript 基礎篇
    • 變數宣告
    • 使用型別系統
    • 流程判斷與迴圈
    • 函式宣告
    • This 與 Arrow Function
    • 在函式中應用強型別
    • 介面
    • 型別別名
    • 物件導向概念
    • 類別的封裝與繼承
    • 介面與類別、抽象類別
    • 泛型的概念與實作
    • 型別補充
  • Deno CLI
    • 快速開始
    • 沙盒機制
    • URL Import
    • 編譯選項
    • 相關工具及測試
      • WebGPU API
      • Deno.resolveDns
      • 程式碼編譯器
      • 程式碼檢查器
      • 依賴檢查器
      • 文件產生器
      • 程式碼打包工具
      • 腳本安裝
      • 程式碼格式化
      • Deno 命名空間與編譯器 API
      • 使用 Deno 進行測試
  • 使用 Deno 打造多線程應用
    • 多線程概念
    • Deno Workers
    • 使用多線程計算矩陣相乘
  • 使用 Deno 打造 Web API
    • Web API 介紹
    • Oak 框架介紹
    • 使用 Denon 精簡指令
    • 實作 Web API
    • MongoDB 安裝教學
    • Deno 與 MongoDB 共舞
    • 完成第一支 Web API
    • 淺談跨來源資源共用(CORS)與解決辦法
Powered by GitBook
On this page
  • 學會宣告之後:華麗變身強型別
  • 你怎麼什麼都知道?!:超牛逼的型別預判系統
  • 延伸閱讀

Was this helpful?

  1. TypeScript 基礎篇

使用型別系統

本章要跟各位讀者介紹 TypeScript 中最大的賣點,也就是型別系統以及型別預判!

學會宣告之後:華麗變身強型別

我們在前一章節學習到如何宣告變數並且認識了 JavaScript 的基礎型別。

本小節要在這個基礎上教大家為變數增加型別系統,我們先看看以下範例:

let num = 3;

筆者在上面宣告了 num 變數,其值為 3 。

TypeScript 非常的聰明,當你為宣告的變數賦值的那一刻開始,它便已經為變數添加型別了。

num = 'Deno';

我們將 num 重新賦值,來看看會發生什麼事吧!

TS2322 [ERROR]: Type 'string' is not assignable to type 'number'.

結果就是: 編譯不過。

為何編譯不過呢?

因為當我們在宣告 num 並賦值為 3 的那一刻起, TypeScript 會這樣認定我們的程式碼:

let num: number = 3;

我想看到這邊,各位讀者就能明白剛剛為何會有編譯不過的狀況發生了。

'Deno' 是字串,並非數字。

當然,如果你希望這個變數可以存取 string 以及 number 類型的值,你可以這樣做:

let numOrString: number | string = 3;
numOrString = 'Peter';

這樣的概念在 TypeScript 的官方文件中稱為: 聯合型別 (Union Types) 。

至於 TypeScript 的型別種類,那可以說是不勝枚舉,多到爆阿!!!

  • 原始型別

    JavaScript 原本就有的型別,也就是筆者前一章所提到的: number, string, null, undefined ...。

  • 物件型別

    包含了我們經常使用的 Json, Object, Array, Function ...。

    對, JavaScript 真的很奇怪, 陣列跟函式都是屬於物件的一種喔 !

    想當然爾, TypeScript 也怪怪的。

    就像是如果一個怪人變成了蜘蛛人,當他穿上戰服時,他也還是個怪人,超級英雄的身分並不能改變他身為人的本質。

    喔對了 ! 我們之後學習物件導向時會使用到的 Class ,在實例化以後也是屬於物件型別唷 !

  • 明文型別 Literal Type:一個值本身也可以成為一個型別,比如字串 "Hello world" ...等。

    let foo: 'Hello world';
    foo = 'Hi'; //Error:Type '"Hi"' is not assignable to type '"Hello world"'.
    foo = 'Hello world'; // OK
    foo = null; //OK
    foo = undefined; //OK

    在 TypeScript 中,預設情況下 null 和 undefined 可以是任何型別的值。

    除非打開 strictNullChecks 設定,至於在 Deno 上要如何調整這些設定,筆者會花時間研究再補充上來。

  • 特殊型別: any、never 以及 unknown 。

    這個部分可以參考本章最後 - 延伸閱讀 中所提供的系列文,該系列文的作者對於這些特殊型別進行了非常深入的探索。

你怎麼什麼都知道?!:超牛逼的型別預判系統

TypeScript 讓人驚艷的並不僅僅是加入了型別系統,搭配 VSCode 以後更能彰顯這個優勢。

VSCode 與 TypeScript 具有高度的整合,就上圖來看,當筆者宣告 x 變數並賦予它值時,

VSCode 便能明確的指出 x 變數的預設型別。

某種層面上來說,我們可以認定編輯器看得懂我們的程式碼。

我們在更大膽一點,丟錯誤的程式碼給 VSCode 看看:

let x = "a";
x = 4;

即便沒有指定型別, VSCode 也能立刻提醒使用者這麼做是錯的:

這麼聰明的開發環境,有誰能不愛上呢?

仔細回想,筆者是在 JSDC 2019 Workshop 第一次看到 VSCode 搭配 TypeScript 的魔力。

永遠不會忘記那時候保哥將大量的 JS 程式碼搬遷到 TypeScript 環境只花了不到 5 分鐘 !

因此,能在今年暑假學習 TypeScript 並且將它分享給各位實在是一件讓人興奮的事情啊 !

一不小心,筆者就又偏題了 XD

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。

在讀完本篇以後,筆者也強烈建議大家去看看以下文章,或許會對型別、變數宣告...等觀念有更深層的看法唷!

  • 如果讀者希望看到繁體中文的相關資料,我認為這系列真的必看,講的非常詳細。

    筆者在這 30 天中很難將 TypeScript 的各項觀念一一帶出,如果有需要繼續向下探索,

    真的大推、怒推這個系列文。

Previous變數宣告Next流程判斷與迴圈

Last updated 3 years ago

Was this helpful?

4-1
4-2

讓 TypeScript 成為你全端開發的 ACE!