在TypeScript中是否可以递归推断通用类型？

Question

在TypeScript中是否可以递归推断通用类型？

7

以这段代码为例：

const [divEl, spanEl] = createElements([
    ['div', { id: 'test' }, [
        ['a', { href: 'test' }, [
            ['img', { src: 'test' }, null]
        ]],
        ['img', { href: 'test' }, null]
    ]],
    ['span', null, null]
]);

我希望TypeScript能够推断出divEl的类型为HTMLDivElement，并且推断出spanEl的类型为HTMLSpanElement。同时，我还希望它能够检查给定的属性，并根据推断的类型显示错误信息（例如，如果['img', { href: 'test' }, null]中有href属性，应该显示错误，因为HTMLImageElement没有href属性）。

type ElementTag = keyof HTMLElementTagNameMap;

type ElementAttributes<T extends ElementTag> = {
    [K in keyof HTMLElementTagNameMap[T]]?: Partial<HTMLElementTagNameMap[T][K]> | null;
};

type ElementArray<T extends ElementTag> = [
    T,
    ElementAttributes<T> | null,
    ElementArray<ElementTag>[] | string | null
];

type MappedElementArray<T> = {
    [K in keyof T]: T[K] extends ElementArray<infer L> ? HTMLElementTagNameMap[L] : never;
};

// This is the signature for the createElements function.
type CreateElements = <T extends ElementArray<ElementTag>[] | []>(
    array: T
) => MappedElementArray<T>;

我必须将ElementArray<ElementTag>[]更改为通用类型，但我不确定如何继续。

这是否可行？

我知道可以手动完成，但T1、T2、T3、T4、T5、T6、T7、T8、T9、T10......并不美观。

- rafaelgomesxyz

1

这似乎需要 Typescript 4.0 中发布的可变元组（Variadric Tuples）。 - Alex Wayne

有趣。我还没有想出如何将其应用于这个问题，但谢谢，我会花些时间研究它。 - rafaelgomesxyz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerrit0 · Accepted Answer

(部分回答)

TypeScript不支持递归类型。你可以通过一些方法解决这个问题，只要你不需要推断...然而，由于这里需要推断，我认为TS无法完成最后一步。

您可以拥有以下功能之一：

推断返回类型为具有正确返回类型的元组。
深度检查传递的数组

第一个很容易。我们只需要在createElements中让T扩展一个辨别联合即可。您已经有了这个，但这是一种稍微不同的看法。

type DiscriminatedElements = {
    // you can, of course, do better than unknown here.
    [K in keyof HTMLElementTagNameMap]: readonly [K, Partial<HTMLElementTagNameMap[K]> | null, unknown]
}[keyof HTMLElementTagNameMap]

type ToElementTypes<T extends readonly DiscriminatedElements[]> = {
    [K in keyof T]: T[K] extends [keyof HTMLElementTagNameMap, any, any] ? HTMLElementTagNameMap[T[K][0]] : never
}

declare const createElements: <T extends readonly DiscriminatedElements[] | []>(
    array: T
) => ToElementTypes<T>

createElements([
    ['span', {}, null]
]) // [HTMLSpanElement]

第二个问题有点棘手。正如我之前所说，TS 不喜欢递归类型。请参见 GH#26980。尽管如此，我们可以通过一些方法来解决创建具有任意深度的类型进行检查的问题... 但是如果我们尝试将这种类型与任何推断结合起来，TS 将意识到它可能是无限的。

type DiscriminatedElements = {
    [K in keyof HTMLElementTagNameMap]: readonly [K, Partial<HTMLElementTagNameMap[K]> | null]
}[keyof HTMLElementTagNameMap]

type NumberLine = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
type CreateElementArray<T extends readonly [any, any], N extends number> = T extends readonly [infer A, infer B] ? {
    done: readonly [A, B, null],
    recurse: readonly [A, B, null | readonly CreateElementArray<DiscriminatedElements, NumberLine[N]>[]]
}[N extends 0 ? 'done' : 'recurse'] : never

// Increase up N and NumberLine as required
type ElementItem = CreateElementArray<DiscriminatedElements, 4>

declare const createElements: (
    array: readonly ElementItem[]
) => HTMLElement[];


const [divEl, spanEl] = createElements([
    ['div', { id: 'test' }, [
        ['a', { href: 'test' }, [
            ['img', { src: 'test' }, null]
        ]],
        ['img', { href: 'test' }, null] // error, as expected
    ]],
    ['span', null, null]
]);

我认为可变元组在这里并没有帮助。它们将成为语言中令人惊叹的补充，但不能解决您试图在此处建模的问题。

让您保持两全其美的解决方案是接受HTML元素作为元组中的第三项，并在该数组中简单地调用createElements。