iT邦幫忙

1

JSDC 2020 回顧 - Typescript

jpg

用不用 TypeScript 隨便你,反正我是用了

講者保哥是 TypeScript 的支持者。議程目的是對還沒使用 TypeScript 的開發者進行 promotion。所以對已經在使用 TypeScript 的開發者來說內容比較入門,也比較多是在宣傳 TypeScript 的好處。

使用 TypeScript 的理由

  • 強型別
  • 更著重設計
  • 適合多人開發的專案
  • 與現有專案無縫整合
  • 非常完整的開發工具支援
  • 持續發展的社群

Key Remapping in Mapped Types - QueryResult

soure code

議程中保哥有介紹到一個在 v4.1 中推出,算是進階的使用特性。只要為 querySelector 的 function 宣告為型別 - QueryResult,並將 querySelector 的執行結果指派到變數,就能只透過參數傳入的 selector,就能推敲出變數的型別。

sample.ts

type QueryResult<T extends string> = MatchEachElement<GetElementNames<T>>;

/**
 * Example
 */
declare function querySelector<T extends string>(query: T): QueryResult<T>;

const a = querySelector('div.banner > a.call-to-action')
const b = querySelector('input, div')
const c = querySelector('circle[cx="150"]')
const d = querySelector('button#buy-now')
const e = querySelector('section p:first-of-type');

sample.d.ts

declare const a: HTMLAnchorElement | null;
declare const b: HTMLDivElement | HTMLInputElement | null;
declare const c: SVGCircleElement | null;
declare const d: HTMLButtonElement | null;
declare const e: HTMLParagraphElement | null;

不過透過這個例子,保哥也強調,學習 TypeScript 並不是要成為語言學家。有實務需求再去學就好,掌握基本特性就夠日常開發。


採用 TypeScript 前你該考慮的十件事

講者 Jeremy 跟保哥的立場相反,反對在專案中導入 TypeScript。他先列出 TypeScript 看似不錯的優點 -

  • 為程式碼文件化
  • 作為開發工具可便利撰寫過程
  • 避免大部分明顯或低級的錯誤
  • 已成為流行,社群也很發達

不使用 TypeScript 的理由

  • 開發跟維護都會花更多的時間
  • 解讀程式會更慢,可讀性變差(可以參考 slides 裡的對比圖)
  • 不安全與安全感假象

這裡提到一個名詞 Soundness(健全性)。在符合 Soundness 的型別系統中,不會在編譯或執行時 出現表達式與預期型別不匹配的情況。

而 Soundness 是有分級別的。以 TypeScript 來說,他算是具有一定程度的健全性。例如以下程式是可以捕捉到的錯誤

const increment = (i: number): number => {
    returni + '1';
};
const countdown: number = increment('98765432');

不過 TypeScript 也很明確提出 100% Soundness 不是他的目標,也就是他不能保證變數在執行時具有定義的型別。例如

interface A {
    x: number;
}

let a: A = { x: 3 };
let b: { x: number | string } = a;
b.x = 'unsound';
let x: number = a.x; // unsoundness

a.x.toFixed(0); // what?

上面的程式碼是不正確的,因為從 A 介面中可知 a.x 應該是一個數字。不幸的是,經過一些重新賦值後,它最終以一個字串的形式出現,並且後面的程式碼能通過編譯,但會在執行時出錯。

尤其如果使用 TypeScript 的 any,更容易出現這種錯誤。

講者提出的解法

  • 改用 Facebook 開發的 Flow
    Flow 是 Facebook 開發的型別檢查工具。

    更多與 TypeScript 的比較可以在 Github 的這篇文章查看。

    建置步驟 :

    1. npm i -g flow-bin
    2. npm i -d @babel/core @babel/cli @babel/preset-flow
    3. 新增 babel.config.js,在 presets 欄位加入 @babel/preset-flow
    4. npm run flow init 產生 .flowconfig
    5. VSCode 的設定,把 JavaScript › Validate: Enable 關掉
    6. 安裝 VSCode plugin Flow Language Support。在撰寫程式碼時直接告知錯誤

    在使用上,只要在想進行型別加註和檢查的 js 檔的開頭加 // @flow 即可。

  • 以 xstate 做資料的狀態管理

    XState 是一個狀態管理(State Management)的 Library,負責儲存及描述各種狀態與各種狀態間的轉換,有點類似於 Redux、Flux,不同的地方在於 XState 整個核心都源自於 Statecharts,也就是我們需要定義好整個應用程式會有哪些狀態,和每個狀態下能轉換到哪些狀態(順序性)以及他們之間如何轉換。XState 簡介

  • 以 FP(Functional Programming)轉換開發思維

  • 使用其他語言(e.g. Dart / Clojure / Elm ...)

我還是想用 TypeScript 何解?

參考資源


尚未有邦友留言

立即登入留言