TypeScript 中的函数式编程

Akram El Assas

4.91/5 (7投票s)

2023 年 10 月 20 日

CPOL

17分钟阅读

17994

214

通过代数、数字、欧几里得平面和分形进行 TypeScript 函数式编程

引言

在 TypeScript 中，函数只不过是对象。因此，函数可以被构造、作为参数传递、从函数返回或赋值给变量。因此，TypeScript 拥有一等函数。更确切地说，TypeScript 支持以下内容：

高阶函数的参数
高阶函数的返回值
嵌套函数
匿名函数
闭包
部分应用（ECMAScript 5）

本文不讨论函数式编程的基础知识，因为您可以在互联网上找到大量关于此主题的资源。相反，它将讨论 TypeScript 中应用于代数、数字、欧几里得平面和分形的函数式编程。本文提供的示例将从简单到复杂，但始终以简单、直接和易于理解的方式进行说明。

TypeScript 环境

要运行源代码，您需要安装Node.js。安装 Node.js 后，下载源代码存档，解压缩，在终端中转到您解压缩的源代码文件夹，设置 TypeScript 环境并使用以下命令安装所有必需的依赖项：

npm install

要运行数字演示，请运行以下命令：

npm run numbers

要运行欧几里得平面演示，请运行以下命令：

npm run plane

要运行分形演示，请运行以下命令：

npm run fractals

通过函数表示数据

设 S 为任意元素集合 a、b、c ...（例如，桌子上的书或欧几里得平面的点），设 S' 为这些元素的任意子集（例如，桌子上的绿色书或半径为 1、圆心在欧几里得平面原点的圆内的点）。

集合 S' 的特征函数 S'(x) 是一个函数，它将 true 或 false 与 S 的每个元素 x 关联起来。

S'(x) = true if x is in S'
S'(x) = false if x is not in S'

设 S 为桌子上的书的集合，设 S' 为桌子上的绿色书的集合。设 a 和 b 是两本绿色书，设 c 和 d 是桌子上的两本红色书。则：

S'(a) = S'(b) = true
S'(c) = S'(d) = false

设 S 为欧几里得平面上的点集，设 S' 为以原点 (0, 0) 为圆心、半径为 1 的圆内的点集（单位圆）。设 a 和 b 是单位圆内的两个点，设 c 和 d 是以欧几里得平面原点为中心、半径为 2 的圆内的两个点。则：

S'(a) = S'(b) = true
S'(c) = S'(d) = false

因此，任何集合 S' 都可以通过其特征函数来表示。该函数以元素作为参数，如果该元素在 S' 中则返回 true，否则返回 false。换句话说，集合（抽象数据类型）可以通过 TypeScript 中的函数来表示。

type Set<T> = (x: T) => boolean

在接下来的章节中，我们将看到如何用函数式的方式通过 TypeScript 表示集合代数中的一些基本集合，然后我们将定义集合上的通用二元运算。然后，我们将把这些运算应用于数字，然后应用于欧几里得平面的子集。集合是抽象数据结构，数字的子集和欧几里得平面的子集是抽象数据结构的表示，最后，二元运算是作用于任何抽象数据结构表示的通用逻辑。

对于想进一步深入的人

您可以看到通过函数式编程在 TypeScript 中进行集合代数有多么容易。在前面的章节中展示了最基本定义。但是，如果您想更进一步，可以考虑：

集合上的关系
抽象代数，例如幺半群、群、域、环、K-向量空间等
容斥原理
罗素悖论
康托悖论
对偶向量空间
定理和推论

欧几里得平面

上一节中，在 TypeScript 中实现了集合上的基本概念。在本节中，我们将练习在欧几里得平面上实现的这些概念。

函数

本节介绍欧几里得平面上集合的函数。

平移

设 translatePoint 为在平面上平移点的函数。在欧几里得几何中，translatePoint 是一个函数，它将给定点沿指定方向移动恒定距离。因此，TypeScript 中的实现如下：

