ts-type-ext

Typescript 高级类型扩展

场景

在使用 typescript 时, 经常需要定义一些自定义类型
暂时只设置了 3 种类型, 欢迎贡献代码

Install

npm install --save ts-type-ext

Usage

Omit

在 React 的属性定义中, 有时会遇到: 容器组件需要传递 props 给木偶组件
这时, 二者的 props 存在重叠
我们可以以木偶组件属性 IPropsBase 为基础, 计算容器组件的 IProps:

import {Omit} from 'ts-type-ext';
 
// 子组件的属性
interface IPropsBase {
  id: string;         <== 共有
  name: string;       <== 共有
  content: string;    <== 仅子组件有
  onSubmit: (e: React.FormEvent) => ReactNode;  <== 仅子组件有
}
 
// 父组件的属性
type IProps = Omit<IPropsBase, 'onSubmit' | 'content'>
 
// IProps 现在相当于: {id:string; name:string;}
 

Stringify / Boolify

假设我们在操作一个表单, 表单有 name, title, content 三个 field, 因此我们可以这样写 values 的类型定义:\

interface Values {
  name: any;
  title: any;
  content: any;
}

由于每个字段都需要校验, 需要保存校验结果, 因此我们需要一个 Errors 类型定义, 它应该是这样的:\

interface Errors {
  name: string;   <== string类型
  title: string;   <== string类型
  content: string;   <== string类型
}

可以看出, Errors 与 Values 的 key 完全相同, 但 value 的类型换成了 string
Stringify 闪亮登场:\

import { Stringify } from 'ts-type-ext';
type Errors = Stingify<Values>;

简单, 明快!

Boolify

同 Stringify, 如果我们需要有一个 HasTouched , value 的类型显然都是 boolean,
使用type HasTouched = Boolify<Values>就好了

License

MIT © g770728y