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" | "REMOVE_TODO" | "TOGGLE_TODO"
id?: number
text?: string
}
type Todo = {
id: number
text: string
completed: boolean
}
type State = {
todos: Todo[]
nextId: number
}
let reducer = ({ todos, nextId }: State, action: Action) => {
switch (action.type) {
caTodoItemse "ADD_TODO":
return {
todos: [
...todos,
{
id: nextId,
text: action.text,
completed: false,
},
],
nextId: nextId + 1,
}
case "REMOVE_TODO":
return { todos: todos.filter((todo) => todo.id != action.id), nextId: nextId }
case "TOGGLE_TODO":
return {
todos: todos.map((todo) => ({
...todo,
completed: todo.id == action.id ? !todo.completed : todo.completed,
})),
nextId: nextId,
}
}
}

添加组件

• 添加 AddTodo 组件

@react.component
let make = (~onAdd: option<string> => unit) => {
let inputValueRef: React.ref<option<string>> = React.useRef(None)
let onSubmit = (e: ReactEvent.Form.t) => {
e->ReactEvent.Form.preventDefault
onAdd(inputValueRef.current)
}
<form className="rounded-lg w-full grid px-6 grid-cols-12" onSubmit>
<input
className="border rounded-l-lg bg-slate-50 h-8 text-xl py-6 px-4 ring-sky-200 col-span-10
focus:(outline-none border-sky-400 ring-2 z-10) "
onChange={e => e->ReactEvent.Form.target->(target => inputValueRef.current = target["value"])}
required={true}
/>
<button
type_="submit"
className="bg-white border rounded-r-lg cursor-pointer flex border-l-0 text-lg ring-sky-400 col-span-2 items-center justify-center hover:(bg-slate-100) focus:(ring-2 bg-slate-50) ">
<Icon.Plus size={36} stroke={1} />
</button>
</form>
}

使用 tailwindcss 来简化样式的书写

• 然后引入到 App 中

open Reducer
@react.component
let default = () => {
let (state, dispatch) = reducer->React.useReducer({
todos: [],
nextId: 1,
})
let onAdd = value => {
switch value {
| Some(str) =>
if Js.String.trim(str) != "" {
str->AddTodo->dispatch
}
| None => ()
}
}
<div className="bg-white rounded-md mx-auto border-1 shadow-md mt-20 pt-4 pb-8 w-[480px]">
<h1 className="text-center"> {React.string("Todo List")} </h1>
<Addtodo onAdd />
</div>
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9T6vTOa-1655351428688)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61f23e4dd9db4215bf6745d55d066ff7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

ReScript 的模块导入不用写特定的语法，只要用文件名就可以了，比如我有个模块文件名为 Foo.res ，在另外一个文件理要引入模块 Foo 里面的 name 值，因为 ReScript 默认导出所有变量，只需这么写就可以直接引入

// Foo.res
let name = "ReScript"

// Test.res
let lastName = Foo.name

• 添加 TodoItem 组件

type todo = Reducer.todo
@react.component
let make = (~todo: todo, ~onToggle: int => unit, ~onRemove: int => unit) => {
let {id, text, completed} = todo
<li className="border-b flex py-4 px-6 text-3xl items-center">
<input
type_="checkbox"
className="h-6 m-0 mr-4 w-6 accent-sky-600"
checked={completed}
onChange={_ => onToggle(id)}
/>
<span
className={`-mt-1 break-words max-w-[350px] ${completed
? "text-gray-500 line-through"
: "text-black"}`}>
{React.string(text)}
</span>
<button
className="bg-transparent cursor-pointer ml-auto h-6 p-0 w-6 hover:text-rose-600"
onClick={_ => onRemove(id)}>
<Icon.Trash size={24} />
</button>
</li>
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5jkEybG-1655351428689)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de56db53e7c0409c8af5faafb3df48e1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

• 添加 TodoList 组件