const translatePoint = (deltax: number, deltay: number) => 
                       (p: Point) => new Point(p.x + deltax, p.y + deltay)

其中 (deltax, deltay) 是平移的恒定向量。

设 translate 为在平面上平移集合的函数。此函数在 TypeScript 中实现如下：

const translate = (e: PlaneSet, deltax: number, deltay: number) => 
                  (p: Point) => e(translatePoint(-deltax, -deltay)(p))

translate 接受 deltax（第一个欧几里得维度的增量距离）和 deltay（第二个欧几里得维度的增量距离）作为参数。如果点 P (x, y) 在集合 S 中被平移，则其坐标将变为 (x', y') = (x + deltax, y + deltay)。因此，点 (x' - deltax, y' - deltay) 始终属于集合 S。在集合代数中，translate 被称为同构，换句话说，所有平移的集合构成了平移群 T，它与空间本身同构。这解释了函数的主要逻辑。

因此，在我们的 HTML5 页面中运行下面的代码：

let translate_timer: ReturnType<typeof setInterval>
function translate_op() {
  let deltay = 0
  clearTimeout(scale_timer)
  clearTimeout(rotate_timer)
  translate_timer = setInterval(() => {
    deltay = deltay <= euclideanPlane.height ? deltay + 20 : 0
    euclideanPlane.draw(translate(disk(new Point(0, -50), 50), 0, deltay), 'ep_op')
  }, 1000)
}

其中 ep_op 是 canvas 的 id。

<canvas id="ep_op"></canvas>

得到如下结果：

相似变换

设 scalePoint 为将任意点 M 映射到另一点 N 的函数，使得线段 SN 与 SM 在同一条直线上，但按比例因子 λ 缩放。在集合代数中，Scale 的公式如下：

因此，TypeScript 中的实现如下：

const scalePoint = (lambdax: number, lambday: number, deltax: number, deltay: number) 
      => (p: Point) => new Point(lambdax * p.x + deltax, lambday * p.y + deltay)

其中 (deltax, deltay) 是平移的恒定向量，(lambdax, lambday) 是 lambda 向量。

设 scale 为在平面上对集合应用相似变换的函数。此函数在 TypeScript 中实现如下：

const scale = (e: PlaneSet, lambdax: number, lambday: number, deltax: number, 
               deltay: number) => (p: Point) => e(scalePoint(1 / lambdax, 1 / lambday, 
               -deltax / lambdax, -deltay / lambday)(p))

scale 接受 deltax（第一个欧几里得维度的增量距离）、deltay（第二个欧几里得维度的增量距离）和 (lambdax, lambday)（恒定因子向量 λ）作为参数。如果点 P (x, y) 通过 scale 在集合 S 中进行变换，则其坐标将变为 (x', y') = (lambdax * x + deltax, lambday * y + deltay)。因此，点 ((x' - deltax) / lambdax, (y' - deltay) / lambday) 始终属于集合 S，当然，前提是 lambda 不等于零向量。在集合代数中，scale 被称为同构，换句话说，所有相似变换的集合构成了相似变换群 H，它与空间本身 \ {0} 同构。这解释了函数的主要逻辑。

因此，在我们的 HTML5 页面中运行下面的代码：

let scale_timer: ReturnType<typeof setInterval>
function scale_op() {
  let deltay = 0
  let lambday = 0.05
  clearTimeout(translate_timer)
  clearTimeout(rotate_timer)
  scale_timer = setInterval(() => {
    deltay = deltay <= euclideanPlane.height ? deltay + 20 : 0
    lambday = deltay <= euclideanPlane.height ? lambday + 0.05 : 0.05
    euclideanPlane.draw(scale(disk(new Point(0, -50), 50), 1, lambday, 0, deltay), 'ep_op')
  }, 1000)
}

得到如下结果：

旋转

设 rotatePoint 为使点旋转角度 θ 的函数。在矩阵代数中，rotatePoint 的公式如下：

