Elm style in ReScript compared to TypeScript

App.res

// https://rescript-lang.org/try?version=v11.0.0-beta.1&code=ALBWGcA8GEHsDsBmBLA5gCgN4DcCmAncZBALgAIAWAGjIFtYATXcgIgEMBXAF1lra+QBjFgF8AlACgJsAA654ZAFLgJ9BhwA2uMgEEyAXiXgAdDvz42ATwBMqxpu0AlA2Ue42grhK1c6bGc6G6GzmVjT48kz4YgYAfGQhFpYAtLE6xnwy6BHwUWKpjsaJVlJclnJkvoaYyOAAYmzwgpbkAEawsBo0grAc8FzkyP00ArS44OTFlgA8ACL8uMZcsSJSPmRDyFVkNfWNzeSIbBrguN29-eQADCPIYxNkANoAuqveuL4cMgwLLuhquC6dHAqBi+nimAkZDI4AA7ltBAALYGoHZQsgAHzIAGIACqwVCoLRxHbGMkAoG1BpNFpkACEFOMVP2llW0Kx2OgGiEAGs4ujoetRuMXIzheBUul-HJcuh5lxFnwebh0GJJNDoZgyRlGIDzn0BnRdRpjD0DWQANRkACMt3ubLIqzewAiHi4pt4MgQ8i86yV2iCYIh6PWWGZNP1w0qd3GIhoDFqMn4SLBZC+PwVBWMHFObnUggI6E2XEkIY+ZEQsHwfG26D6RwjFZZQbIRb2NLIAH4mx3yPXm1nwFx8ENUFJodM+ENYgKyNMZDONRrpkMZNxZ0uynIAPr6FhI3CCHntSAsMgHo+4Bj6XbU5oiMgIaCIxqoXA37ckvEEom4VIJ8Aky4JEHSXAB6RclznDQ2FaQEIRYO9LEfbg1y4TsWEHYdRwfaYwJguCNEgicwIXWdplabgeAUJ9uSPD8vy5Xl-0TZNEREYiNUhKCNXWGQNA4CwNBcM1+gMfRDGtLsyBYM9WHAFgN148tRO2VTUgASX6JZYAAZWw+Axx46FK2rfh0FUmgAAMmMvBgyAAEkwVSH2FJz+ME44RCs9UoNAucwMorhqM46ZOk4zVxVSTJHHQYV+WM6DkAiqDMFMmt0CUnjhVSeVFjfLhcRjVI6g0WB+B0-SR0MqgsqgnLYjynSABlYEEY5cCKsYqtHWrEuhMR-KXPDuRSwbyLA8L0Twqd4BnVYgA
@@jsxConfig({version: 4, mode: "automatic"})

open Js
module A = Js.Array2
module R = React
let mapR = (array, render) => array->A.map(render)->R.array

type t = {isFancy: bool, count: int, times: array<Date.t>}

let init = {isFancy: false, count: 0, times: []}

let update = (model, msg) => {
  switch msg {
  | #Toggle => {...model, isFancy: !model.isFancy}
  | #Click =>
    let times = model.times->A.append(Date.make())
    {...model, count: model.count + 1, times}
  }
}

@react.component
let make = () => {
  let ({isFancy, count, times}, dispatch) = update->R.useReducer(init)

  let format = (unfancy, fancy) => (isFancy ? fancy : unfancy)->R.string

  <main>
    <p>
      <input
        type_="checkbox" checked={isFancy} onChange={_ => #Toggle->dispatch}
      />
      <label> {"Fancy output?"->R.string} </label>
    </p>
    <button onClick={_ => #Click->dispatch}>
      {
        let plural = count === 1 ? "" : "s"
        let count = count->Int.toString
        format(count, `Clicked ${count} time${plural}`)
      }
    </button>
    <ol>
      {times->mapR(time =>
        <li>
          {format(
            time->Date.getTime->Float.toString,
            time->Date.toLocaleTimeString,
          )}
        </li>
      )}
    </ol>
  </main>
}

App.tsx

// https://www.typescriptlang.org/play?jsx=4#code/JYWwDg9gTgLgBAbzgVwM4FMBK6AmyDG6UANHDAJ5jpzYCG+MAchDtQL5wBmUEIcARFHT0Y-AFBj8EAHap4wacHgBeRHGCoAYrWn5yALi60ANhlJTk0mIYAMpGKHSpDAbQC6cWqjgARWjHR3ODYJKVl4ZDAcf2pVAAoQFnRjQwoqCE51RRhSEFQAc0N+ABUIfPzjdH44AB8BAGFjYHwAa34ASjhlAD5EMTg4VAB3JXwACzgEgs6EfoG4fC9qErKKqv05+bghGGQoaTUAOmPE1mNSDW1dAzgAQlPkw8udPWDNhaWGptb+Da2BsJyMiObyqFzHQ4PYyHBwgJykaToIa+GJxdpud4DHZ7A5ICFQ8wQSzWOBQw4WKxwADUcAAjPYQW8BiEQpIZECAIJgMBdSadHp9AHs+AuJDPa6E4kMuHeNikHAaMD+cYeVRoLC4AhEOKRaIBC7ZdoSIXhLjQED+Xk66ScF43OgMZisUi266GB1MJL87rvcWvAD8RmucEMlldemN23Qu32k3eAB4LQoff84PGwCnU2mFGBkDBMf80uhlPxxuhWgAjCAAD3EWfmZdauGUCD95BC9YGMnqYx0+WLCDRXV6CtQSpg4ziK3KlQ6HazAHpM6n48ZaBXkt0rq8iTBczB-fGF2uN8Zl-MjxmC-GK3mYDI4N3vi0W0OBaPx5P+I1mm12mxzy2BBOHNfw4gpHI4AAAx-JscDgAASBAII4WF0CQiCumUVRaTgQN+GqIpUH4NgoP-a8F1vGB72kQC0wgM8CwGBA0NQSFaDAOI4jQ70407NMmm6YDQJgbjHEOfsYGKRw0WldAYQgAAZCBFkqaS4QAZRgKAFHyNF-yPQSmLgdpyJXBcGPPI8k1ouYjVZdBq0gWA4FYW1kGMeAuTAMQgA
import { useReducer, type ReactNode } from "react"

const init = { isFancy: false, count: 0, times: [] as Date[] }

const update = (model: typeof init, msg: "Toggle" | "Click") => {
  switch (msg) {
    case "Toggle":
      return { ...model, isFancy: !model.isFancy }
    case "Click":
      const times = [...model.times, new Date()]
      return { ...model, count: model.count + 1, times }
  }
}

const App = () => {
  const [{ isFancy, count, times }, dispatch] = useReducer(update, init)

  const format = (unfancy: ReactNode, fancy: ReactNode) =>
    isFancy ? fancy : unfancy

  return (
    <main>
      <p>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={() => dispatch("Toggle")}
        />
        <label>Fancy output?</label>
      </p>
      <button onClick={() => dispatch("Click")}>
        {format(count, `Clicked ${count} time${count === 1 ? "" : "s"}`)}
      </button>
      <ol>
        {times.map((time) => (
          <li>{format(time.getTime(), time.toLocaleTimeString())}</li>
        ))}
      </ol>
    </main>
  )
}

export default App