講者保哥是 TypeScript 的支持者。議程目的是對還沒使用 TypeScript 的開發者進行 promotion。所以對已經在使用 TypeScript 的開發者來說內容比較入門,也比較多是在宣傳 TypeScript 的好處。
議程中保哥有介紹到一個在 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 並不是要成為語言學家。有實務需求再去學就好,掌握基本特性就夠日常開發。
講者 Jeremy 跟保哥的立場相反,反對在專案中導入 TypeScript。他先列出 TypeScript 看似不錯的優點 -
這裡提到一個名詞 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 的這篇文章查看。
建置步驟 :
npm i -g flow-bin
npm i -d @babel/core @babel/cli @babel/preset-flow
@babel/preset-flow
npm run flow init
產生 .flowconfig在使用上,只要在想進行型別加註和檢查的 js 檔的開頭加 // @flow
即可。
以 xstate 做資料的狀態管理
XState 是一個狀態管理(State Management)的 Library,負責儲存及描述各種狀態與各種狀態間的轉換,有點類似於 Redux、Flux,不同的地方在於 XState 整個核心都源自於 Statecharts,也就是我們需要定義好整個應用程式會有哪些狀態,和每個狀態下能轉換到哪些狀態(順序性)以及他們之間如何轉換。XState 簡介
以 FP(Functional Programming)轉換開發思維
使用其他語言(e.g. Dart / Clojure / Elm ...)