其中 (x', y') 是旋转后点的坐标，x' 和 y' 的公式如下：

此公式的演示非常简单。可以看看这个旋转。

下方是演示。

因此，TypeScript 中的实现如下：

const rotatePoint = (theta: number) => (p: Point) => new Point(p.x * Math.cos(theta) 
      - p.y * Math.sin(theta), p.x * Math.sin(theta) + p.y * Math.cos(theta))

设 rotate 为在平面上以角度 θ 对集合应用旋转的函数。此函数在 TypeScript 中实现如下。

const rotate = (e: PlaneSet, theta: number) => (p: Point) => e(rotatePoint(-theta)(p))

rotate 是一个函数，它以 theta（旋转角度）作为参数。如果点 P (x, y) 通过 rotate 在集合 S 中进行变换，则其坐标将变为 (x', y') = (x * cos(theta) - y * sin(theta), x * sin(theta) + y * cos(theta))。因此，点 (x' * cos(theta) + y' * sin(theta), -x' * sin(theta) + y' * cos(theta)) 始终属于集合 S。在集合代数中，rotate 被称为同构，换句话说，所有旋转的集合构成了旋转群 R，它与空间本身同构。这解释了函数的主要逻辑。

因此，在我们的 HTML5 页面中运行下面的代码：

let rotate_timer: ReturnType<typeof setInterval>
function rotate_op() {
  let theta = 0
  clearTimeout(translate_timer)
  clearTimeout(scale_timer)
  rotate_timer = setInterval(() => {
    euclideanPlane.draw(rotate(horizontalHalfPlane(-90, true), theta), 'ep_op')
    theta = (theta + Math.PI / 2) % (2 * Math.PI)
  }, 1000)
}

得到如下结果：

对于想进一步深入的人

非常简单，不是吗？对于想进一步深入的人，您可以探索这些：

椭圆
三维欧几里得空间
椭球
抛物面
双曲面
球谐函数
超椭球
灶神星
均质体
焦点

分形

分形是具有通常超过其拓扑维度的分形维度的集合，并且可能介于整数之间。例如，曼德勃罗集是由一系列复二次多项式定义的分形：

Pc(z) = z^2 + c

其中 c 是一个复数。曼德勃罗集分形定义为所有点 c 的集合，使得上述序列不发散到无穷大。在集合代数中，它的表述如下：

分形（抽象数据类型）可以始终如下在 TypeScript 中表示：

type Fractal = (z: Complex, c: Complex) => Complex

复数与绘图

为了能够绘制分形，我需要处理复数。因此，我创建了下面的 Complex 类。

class Complex {
    x: number
    y: number
    static zero = new Complex(0, 0)

    constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    abs() {
        return Math.sqrt(this.x * this.x + this.y * this.y)
    }

    toString() {
        return this.x + ' + i * ' + this.y
    }
}

function add(z1: Complex, z2: Complex) {
    return new Complex(z1.x + z2.x, z1.y + z2.y)
}

function substract(z1: Complex, z2: Complex) {
    return new Complex(z1.x - z2.x, z1.y - z2.y)
}

function multiply(z1: Complex, z2: Complex) {
    return new Complex(z1.x * z2.x - z1.y * z2.y, z1.x * z2.y + z1.y * z2.x)
}

曼德勃罗集分形

我创建了一个曼德勃罗集分形（抽象数据类型表示） P(z) = z^2 + c，如下所示。

const mandelbrot = (z: Complex, c: Complex) => add(multiply(z, z), c)

为了能够绘制复数，我创建了一个 ComplexPlane 类。下面是 TypeScript 中的实现。

class ComplexPlane {
  width: number
  height: number
  real_min: number
  real_max: number
  imaginary_min: number
  imaginary_max: number
  boundary: number
  fractalIterationsPerPixel: number
  canvasId: string

