JSDC 2020 回顾 - Typescript

用不用 TypeScript 随便你，反正我是用了

• 讲者简报
• 保哥的 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 何解?

• 先了解 type checker 的运作原理与限制，并小心绕过去
• 使用 Algebraic Data Type(ADT) pattern
  • An Introduction to ADTs and Structural Pattern Matching in TypeScript
  • Using TypeScript ADT's to write more reliable React
• 使用 v4.1 出的 template literal types 做 type-level programming

参考资源

• Is TypeScript Worth It?(原文)
• Is TypeScript Worth It?(中文)