Accessing and tweaking Dom elements (maybe related to type conversion?)

Hi, I’m trying to convert myself from Ts/Js to Rescript just because I want to see the appeal of it.

I hope to get some help on what is the right way to do this, as an example:

• select all elements of class “abc”
• print their zIndex
• change their zIndex to 200

@scope("document") external querySelectorAll: string => Dom.nodeList = "querySelectorAll"
@get external style: Dom.htmlElement => Dom.cssStyleDeclaration = "style"

// do I have to do this ugly conversion always?
external toHTMLElement: Dom.node => Dom.htmlElement = "%identity"
external cssStyleToRecord: Dom.cssStyleDeclaration => {..} = "%identity"

@send external forEach: (Dom.nodeList, Dom.node => unit) => unit = "forEach"
let stylize = () => {
  ignore
}
let trace: 'a. ('a, string) => 'a = (value, msg) => {
  Console.log(msg)
  Console.log(value)
  value
}

let main: unit => unit = () => {
  let elements = querySelectorAll(".abc")
  let getStyleRecord = x => x->toHTMLElement->style->cssStyleToRecord
  elements->forEach(el => {
    el
    ->getStyleRecord
    ->trace("converted record ")
    ->Object.get("zIndex") //is there any other way to access the field from a Dom.cssStyleDeclaration, without converting?
    ->Console.log
    el
    ->getStyleRecord
    ->Object.set("zIndex", 1)
  })
}
main()

How do I do what did in a more elegant way?
(preferably with explicit type because I’m trying to learn ReScript and the type inference can get in the way of understanding how it handles data/type)

Thank you!!