CSS

分段省略

inline-block 设置基本宽度及容器，内部使用line-flex设置动态均分（适用于简单实现省略的场景）

  1. <span className={styles.wrapper}>
  2.   <span  className={styles.container}>
  3.     <span className={styles.block}>xxxxxxxx</span>
  4.     <span>(</span>
  5.     <span className={styles.block}>vvvvvvvv</span>
  6.     <span>)</span>
  7.    </span>    
  8. </span>
  1. .wrapper {
  2.   width: calc(100% - 30px);
  3.   word-break: keep-all;
  4.   white-space: nowrap;
  5.   text-overflow: ellipsis;
  6.   overflow: hidden;
  7.   display: inline-block;
  9.   .container {
  10.     display: inline-flex;
  11.     max-width: 100%;
  13.     .block {
  14.       text-overflow: ellipsis;
  15.       overflow: hidden;
  16.     }
  17.   }
  18. }

TypeScript

非空数组断言

使用 interface 进行 Array 类型重载，主要改变 0 位必定有内容，及 pop 返回非 undefined，再通过谓语函数进行断言以改变词法上下文中的类型。

  1. /** Array 重载 */
  2. interface NonEmptyArray<A> extends Array<A> {
  3.   0: A;
  4.   pop(): A;
  5. }
  7. // 谓语函数
  8. const isStackNonEmpty = <T extends unknown>(a: T[]): a is NonEmptyArray<T> => a && a.length > 0

对于自造 stack 进行 pop 推出，push 推入的场景比较适用。