open Reducer
@react.component
let make = (~todos: todos, ~onDispatch: action => unit) => {
<>
<ul className="border-t list-none py-0 px-0">
{todos
->Belt.Array.keep(({completed}) => {
switch filter {
| #showAll(_) => true
| #showActive(_) => !completed
| #showCompleted(_) => completed
}
})
->Belt.Array.map(todo =>
<TodoItem
key={Js.Int.toString(todo.id)}
todo
onToggle={id => id->ToggleTodo->onDispatch}
onRemove={id => id->RemoveTodo->onDispatch}
/>
)
->React.array}
</ul>
</>
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4NJG0ZAR-1655351428689)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6b049241d0147c1883ec906e34b0c13~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

为 TodoList 加上标签切换功能

open Reducer
let filterTitles = [#showAll("All"), #showActive("Active"), #showCompleted("Completed")]
@react.component
let make = (~todos: todos, ~onDispatch: action => unit) => {
let (filter, setFilter) = React.useState(_ => #showActive("Active"))
let allNumber = todos->Belt.Array.length
let activeNumber = todos->Belt.Array.keep(({completed}) => !completed)->Belt.Array.length
let completedNumber = allNumber - activeNumber
<>
<div className="border-t flex mt-6 px-6 justify-end">
<ul className="flex list-none my-0 px-0">
{filterTitles
->Belt.Array.map(item => {
let #showAll(title) | #showActive(title) | #showCompleted(title) = item
let count = switch item {
| #showAll(_) => allNumber
| #showActive(_) => activeNumber
| #showCompleted(_) => completedNumber
}
let active = item == filter
<li
key={title}
className={`${active
? "bg-gray-50 border-t-sky-400"
: "bg-gray-200"} rounded-b-lg border border-t-2 border-gray-200 cursor-pointer flex ml-2 py-2 px-2 items-center`}
onClick={_ => setFilter(_ => item)}>
{React.string(title)}
<span className="rounded-md bg-sky-600 text-sm text-white ml-1 px-1 pb-[0.8px]">
{count->Js.Int.toString->React.string}
</span>
</li>
})
->React.array}
</ul>
</div>
<ul className="border-t list-none py-0 px-0">
{todos
->Belt.Array.keep(({completed}) => {
switch filter {
| #showAll(_) => true
| #showActive(_) => !completed
| #showCompleted(_) => completed
}
})
->Belt.Array.map(todo =>
<TodoItem
key={Js.Int.toString(todo.id)}
todo
onToggle={id => id->ToggleTodo->onDispatch}
onRemove={id => id->RemoveTodo->onDispatch}
/>
)
->React.array}
</ul>
</>
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsaIpcbt-1655351428690)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7bf504fc6e54e63b42815a126a0a805~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

• 然后把 TodoList 引入到 App 中就完成了。

<div className="bg-white rounded-md mx-auto border-1 shadow-md mt-20 pt-4 pb-8 w-[480px]">
<h1 className="text-center"> {React.string("Todo List")} </h1>
<Addtodo onAdd />
<TodoList todos={state.todos} onDispatch={dispatch} />
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrtR2m2w-1655351428690)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71f937e00a4f450bb1480f18f75b75ea~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

总结

ReScript 是对函数式友好的编程语言，有其独特的类型系统，不像 TypeScript 的类型是对 JavaScript 原有类型的补全。类型自动推导十分便利，不用再手动指定类型。Variant 数据结构和模式匹配极大方便了开发，减少样板代码的存在。 虽然类型推导很便利，但没有 TypeScript 那样的类型体操，遇到比较复杂的数据结构需要手动定义。

最后

以上就是爱听歌航空为你收集整理的TypeScript 用腻了？来换换口味吧——使用 ReScript + React 写一个简单的Todo List的全部内容，希望文章能够帮你解决TypeScript 用腻了？来换换口味吧——使用 ReScript + React 写一个简单的Todo List所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。