精读Typescript-4

1次阅读

共计 7850 个字符，预计需要花费 20 分钟才能阅读完成。

随着 Typescript 4 Beta 的公布，又带来了许多新性能，其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾，使得这次更新十分有意义。

思考 concat 场景，接管两个数组或者元组类型，组成一个新数组：

function concat(arr1, arr2) {return [...arr1, ...arr2];
}

如果要定义 concat 的类型，以往咱们会通过枚举的形式，先枚举第一个参数数组中的每一项：

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 次重载，代码简直不可保护：

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];

如果咱们采纳批量定义的形式，问题也不会失去解决，因为参数类型的程序得不到保障：

function concat<T, U>(arr1: T[], arr2, U[]): Array<T | U>;

在 Typescript 4，能够在定义中对数组进行解构，通过几行代码优雅的解决可能要重载几百次的场景：

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] 依照逻辑程序顺次拼接类型。

再比方 tail，返回除第一项外剩下元素：

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[]];

构造函数在类实例化时负责一些初始化工作，比方为成员变量赋值，在 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

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 类型。

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，则会提醒谬误。

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 的后果，所以目前还只能通过枚举的形式反对。

当然可能存在不必枚举就能够反对有限长度的入参类型解析的计划，因笔者程度无限，暂未想到更好的解法，如果你有更好的解法，欢送告知笔者。

Typescript 4 带来了更强类型语法，更智能的类型推导，更快的构建速度以及更正当的开发者工具优化，惟一的几个 Break Change 不会对我的项目带来本质影响，期待正式版的公布。

探讨地址是：精读《Typescript 4》· Issue #259 · dt-fe/weekly

如果你想参加探讨，请点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

本文应用 mdnice 排版

正文完

前端

发表至：前端

2020-07-13

0

关于前端:vue中使用Echarts展示多个提示框

关于前端:小程序开发过程有哪些如何进行小程序开发

关于前端:CSS画雪容融

关于前端:Nuxt3-离我们还有多远

个人学习系列-Spring-Boot使用Cache缓存

精读Typescript-4

1 引言

2 简介

可变元组类型

元组标记

Class 从构造函数推断成员变量类型

短路赋值语法

catch error unknown 类型

自定义 JSX 工厂

其余降级

3 精读

4 总结

站内搜索