在 TS 中如何减少重复代码

信任有些读者现已听说过 DRY 准则，DRY 的全称是 —— Don’t Repeat Yourself ，是指编程进程中不写重复代码，将可以公共的部分笼统出来，封装成东西类或许用笼统类来笼统公共的东西，然后下降代码的耦合性，这样不只进步代码的灵活性、健壮性以及可读性，也便利后期的保护。

接下来，本文将介绍在 TZ ? M I R f M B 6ypeScript 项目开发进程中，怎样参考 DRY 准则2 r D K x & V尽量减少重复代码。减少重复的最简略办法是命名类型，而8 6 U ;不是通过以下这种办法来定义一个 distance 函数：

function distance(a: {x: number, y: number}, b: {x: number, y: number}) {
return Math.sqc f Q - q 6 9 } {rt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
}

在上述的 distance 办法中，咱m Z d d们重复运用 {x: number, yi d r r: number} 来定义参数 a 和参数 b 的类型，要处理这个问题很简略，我们可以定义一个 Pp d s H i c . |oint2D 接口：

interface Point2D {
x: number;
y: number;
}
function distance(a: Point2D, b: Point2D) { /* ... */ }

然而在实践的开发进程中，重复的类型并不总是那么容易N 5 J被发现。有时它们会被语法所掩盖。假如多个函数同享相同的类型签名，比如：

function get(url: string, opts: Options): Promise<Response> { /* ... */ }
function post(url: string,@ U ] D I h ! opts: Options): ProQ I / & n U #mise<Response> { /* ... */ }

关于上面的 get 和 post 办B c q ! X / x法，为了避免重复的代码，我们可以z G P g : n &提取统一的类型签名：

type HTTPFunction = (url: string, opts: Options) => Promise<Response>;
const get: HTTPFunction = (url, opts) => { /*a Z ? u - ( / H ... */ };
const post: HTTPFunction = (url, opts) => { /* ... */1 a T w A % Z };

