TypeScript

Distributive conditional types

首先这个实现并不是很合理，很反直觉，定义如下

Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of T extends U ? X : Y with the type argument A | B | C for T is resolved as (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y).

由于裸类型在 conditional type 操作中的分裂现象，会导致一个裸的 union，和一个操作符获取的 union 在进行 conditional 操作时会得到不同的接口。

执行 Extract，实际情况经过泛型参数的传递 keyof R2 会被先行处理为一个 union，此时就变为了 ‘a’ | ‘b’ | ‘c’，是一个 naked type parameter 对其进行 extends操作，被转化为 (‘a’ extends ‘a’) | (‘b’ extends ‘a’) | (‘c’ extends ‘a’）,结果为 ‘a’
而直接执行 keyof R2 extends ‘a’ ? keyof R2 : never，keyof R2 未被先转化为 union，此刻便不是一个 naked type parameter，也就是说 keyof 会生成一个 wrap, 使得此类型不是一个裸 union，而泛型参数传递的过程，会导致这层 wrap 被去除 ？

https://stackoverflow.com/questions/51651499/typescript-what-is-a-naked-type-parameter When they say naked here, they mean that the type parameter is present without being wrapped in another type, (ie, an array, or a tuple, or a function, or a promise or any other generic type) Ex:
type NakedUsage<T> = T extends boolean ? "YES" : "NO"
type WrappedUsage<T> = [T] extends [boolean] ? "YES" : "NO"; // wrapped in a tuple
The reason naked vs non nakes is important is that naked usages distribute over a union, meaning the conditional type is applied for each member of the union and the result will be the union of all application
type Distributed = NakedUsage<number | boolean > // = NakedUsage<number> | NakedUsage<boolean> =  "NO" | "YES" 
type NotDistributed = WrappedUsage<number | boolean > // "NO"    
type NotDistributed2 = WrappedUsage<boolean > // "YES"
Read here about conditional type distribution.

实际提示也有体现：
keyof 不是简单提示一个 union

  type NoDistribute<T> = [T] extends [T] ? T : never;
  type NoDistributeN<T> = T extends T ? T : never;
  type a4 = NoDistribute<keyof R2>;
  type a5 = NoDistributeN<keyof R2>;

通过将参数类型 T，始终放置在一个元组中，会避免这种拆 wrap 现象，而直接使用，则会拆 wrap：

有违直觉的例子：


type R2 = {
  a: number;
  b: number;
  c: number;
};
type a2 = Extract<keyof R2, 'a'>; // 'a'
type a3 = keyof R2 extends 'a' ? keyof R2 : never; // never
type Omit<T, K extends Extract<keyof T, string>> = K extends any ? any : K;
type WithoutFoo = Omit<{ foo: string }, "foo">; // ok
type WithoutFooGeneric<P extends { foo: string }> = Omit<P, "foo">; // Error: Type '"foo"' does not satisfy the constraint 'Extract<keyof P, string>'.
type NoDistribute<T> = [T] extends [T] ? T : never;

https://github.com/microsoft/TypeScript/issues/24560
关于泛型 + conditional type + index 的相关内容有挺多违反直觉的实现，值得关注。

以及讨论是否需要关闭这个功能：
https://github.com/microsoft/TypeScript/issues/29368
https://github.com/microsoft/TypeScript/issues/29368#issuecomment-453529532
为了避免裸类型造成的上述现象：
可以对所有需要进行参数传递+conditional判断的类型参数，都做元组包裹

type RouteWithParamsMaker<T extends Route> = (keyof T['Params']) extends infer U
    ? [U] extends [string]
        ? RouteWithParams<U>
        : never
    : never;

FP

Fold

定义请求的中间状态
HTTP requests have one of four states

we haven’t asked yet
we’ve asked, but we haven’t got a response yet
we got a response, but it was an error
we got a response, and it was the data we wanted

With Flow we can easily define a type that represents these four states

type RemoteData<E, D>
  = { type: 'NotAsked' }
  | { type: 'Loading' }
  | { type: 'Failure', error: E }
  | { type: 'Success', data: D };type Model = {
  things: RemoteData<HttpError, Array<Thing>>
};

The nice thing about this data model is, the type checker will now force you to write the correct UI code. It will keep track of the possibility of “things not loaded” and errors, and force you to handle them all in the UI.

通过这样的类型定义，会强制使用该数据的开发者对错误的，loading的情况进行检测

Or, using a more functional style, let’s define a fold function that can be re-utilised in more use cases

或者使用一个 case switch，通常这类方法被称 fold

type Maybe<A> = ?A;
type Model = {
  things: Maybe<Array<Thing>>
};
function fold<R>(
  notAsked: () => R,
  loading: () => R,
  failure: (error: HttpError) => R,
  success: (data: Array<Thing>) => R
): (model: Model) => R {
  return ({ things }) => {
    return things.type === 'NotAsked' ? notAsked() :
      things.type === 'Loading' ? loading() :
      things.type === 'Failure' ? failure(things.error) :
      success(things.data)  }
}
// 生成 fold 策略 再 获取数据
const SomeView = fold(
  () => <div>Please press the button to load the things</div>,
  () => <div>Loading things...</div>,
  (error) => <div>An error has occurred { error }</div>,
  (data) => <div>{ data.map(thing => {}) }</div>
)(model)

业务

分页可搜索选择最大选限制

背景

接口获取分页数据，可搜索，返回 { result: data[], total: number }
每页可选数据条为接口返回数据条，数据条数会因为搜索而变少，但真实数据条总数不变。
可设置选择条数上限
提供全选按钮，选择数达到上限为满选，未选为空，有选择为半选；
- 半选/空选状态点击：执行尽量满选，即当前页至上而下进行选择，直到选完当前页，或到达选择条数上限。
- 全选状态点击：执行清空选择
选择组件提供onCheck接口，返回当前全选，半选内容

注意点
由于分页数据来自后端，在普通分页请求中，total数据表示真实数据条数；而此时如果做了搜索操作，total则不再表示真实数据条数，而是符合条件数据数，不可设为 total。
如真实数据条数不足最大选限制，应视为特殊情况，也就是永不需要进行最大选限制判断。此时的最大选限制 = 真实数据条数
执行尽量满选时，选完现有可选数据条数，或达到最大限制停止。
由于是否满选为外部控制条件，check相关状态需采用受控模式。

可选择数据条数 = 请求返回数据条数
total = 真实数据条数
实际最大选限制 = 真实数据条数 < 项目设置最大选限制？真实数据条数：项目设置最大选限制
全选状态true = 已选数据条数 === 最大选限制

状态分配

固定常量：

项目设置最大选限制

状态变量：

可选数据/当页数据（请求返回数据条）selectableTables
真实数据条数（除搜索外返回total）selectableTablesOriginTotal
已选数据条数 actualChecked
实际最大选限制（真实数据条数，项目设置最大选限制）maxCanSelectedNum
受控选中状态（已选数据条数，真实数据条数，实际最大选限制） checkedControl

选择按钮状态（已选数据条数，最大选限制）

allChecked: checkedKeys.find((i) => i === ‘listAll’)
halfChecked: halfCheckedKeys.find((i) => i === ‘listAll’)

empty: checkedKeys.filter((i) => i === ‘listAll’).length === 0

分支分配

用于计算并设置已选数据条数

if (
/* 表可选数 永用不超过 最大选限制 */selectableTablesOriginTotal < maxSelectedTablesNum
) {
...
} else if (
/* 已经达到最大可选择数 */ actualChecked.length === maxCanSelectedNum
){
...
} else if (
/* 未达到最大选择数，需要执行选到最大数 */ checkedKeys.find((i) => i === 'listAll')
) else {
/* 普通选中与反选 */
}

每日学习笔记

21.07.06