ref type broken for HTMLElement

[mwerschy]

Version

3.0.0-alpha.12

Reproduction link

https://codesandbox.io/s/infallible-https-w248t?file=/src/index.ts

Steps to reproduce

Note the error on line 4 of index.ts.

What is expected?

ref<HTMLElement | null>(null) is assignable to a variable of type Ref<HTMLElement | null>.

What is actually happening?

Type 'Ref<{ accessKey: string; readonly accessKeyLabel: string; autocapitalize: string; dir: string; draggable: boolean; hidden: boolean; innerText: string; lang: string; readonly offsetHeight: number; ... 232 more ...; focus: (options?: FocusOptions) => void; }>' is not assignable to type 'Ref<HTMLElement>'.

---

Perhaps some issue with symbols in the UnwrapRef declaration? The full error includes the line Property '[Symbol.iterator]' is missing in type.

[jacekkarczmarczyk]

see also

interface Foo1 { [Symbol.iterator]: any }
interface Foo2 { }
const foo1: Ref<Foo1|null> = ref<Foo1|null>(null);
const foo2: Ref<Foo2|null> = ref<Foo2|null>(null);
console.log(foo1, foo2);

[LinusBorg]

(Sorry for the close, mouse finger messed up ^^)

We can easily fix the problem with HTMLElement and similar Types (Window, Document) by adding them to the BaseTypes. That's correct as the properties of these types shouldn't be recursively walked by Unwrap anyways. I'll have a PR up for that in a second.

For the more general case about Symbol.Iterator that @jacekkarczmarczyk added, we should look at this PR from @pikaxas well as this comment from discord:

So I was bored and did some more digging. The issue is caused by this microsoft/TypeScript#24622. It's possible to work around it for general types by doing something like this:

type UnwrapTest<T> = {
  [P in keyof T]: T[P]
} & (T extends { [Symbol.iterator]: infer V } ? { [Symbol.iterator]: V } : {})

should be adaptable for our UnwrapRef implementation and seems to go in a similar direction as @pikax's PR.