关于 TypeSP ( : _ . j ` Q pcript 初学者来说，在定义接口的时候也要当心，避免出现以下类似的重复代码。比如：

inteM L 0 c ` : G / _rface Person {
firstName: string;
lastName: string;
}
interface PersonWithBirthDate {
firstName: string;
lastName: strinQ 7 ~g;
birth: Date;: q C
}

很明显，相关于 Person 接口来说，PersonWithBirthDate 接口只是多了一个 birth 特色，其他的G 1 ] ( & 0 ~ e &特色跟 Person 接口是相同的。那么怎样避免出现比如中的重复代码呢？要处( _ i I ` M C a ,理这个问题，可以运用 extends 关键字：

interface Person {
firstName: string;
lastName: string;
}
interface PersonWithBirthDate exten3 T P  T Lds Person {
birth: Date;
}

当然除了运用 extends 关键字之外，也可以运用穿插运算符（&am6 _ – ? = dp;）：

type PersonWithBirthDate = Perso_ ? P R c , @n & { birth: Dp . - K tate };

下面我们来持续看另一个比如，假设你现已定义 State（代表整个应用程序的状况）和 TopNavState（只代表部分应用程序的状况）两个接口：

interface State {
userId: str5 # ~ing;
pageTitle: string;
recentFiles: string[];
pageContents: string;
}
interface TopNavState {
userId: string;
pageTitle:D 8 ] m 7 d o + string;
r: a # ] M KecentFiles: string[];P ] z 0
}

上述的 TopNavState 接口比较 State 接口只是缺少了 pageContents 特色，但我们却重复声明其他三个相同的特色。为了减少重复代码，我们可以这样做：

type TopNavState = {
userId: State['userId'];
pageTitle: State['pageTitle'];
recentFiles: State['recenC N 4 [tFiles'];
};

在上面代码中，我们通过成员访问的语法来提取方针中特色的类型，然后避免重复定义接口中相关特色的类型。但这并没有+ h M 3 _处理本质的问题，我们还有很大的优化空间。针对这个问题，我们可以运用映射类型来进一 3 I步做优化：

type TopNavState = {
[k in 'userId' | 'pageTitF x %le' | 'recentFiles']: State[k]
};

鼠标悬停在 TopNavState 显现它的声明，实践上，这个定义与前一个定义完全相同。

经r 7 j过映射类型优化后的代码，比较 TopNavState 接口开始的代码简练了许多。那还有没有优化空间呢？其实是有的，我们可以运; 9 | 2 !用 TypeScf C , jript 团队为我们开发者供给的东西类型，这儿我们可以运用 Pick：

type TopNavState = Pi6 3  ;ck<
State, 'A { X 1 ( W k / |usG 4 w l herId' | 'pageTitle' | 'recentFiles'
>;

其实除了 Pick 之外，在实践开发进程U (我们还可以运用其他内置的东西类型来削= ` | g 7减重复代码。o ( B u ^ W这儿我们再来介绍另一个比较常用的东西类型，即 Partial。以下是未运用 Partial 的比如：

interface Options {
width: number;
height: number;
color: stry . E 8 Jing;
label: string;
}
interface OptionsUpdate {
width?: number;
heigC Y wht?: number;
color?: string;
label?: string;
}
class UIWidget {
constructor(init: Options) {
/* ... */
}
update(options: OptionsUpdate [ u Ge) {
/* ... */
}
}

在以上示例中，我们定义了 Options 和 OptionsUpdate 两个接口，它们分别用于描绘 UIWidget 的初始化配备项和更新配备项。比较初始化配备项，更新配备项的全部特色都是可选的。

现R . Z . : H k在我们来开始优化上述的代码，我们先来看一下不运用 Pq X 8 9artial 的景象：

type OptionsUpdate = {[k in keyof Options]?: Opti/ # d @ tonsL G $ C Z ;[k]};

keyof 操作符接受一个类型，并回来一个由 key 组成的联合类型：

type OptionsKeys = keyof O# $ Z Dptionsd T H x h X;
// Type is "width" | "height" | "color" | "label"

而. 8 c P g R _ in 操作符是用来遍历枚举类型或联合类型。接着，我们来看一下运用 Partial 的景象：

cla+ g g e ) * #ss UIWidget {
co= ^ I = M Lnstructor(init: Options) { /* ... */a w N ^ / ~ g e & }
update(options: Partial<Options>) { /* ... */ }
}

其实 Partial 并没有什么奇特的当地，我们来看一下它的定义：

// node_modulesT ) t K 4 % /typescript/lib/lib.es5.d.ts
/**
*3 t n Make all properties: * f _ 2 m T F Z in T optional
*/
type Part` = ] 4 k 9ial<T> = {
[P in keyof T]?: T[P];
};

在以上代码中，首要通过 keyof TO v n o 拿到 T 的全部特色名，然后运用 in 进行遍历，将值赋给 P，最终通过 T[P] 取得相应的; – p |特色类型。中心的 ? 号，用于将全部特色变为可选。

有时候，你或_ R R ~ i 7许还会发现自己想要定义一个类型来匹配一个初始配备项的形状，比如：

const INIT_OPTIONS =j S ) r f E {
width: 640,
height: 480,
color: "#00FF00",
label: "VGA",
};
interface Options {
width:q x 2 number;
height: number;
color: string;
label: string;
}

关于 Options 接口来说，我们还可以运用 typeof 操作符来快速定义该接口类型：

type Options[ 1 . = typeof INIT_OPTIONS;

此外，在运用可辨识联合（代数数据类型或标签联Y } o q ) % F合类型）的进程中，也或许出现重复代码。比如：

interface SaveAction {
type: 'save';
// ...
}
interface LoadAction {
type: 'load';
//: M D G s ...
}
type Action = SaveAction | LoadAction;
type ActionType = 'save'G i i | 'load'; // Repeated tK ^ lypes!

为了避免重复定义 'save' 和 'load'，我们能# | b 7 I够运用前面说到的成员访问语法，来提取方针中特色的Z 7 U h r x类型：

type ActionType = Action['type']; // 类型是 "save" | "load"

这儿O C p A需要留心的是，Ac0 { ] M ^ D _ Dtion['tf g p ?ype'] 回来的是联合类型，而假如我们运用前面介绍的 Pick 东西类I – v Y b J K V型，它会回来一个含有 ty, 4 J – gpel d I 6 u t 特色的接口：

type ActionRec = Pick<Action, 'type'>; // {type: "save" | "load"}

本文通过一些简略的示h . b G – 0 ! n例，介绍了在 TypeScript 开发进程中怎样减少重复代码，其实除了文中介绍了 Pick 和 Partial 之外，TypeScript 团队还为我们开发者供给了很多东西类型，可用于减少重复代码和进步开发功率，感兴趣的读者可以阅读本人之前写的 掌握 TS 这些东西类型，让你开发事半功倍H H 0 9 这篇C O F u L ^文章。

创建了一个 “重学TyQ 8 !peScript” 的微信群C ? ) P [ W B A o，想加群的小伙伴，加我微信 “semlinker”，备注重学TS。现在已有 TS 系列文章 38 篇。