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; // unsoundnessa.x.toFixed(0); // what?

上面的程式码是不正确的，因为从 A 介面中可知 a.x 应该是一个数字。不幸的是，经过一些重新赋值后，它最终以一个字串的形式出现，并且后面的程式码能通过编译，但会在执行时出错。

尤其如果使用 TypeScript 的 any，更容易出现这种错误。

讲者提出的解法

改用 Facebook 开发的 Flow
Flow 是 Facebook 开发的型别检查工具。

更多与 TypeScript 的比较可以在 Github 的这篇文章查看。

建置步骤 :

npm i -g flow-binnpm i -d @babel/core @babel/cli @babel/preset-flow 新增 babel.config.js，在 presets 栏位加入 @babel/preset-flownpm run flow init 产生 .flowconfigVSCode 的设定，把 JavaScript › Validate: Enable 关掉安装 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) patternAn Introduction to ADTs and Structural Pattern Matching in TypeScriptUsing TypeScript ADT's to write more reliable React使用 v4.1 出的 template literal types 做 type-level programming

参考资源

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