精读《Typescript 4》
1 引言
随着 Typescript 4 Beta 的发布，又带来了许多新功能，其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾，使得此次更新很是有意义。前端
2 简介
可变元组类型
考虑 concat 场景，接收两个数组或者元组类型，组成一个新数组：node
function concat(arr1, arr2) {
return [...arr1, ...arr2];
}
若是要定义 concat 的类型，以往咱们会经过枚举的方式，先枚举第一个参数数组中的每一项：react
function concat<>(arr1: [], arr2: []): [A]; function concat<A>(arr1: [A], arr2: []): [A]; function concat<A, B>(arr1: [A, B], arr2: []): [A, B]; function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C]; function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D]; function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E]; function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)
再枚举第二个参数中每一项，若是要完成全部枚举，仅考虑数组长度为 6 的状况，就要定义 36 次重载，代码几乎不可维护：git
function concat<A2>(arr1: [], arr2: [A2]): [A2]; function concat<A1, A2>(arr1: [A1], arr2: [A2]): [A1, A2]; function concat<A1, B1, A2>(arr1: [A1, B1], arr2: [A2]): [A1, B1, A2]; function concat<A1, B1, C1, A2>( arr1: [A1, B1, C1], arr2: [A2] ): [A1, B1, C1, A2]; function concat<A1, B1, C1, D1, A2>( arr1: [A1, B1, C1, D1], arr2: [A2] ): [A1, B1, C1, D1, A2]; function concat<A1, B1, C1, D1, E1, A2>( arr1: [A1, B1, C1, D1, E1], arr2: [A2] ): [A1, B1, C1, D1, E1, A2]; function concat<A1, B1, C1, D1, E1, F1, A2>( arr1: [A1, B1, C1, D1, E1, F1], arr2: [A2] ): [A1, B1, C1, D1, E1, F1, A2];
若是咱们采用批量定义的方式，问题也不会获得解决，由于参数类型的顺序得不到保证：github
function concat<T, U>(arr1: T[], arr2, U[]): Array<T | U>;
在 Typescript 4，能够在定义中对数组进行解构，经过几行代码优雅的解决可能要重载几百次的场景：typescript
type Arr = readonly any[];
function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
return [...arr1, ...arr2];
}
上面例子中，Arr 类型告诉 TS T 与 U 是数组类型，再经过 [...T, ...U] 按照逻辑顺序依次拼接类型。json
再好比 tail，返回除第一项外剩下元素：redux
function tail(arg) {
const [_, ...result] = arg;
return result;
}
一样告诉 TS T 是数组类型，且 arr: readonly [any, ...T] 申明了 T 类型表示除第一项其他项的类型，TS 可自动将 T 类型关联到对象 rest：数组
function tail<T extends any[]>(arr: readonly [any, ...T]) {
const [_ignored, ...rest] = arr;
return rest;
}
const myTuple = [1, 2, 3, 4] as const;
const myArray = ["hello", "world"];
// type [2, 3, 4]
const r1 = tail(myTuple);
// type [2, 3, ...string[]]
const r2 = tail([...myTuple, ...myArray] as const);
另外以前版本的 TS 只能将类型解构放在最后一个位置：微信
type Strings = [string, string]; type Numbers = [number, number]; // [string, string, number, number] type StrStrNumNum = [...Strings, ...Numbers];
若是你尝试将 [...Strings, ...Numbers] 这种写法，将会获得一个错误提示：
A rest element must be last in a tuple type.
但在 Typescript 4 版本支持了这种语法：
type Strings = [string, string]; type Numbers = number[]; // [string, string, ...Array<number | boolean>] type Unbounded = [...Strings, ...Numbers, boolean];
对于再复杂一些的场景，例如高阶函数 partialCall，支持必定程度的柯里化：
function partialCall(f, ...headArgs) {
return (...tailArgs) => f(...headArgs, ...tailArgs);
}
咱们能够经过上面的特性对其进行类型定义，将函数 f 第一个参数类型定义为有顺序的 [...T, ...U]：
type Arr = readonly unknown[];
function partialCall<T extends Arr, U extends Arr, R>(
f: (...args: [...T, ...U]) => R,
...headArgs: T
) {
return (...b: U) => f(...headArgs, ...b);
}
测试效果以下：
const foo = (x: string, y: number, z: boolean) => {};
// This doesn't work because we're feeding in the wrong type for 'x'.
const f1 = partialCall(foo, 100);
// ~~~
// error! Argument of type 'number' is not assignable to parameter of type 'string'.
// This doesn't work because we're passing in too many arguments.
const f2 = partialCall(foo, "hello", 100, true, "oops");
// ~~~~~~
// error! Expected 4 arguments, but got 5.
// This works! It has the type '(y: number, z: boolean) => void'
const f3 = partialCall(foo, "hello");
// What can we do with f3 now?
f3(123, true); // works!
f3();
// error! Expected 2 arguments, but got 0.
f3(123, "hello");
// ~~~~~~~
// error! Argument of type '"hello"' is not assignable to parameter of type 'boolean'
值得注意的是，const f3 = partialCall(foo, "hello"); 这段代码因为尚未执行到 foo，所以只匹配了第一个 x:string 类型，虽而后面 y: number, z: boolean 也是必选，但由于 foo 函数还未执行，此时只是参数收集阶段，所以不会报错，等到 f3(123, true) 执行时就会校验必选参数了，所以 f3() 时才会提示参数数量不正确。
元组标记
下面两个函数定义在功能上是同样的：
function foo(...args: [string, number]): void {
// ...
}
function foo(arg0: string, arg1: number): void {
// ...
}
但仍是有微妙的区别，下面的函数对每一个参数都有名称标记，但上面经过解构定义的类型则没有，针对这种状况，Typescript 4 支持了元组标记：
type Range = [start: number, end: number];
同时也支持与解构一块儿使用：
type Foo = [first: number, second?: string, ...rest: any[]];
Class 从构造函数推断成员变量类型
构造函数在类实例化时负责一些初始化工做，好比为成员变量赋值，在 Typescript 4，在构造函数里对成员变量的赋值能够直接为成员变量推导类型：
class Square {
// Previously: implicit any!
// Now: inferred to `number`!
area;
sideLength;
constructor(sideLength: number) {
this.sideLength = sideLength;
this.area = sideLength ** 2;
}
}
若是对成员变量赋值包含在条件语句中，还能识别出存在 undefined 的风险：
class Square {
sideLength;
constructor(sideLength: number) {
if (Math.random()) {
this.sideLength = sideLength;
}
}
get area() {
return this.sideLength ** 2;
// ~~~~~~~~~~~~~~~
// error! Object is possibly 'undefined'.
}
}
若是在其余函数中初始化，则 TS 不能自动识别，须要用 !: 显式申明类型：
class Square {
// definite assignment assertion
// v
sideLength!: number;
// ^^^^^^^^
// type annotation
constructor(sideLength: number) {
this.initialize(sideLength);
}
initialize(sideLength: number) {
this.sideLength = sideLength;
}
get area() {
return this.sideLength ** 2;
}
}
短路赋值语法
针对如下三种短路语法提供了快捷赋值语法：
a &&= b; // a = a && b a ||= b; // a = a || b a ??= b; // a = a ?? b
catch error unknown 类型
Typescript 4.0 以后，咱们能够将 catch error 定义为 unknown 类型，以保证后面的代码以健壮的类型判断方式书写：
try {
// ...
} catch (e) {
// error!
// Property 'toUpperCase' does not exist on type 'unknown'.
console.log(e.toUpperCase());
if (typeof e === "string") {
// works!
// We've narrowed 'e' down to the type 'string'.
console.log(e.toUpperCase());
}
}
PS：在以前的版本，catch (e: unknown) 会报错，提示没法为 error 定义 unknown 类型。
自定义 JSX 工厂
TS 4 支持了 jsxFragmentFactory 参数定义 Fragment 工厂函数：
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
还能够经过注释方式覆盖单文件的配置：
// Note: these pragma comments need to be written
// with a JSDoc-style multiline syntax to take effect.
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
let stuff = (
<>
<div>Hello</div>
</>
);
以上代码编译后解析结果以下：
// Note: these pragma comments need to be written
// with a JSDoc-style multiline syntax to take effect.
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
let stuff = h(Fragment, null, h("div", null, "Hello"));
其余升级
其余的升级快速介绍：
构建速度提高，提高了 --incremental + --noEmitOnError 场景的构建速度。
支持 --incremental + --noEmit 参数同时生效。
支持 @deprecated 注释， 使用此注释时，代码中会使用 删除线 警告调用者。
局部 TS Server 快速启动功能， 打开大型项目时，TS Server 要准备好久，Typescript 4 在 VSCode 编译器下作了优化，能够提早对当前打开的单文件进行部分语法响应。
优化自动导入， 如今 package.json dependencies 字段定义的依赖将优先做为自动导入的依据，而再也不是遍历 node_modules 导入一些非预期的包。
除此以外，还有几个 Break Change：
lib.d.ts 类型升级，主要是移除了 document.origin 定义。
覆盖父 Class 属性的 getter 或 setter 如今都会提示错误。
经过 delete 删除的属性必须是可选的，若是试图用 delete 删除一个必选的 key，则会提示错误。
3 精读
Typescript 4 最大亮点就是可变元组类型了，但可变元组类型也不能解决全部问题。
拿笔者的场景来讲，函数 useDesigner 做为自定义 React Hook 与 useSelector 结合支持 connect redux 数据流的值，其调用方式是这样的：
const nameSelector = (state: any) => ({
name: state.name as string,
});
const ageSelector = (state: any) => ({
age: state.age as number,
});
const App = () => {
const { name, age } = useDesigner(nameSelector, ageSelector);
};
name 与 age 是 Selector 注册的，内部实现方式必然是 useSelector + reduce，但类型定义就麻烦了，经过重载能够这么作：
import * as React from 'react';
import { useSelector } from 'react-redux';
type Function = (...args: any) => any;
export function useDesigner();
export function useDesigner<T1 extends Function>(
t1: T1
): ReturnType<T1> ;
export function useDesigner<T1 extends Function, T2 extends Function>(
t1: T1,
t2: T2
): ReturnType<T1> & ReturnType<T2> ;
export function useDesigner<
T1 extends Function,
T2 extends Function,
T3 extends Function
>(
t1: T1,
t2: T2,
t3: T3,
t4: T4,
): ReturnType<T1> &
ReturnType<T2> &
ReturnType<T3> &
ReturnType<T4> &
;
export function useDesigner<
T1 extends Function,
T2 extends Function,
T3 extends Function,
T4 extends Function
>(
t1: T1,
t2: T2,
t3: T3,
t4: T4
): ReturnType<T1> &
ReturnType<T2> &
ReturnType<T3> &
ReturnType<T4> &
;
export function useDesigner(...selectors: any[]) {
return useSelector((state) =>
selectors.reduce((selected, selector) => {
return {
...selected,
...selector(state),
};
}, {})
) as any;
}
能够看到，笔者须要将 useDesigner 传入的参数经过函数重载方式一一传入，上面的例子只支持到了三个参数，若是传入了第四个参数则函数定义会失效，所以业界作法通常是定义十几个重载，这样会致使函数定义很是冗长。
但参考 TS4 的例子，咱们能够避免类型重载，而经过枚举的方式支持：
type Func = (state?: any) => any;
type Arr = readonly Func[];
const useDesigner = <T extends Arr>(
...selectors: T
): ReturnType<T[0]> &
ReturnType<T[1]> &
ReturnType<T[2]> &
ReturnType<T[3]> => {
return useSelector((state) =>
selectors.reduce((selected, selector) => {
return {
...selected,
...selector(state),
};
}, {})
) as any;
};
能够看到，最大的变化是不须要写四遍重载了，但因为场景和 concat 不一样，这个例子返回值不是简单的 [...T, ...U]，而是 reduce 的结果，因此目前还只能经过枚举的方式支持。
固然可能存在不用枚举就能够支持无限长度的入参类型解析的方案，因笔者水平有限，暂未想到更好的解法，若是你有更好的解法，欢迎告知笔者。
4 总结
Typescript 4 带来了更强类型语法，更智能的类型推导，更快的构建速度以及更合理的开发者工具优化，惟一的几个 Break Change 不会对项目带来实质影响，期待正式版的发布。
讨论地址是： 精读《Typescript 4》· Issue #259 · dt-fe/weekly
若是你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。
关注 前端精读微信公众号
版权声明：自由转载-非商用-非衍生-保持署名（ 创意共享 3.0 许可证）
本文使用 mdnice 排版
- 1. 精读《Typescript 4》
- 2. 精读《Typescript 3.2 新特性》
- 3. 《精通Spring MVC 4》——导读
- 4. 《精通 ASP.NET MVC 4》----导读
- 5. 【TypeScript】TypeScript 学习 4——模块
- 6. TypeScript 基础精粹
- 7. Typescript 精彩履历
- 8. TypeScript学习4-类
- 9. typescript - 4.es5与typescript的类与继承
- 10. 精通Apache Flink读书笔记--三、4
- 更多相关文章...
- • RSS 阅读器 - RSS 教程
- • PHP MySQL 读取数据 - PHP教程
- • JDK13 GA发布：5大特性解读
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
-
每一个你不满意的现在，都有一个你没有努力的曾经。