如何使用函數式思維重構TypeScript 代碼

這篇文章給大家介紹如何使用函數式思維重構TypeScript 代碼，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

談到函數式編程時，我們常提到機制、方法，而不是核心原則。函數式編程不是關于 Monad、Monoid 和 Zipper  這些概念的，雖然它們確實很有用。從根本上來說，函數式編程就是關于如使用通用的可復用函數進行組合編程。本文是我在重構 TypeScript  代碼時使用函數式的一些思考的結果。

首先，我們需要用到以下幾項技術：

• 盡可能使用函數代替簡單值

• 數據轉換過程管道化

• 提取通用函數

來，開始吧!

假設我們有兩個類，Employee 和 Department。Employee 有 name 和 salary 屬性，Department 只是  Employee 的簡單集合。

class Employee {   constructor(public name: string, public salary: number) {} } class Department {   constructor(public employees: Employee[]) {}   works(employee: Employee): boolean {     return this.employees.indexOf(employee) > -1;   } }

我們要重構的是 averageSalary 函數。

function averageSalary(employees: Employee[], minSalary: number, department?: Department): number {    let total = 0;    let count = 0;    employees.forEach((e) => {      if(minSalary <= e.salary && (department === undefined || department.works(e))){        total += e.salary;        count += 1;      }    });   return total === 0 ? 0 : total / count;

averageSalary 函數接收 employee 數組、***薪資 minSalary 以及可選的 department 作為參數。如果傳了  department 參數，函數會計算該部門中所有員工的平均薪資;若不傳，則對全部員工進行計算。

該函數的使用方式如下：

describe("average salary", () => {   const empls = [     new Employee("Jim", 100),     new Employee("John", 200),     new Employee("Liz", 120),     new Employee("Penny", 30)   ];   const sales = new Department([empls[0], empls[1]]);      it("calculates the average salary", () => {     expect(averageSalary(empls, 50, sales)).toEqual(150);     expect(averageSalary(empls, 50)).toEqual(140);   });

需求雖簡單粗暴，可就算不提代碼難以拓展，其混亂是顯而易見的。若新增條件，函數簽名及接口就不得不發生變動，if 語句也會也越來越臃腫可怕。

我們一起用一些函數式編程的辦法重構這個函數吧。

使用函數代替簡單值

使用函數代替簡單值看起來似乎不太直觀，但這卻是整理歸納代碼的強大辦法。在我們的例子中，這樣做，意味著要將 minSalary 和 department  參數替換成兩個條件檢驗的函數。

type Predicate = (e: Employee) => boolean; function averageSalary(employees: Employee[], salaryCondition: Predicate,    departmentCondition?: Predicate): number {   let total = 0;   let count = 0;   employees.forEach((e) => {     if(salaryCondition(e) && (departmentCondition === undefined || departmentCondition(e))){       total += e.salary;       count += 1;     }   });   return total === 0 ? 0 : total / count; } // ... expect(averageSalary(empls, (e) => e.salary > 50, (e) => sales.works(e))).toEqual(150);

我們所做的就是將 salary、department  兩個條件接口統一起來。而此前這兩個條件是寫死的，現在它們被明確定義了，并且遵循一致的接口。這次整合允許我們將所有條件作為數組傳遞。

function averageSalary(employees: Employee[], conditions: Predicate[]): number {   let total = 0;   let count = 0;   employees.forEach((e) => {     if(conditions.every(c => c(e))){       total += e.salary;       count += 1;     }   });   return (count === 0) ? 0 : total / count; } //... expect(averageSalary(empls, [(e) => e.salary > 50, (e) => sales.works(e)])).toEqual(150);

條件數組只不過是組合的條件，可以用一個簡單的組合器將它們放到一起，這樣看起來更加明晰。

function and(predicates: Predicate[]): Predicate{   return (e) => predicates.every(p => p(e)); } function averageSalary(employees: Employee[], conditions: Predicate[]): number {   let total = 0;   let count = 0;   employees.forEach((e) => {     if(and(conditions)(e)){       total += e.salary;       count += 1;     }   });   return (count == 0) ? 0 : total / count; }

值得注意的是，“and” 組合器是通用的，可以復用并且還可能拓展為庫。

提起結果

現在，averageSalary 函數已健壯得多了。我們可以加入新條件，無需破壞函數接口或改變函數實現。

數據轉換過程管道化

函數式編程的另外一個很有用的實踐是將所有數據轉換過程變成管道。在本例中，就是將 filter 過程提取到循環外面。

function averageSalary(employees: Employee[], conditions: Predicate[]): number {   const filtered = employees.filter(and(conditions));   let total = 0   let count = 0   filtered.forEach((e) => {     total += e.salary;     count += 1;   });   return (count == 0) ? 0 : total / count; }

這樣一來計數的 count 就沒什么用了。

function averageSalary(employees: Employee[], conditions: Predicate[]): number{   const filtered = employees.filter(and(conditions));   let total = 0   filtered.forEach((e) => {     total += e.salary;   });   return (filtered.length == 0) ? 0 : total / filtered.length; }

接下來，如在疊加之前將 salary 摘取出來，求和過程就變成簡單的 reduce 了。

function averageSalary(employees: Employee[], conditions: Predicate[]): number {   const filtered = employees.filter(and(conditions));   const salaries = filtered.map(e => e.salary);   const total = salaries.reduce((a,b) => a + b, 0);   return (salaries.length == 0) ? 0 : total / salaries.length; }

提取通用函數

接著我們發現，***兩行代碼和當前域完全沒什么關系。其中不包含任何與員工、部門相關的信息。僅僅只是一個計算平均數的函數。所以也將其提取出來。

function average(nums: number[]): number {   const total = nums.reduce((a,b) => a + b, 0);   return (nums.length == 0) ? 0 : total / nums.length; } function averageSalary(employees: Employee[], conditions: Predicate[]): number {   const filtered = employees.filter(and(conditions));   const salaries = filtered.map(e => e.salary);   return average(salaries); }

又一次，提取出的函數是完全通用的。

***，將所有 salary 部分提出來之后，我們得到***方案。

function employeeSalaries(employees: Employee[], conditions: Predicate[]): number[] {   const filtered = employees.filter(and(conditions));   return filtered.map(e => e.salary); } function averageSalary(employees: Employee[], conditions: Predicate[]): number {   return average(employeeSalaries(employees, conditions)); }

對比原始方案和***方案，我敢說，毫無疑問，后者更棒。首先，它更通用(我們可以不破壞函數接口的情況下添加新類型的判斷條件)。其次，我們從可變狀態(mutable  state)和 if 語句中解脫出來，這使代碼更容易閱讀、理解。

何時收手

函數式風格的編程中，我們會編寫許多小型函數，它們接收一個集合，返回新的集合。這些函數能夠以不同方式組合、復用 ——  棒極了。不過，這種風格的一個缺點是代碼可能會變得過度抽象，導致難以讀懂，那些函數組合在一起到底要干嘛?

我喜歡使用樂高來類比：樂高積木能夠以不同形式放在一起 ——  它們是可組合的。但注意，并不是所有積木都是一小塊。所以，在使用本文所述技巧進行代碼重構時，千萬別妄圖將一切都變成接收數組、返回數組的函數。誠然，這樣一些函數組合使用極度容易，可它們也會顯著降低我們對程序的理解能力。

本文展示了如何使用函數式思維重構 TypeScript 代碼。我所遵循的是以下幾點規則：

• 盡可能使用函數代替簡單值

• 數據轉換過程管道化

• 提取通用函數

關于如何使用函數式思維重構TypeScript 代碼就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。