Type narrow with typeof or instanceof

[swastik]

I asked a similar question here (#548), but this one is slightly different.

Let's say I have some args:

interface Args {
  foo: string | number;
}

I want to do an if and pass string or number to the right child component, so I create a getter to check the type:

  get isFooString() {
    return typeof this.args.foo === 'string';
  }

… and use it in the template:

{{#if this.isFooString}}
  <ComponentThatAcceptsString @foo={{@foo}} />
{{/if}}

… but the type when passing to the component is still string | number. I can work around this, but I'm wondering if there's a way to support a typeof / instanceof check natively?

They don't seem to be supported as additional special forms!

[dfreeman]

What you're looking for is a TS feature called type predicates. What you can do is define a method/helper whose return value is a type predicate:

isString(value: unknown): value is string {
  return typeof value === 'string';
}

And then use that in your template:

{{#if (this.isString @foo)}}
  <ComponentThatAcceptsString @foo={{@foo}} />
{{/if}}

Note that due to limitations of the type system itself, it's not possible to express a helper whose return type is a type predicate using helper()/extends Helper—you have to be using a function directly.

[swastik]

Nice! I will try that out. I had tried the helper and could not get to it to work which makes sense. Thank you!