TypeScript 用腻了？来换换口味吧——使用 ReScript + React 写一个简单的Todo List

前言

前端技术如今蓬勃发展，时时刻刻都有新的技术栈诞生，这使得各位前端们常常大呼学不动了。既然如此笔者为何还要去学一门和 TypeScript 类似的新语言呢，难道 TypeScript 不够用嘛。

TypeScript 生态现在已经足够强大了，那么学习一个新的 ReScript 又有什么优势呢？ReScript 是对函数式友好的编程语言，函数默认自带柯里化，原生支持 pipe 功能，友好的类型推导，以及没有 null 和 undefined 的概念来消除了因其而产生的 Bug 。还有一点就是官方的 compiler 是不依赖于 node 的原生二进制程序，所以编译速度是 TypeScript 所不能及的，虽然目前已经有诸如 esbuild 之类的 TypeScript 编译器，速度是够快，但不支持类型判断。

项目地址 在线 demo

下面笔者就从头开始写一个 Todo List 来简单的认识一下 ReScript

新建 Reducer.res

• 定义数据类型

type action =
  | AddTodo(string)
  | RemoveTodo(int)
  | ToggleTodo(int)
// reducer action 直接用 ReScript 自带的 Variant 结构来定义，可以利用其强大的模式匹配能力减少样板代码
type todo = {
  id: int,
  completed: bool,
  text: string,
}
type state = {
  todos: array<todo>,
  nextId: int,
} 

• 添加 reducer 函数

let reducer = ({todos, nextId}, action) => {
  switch action {
  | AddTodo(text) => {
      todos: todos->Belt.Array.concat([
        {
          id: nextId,
          text: text,
          completed: false,
        },
      ]),
      nextId: nextId + 1,
    }
  | RemoveTodo(id) => {todos: todos->Belt.Array.keep(todo => todo.id != id), nextId: nextId}
  | ToggleTodo(id) => {
      todos: todos->Belt.Array.map(todo => {
        ...todo,
        completed: todo.id == id ? !todo.completed : todo.completed,
      }),
      nextId: nextId,
    }
  }
} 

不用手动指定 reducer 参数的类型，编译器会根据上下位自动推断出 {todos, nextId}: state, action: action；

因为有强大的匹配模式能力，代码结构清晰来许都，也不用写得像 TypeScript 那么啰唆；

TypeScript 版本：

type Action = {
  type: "ADD_TODO" | "