  constructor(
    width: number,
    height: number,
    real_min: number,
    real_max: number,
    imaginary_min: number,
    imaginary_max: number,
    boundary: number,
    fractalIterationsPerPixel: number,
    canvasId: string,
  ) {
    this.width = width
    this.height = height
    this.real_min = real_min
    this.real_max = real_max
    this.imaginary_min = imaginary_min
    this.imaginary_max = imaginary_max
    this.boundary = boundary
    this.fractalIterationsPerPixel = fractalIterationsPerPixel
    this.canvasId = canvasId
  }

  draw(fractal: Fractal) {
    const canvas = document.getElementById(this.canvasId) as HTMLCanvasElement
    canvas.width = this.width
    canvas.height = this.height
    const context = canvas.getContext('2d') as CanvasRenderingContext2D
    context.fillStyle = 'white'
    for (let x = 0; x < this.width; x++) {
      const xp = this.real_min + (x * (this.real_max - this.real_min)) / this.width
      for (let y = 0; y < this.height; y++) {
        const yp = this.imaginary_max - (y * (this.imaginary_max - this.imaginary_min)) / this.height
        const c = new Complex(xp, yp)
        let z = Complex.zero
        for (let k = 0; k < this.fractalIterationsPerPixel; k++) z = fractal(z, c)
        if (z.abs() < this.boundary) context.fillRect(x, y, 1, 1)
      }
    }
  }

  /*
   * Display 'Please wait...' at the center of the canvas
   *
  */
  pleaseWait() {
    const canvas = document.getElementById(this.canvasId) as HTMLCanvasElement
    canvas.width = this.width
    canvas.height = this.height
    const context = canvas.getContext('2d') as CanvasRenderingContext2D
    context.fillStyle = 'white'
    context.fillText('Please wait...', this.width / 2 - 30, this.height / 2)
  }
}

因此，运行下面的代码：

const complexPlane = new ComplexPlane(300, 300, -1.5, 1.5, -1.5, 1.5, 1.5, 20, 'fractal')

const mandelbrot = (z: Complex, c: Complex) => add(multiply(z, z), c)

complexPlane.pleaseWait()

setTimeout(() => complexPlane.draw(mandelbrot), 500)

其中 fractal 是 canvas 的 id。

<canvas id="fractal"></canvas>

得到如下结果：

对于想进一步深入的人

对于想进一步深入的人，您可以探索这些：

牛顿分形
朱利亚分形
其他分形

就是这样！希望您阅读愉快。

历史

2023 年 10 月 20 日
- 首次发布
2023 年 10 月 27 日
- 添加了 Babel 编译器
- 添加了 eslint 预设
- 更新了 Complex 类
- 更新了 Fractal 类型
- 更新了平面绘制和动画
- 更新了分形绘制
2024 年 4 月 11 日
- 将 @babel/cli 从 7.23.4 升级到 7.24.1
- 将 @babel/preset-env 从 7.23.3 升级到 7.24.4
- 将 @types/node 从 20.10.0 升级到 20.12.7
- 将 @typescript-eslint/eslint-plugin 从 6.12.0 升级到 7.6.0
- 将 @typescript-eslint/parser 从 6.12.0 升级到 7.6.0
- 将 eslint 从 8.54.0 升级到 9.0.0
- 将 eslint-plugin-import 从 2.29.0 升级到 2.29.1
- 将 npm-check-updates 从 16.14.11 升级到 16.14.18
- 将 typescript 从 5.2.2 升级到 5.4.5

TypeScript 中的函数式编程

目录

引言

TypeScript 环境

通过函数表示数据

Sets

空集

全集

单元素集

其他集合

偶数

奇数

3 的倍数

5 的倍数

素数

二元运算

Union

交集

笛卡尔积

补集

对称差集

其他运算

Contains

Add

移除

对于想进一步深入的人

欧几里得平面

绘制圆盘

绘制水平和垂直半平面

函数

平移

相似变换

旋转

对于想进一步深入的人

分形

复数与绘图

曼德勃罗集分形

对于想进一步深入的人

历史