Typing an and helper

[swastik]

I'm trying to introduce Glint to our codebase. We use ember-truth-helpers a fair bit. I'm trying to understand how to type and such that we can write code like this:

interface Args {
  onArg1?: () => unknown;
  onArg2?: () => unknown;
}

{{#if (and @onArg1 @onArg2)}}
  <button {{on "click" @onArg1}}></button>
{{/if}}

With that, I'm seeing an error like:

---

Nesting the ifs works. I can also do other things (e.g. define onArg1 on the component to ensure it's always defined), so it's not blocking me, but I'm wondering if there's a way to actually type it in a way that onArg1 gets typed correctly in that block! 🙇🏼‍♂️

[dfreeman]

Unfortunately there's no way within TypeScript's type system to express how && works; the logical and comparison operators' behaviors are all essentially "baked in" to the language. Similarly, within Glint we have a notion of special forms to give special meaning to things like {{if}} and {{yield}} outside of what would normally be expressible with helper types.

As of #510, we now support special forms for logical operators like &&, but they aren't actually enabled for any helpers out of the box, for two reasons:

• Until RFC 562 lands, we have no way of knowing that an arbitrary global {{and}} helper actually behaves like JS &&
• As currently specified by RFC 562, the notion of "truthiness" in templates is slightly different than in vanilla JS/TS. There's been some lengthy discussion over whether the semantics should be aligned before the implementation lands.

In the meantime, though, it's possible to opt in to treating {{and}} like && (and {{or}} like ||, etc) despite the two points above by setting additionalSpecialForms config for @glint/environment-ember-loose and/or @glint/environment-ember-template-imports:

  "glint": {
    "environment": {
      "ember-loose": {
        "additionalSpecialForms": {
          "globals": {
            "and": "&&",
            "or": "||",
            "not": "!"
          }
        }
      },
      "ember-template-imports": {
        "additionalSpecialForms": {
          "imports": {
            "ember-truth-helpers/helpers/and": { "default": "&&" },
            "ember-truth-helpers/helpers/or": { "default": "||" },
            "ember-truth-helpers/helpers/not": { "default": "!" }
          }
        }
      }
    }
  }

We currently don't cover this in our formal documentation anywhere since the semantics of RFC 562 are still in flux, but those options are pretty stable at this point, and it might make sense for us to document them under "Advanced Configuration" or something. In the meantime we can at least point folks to this discussion thread when the question comes up 🙂

[swastik]

That's very helpful, thank you!