<typescript> function参数有generics，怎么传？</typescript>

Question

我是 Typescript 的新手，遇到了一个问题 define

    loadAnimation(params: AnimationConfigWithPath | AnimationConfigWithData): AnimationItem;

    export type AnimationConfigWithPath = AnimationConfig & {
        path?: string;
    }

    export type AnimationConfigWithData = AnimationConfig & {
        animationData?: any;
    }

    export type AnimationConfig<T extends 'svg' | 'canvas' | 'html' = 'svg'> = {
        container: Element;
        renderer?: T;
    }

我的代码

lottie.loadAnimation({
            container: document.getElementById("test1")!, 
            renderer: 'canvas',  // Error: Type '"canvas"' is not assignable to type '"svg" | undefined'.
            loop: true,
            autoplay: true,
            path: 'data.json'
        })

错误：类型“canvas”不可分配给类型“svg” | 不明确的'。 请问怎么写？ 谢谢

Answer 1

声明书

export type AnimationConfigWithPath = AnimationConfig & {
    path?: string;
}

没有将类型参数传递给AnimationConfig ，这意味着使用默认值。 所以renderer将始终是'svg'类型。

您可以向下传递通用参数以获取您要查找的内容。

function loadAnimation<T>(params: AnimationConfigWithPath<T> | AnimationConfigWithData<T>): AnimationItem { ... }

export type AnimationConfigWithPath<T extends 'svg' | 'canvas' | 'html'> = AnimationConfig<T> & {
    path?: string;
}

export type AnimationConfigWithData<T extends 'svg' | 'canvas' | 'html'> = AnimationConfig<T> & {
    animationData?: any;
}

export type AnimationConfig<T extends 'svg' | 'canvas' | 'html' = 'svg'> = {
    container: Element;
    renderer?: T;
}

Answer 2

这个泛型有什么用？ 这似乎毫无意义：

export type AnimationConfig<T extends 'svg' | 'canvas' | 'html' = 'svg'> = {

删除它可以解决问题：

export type AnimationConfig = {
    container: Element;
    renderer?: "svg" | "canvas" | "html";
}

如果你使用它是因为它有一个“默认值”，那么，类型没有默认值。 它们只是描述结构，而不是行为。