Question

我为Velocityjs创建了一个接口，所以我可以在TypeScript中使用它，但我不确定如何正确地为数组类型创建接口。这是一个从Velocity UI Pack为Velocity.RegisterEffect方法调用[]的函数：

let calls: [{ [key: string]: any }, number, { easing?: string, delay?: number }][] = keyFramesProps.map((p: string): [{ [key: string]: any }, number, { easing?: string, delay?: number }] => {
    let anim: KeyFrameSlitted = keyFramesSlitted[p];
    let durationPercentage = (+p.replace('%', '')) * 0.01;
    return [anim.props, durationPercentage, anim.options];
});

所以我想为类型创建一个接口：[{ [key: string]: any }, number, { easing?: string, delay?: number }]

这是唯一有效的方法：

interface VelocityCall extends Array<any>{
    [0]: { [key: string]: any };
    [1]: number;
    [2]: { easing?: string, delay?: number };
}

我需要扩展Array，如果不是编译器抱怨数组上缺少方法。

现在我可以这样做：

let calls: VelocityCall[] = keyFramesProps.map((p: string): VelocityCall => {
        let anim: KeyFrameSlitted = keyFramesSlitted[p];
        let durationPercentage = (+p.replace('%', '')) * 0.01;
        return [anim.props, durationPercentage, anim.options];
    });

如果其他人需要它或者有更好的解决方案，这是Velocity接口的其余部分（没有VelocityCall）：

interface VelocityOptions extends Object {

    queue?: string;
    duration?: number | "slow" | "normal" | "fast";
    easing?: string;
    begin?: any;
    complete?: any;
    progress?: any;
    display?: undefined | string;
    visibility?: undefined | string;
    loop?: boolean;
    delay?: number | boolean;
    mobileHA?: boolean;
    /* Advanced: Set to false to prevent property values from being cached between consecutive Velocity-initiated chain calls. */
    _cacheValues?: boolean;
    [key: string]: any;

}

interface Velocity {
    (element: Element, propertiesMap: "fadeIn" | "fadeOut" | "slideUp" | "slideDown" | "scroll" | "reverse" | "finish" | "finishAll" | "stop" | { [key: string]: any }, options?: VelocityOptions): Promise<Response>;
    RegisterEffect(name: string, effect: {
        defaultDuration?: number;
        calls: [{ [key: string]: any }, number, { easing?: string, delay?: number }][] | [{ [key: string]: any }, number][] | [{ [key: string]: any }][];
        reset: { [key: string]: any }
    });
}

declare var Velocity: Velocity;

Answer 1

您要描述的内容与tuple type匹配，因为您要描述特定长度的数组以及每个索引的特定类型。

您可以（也可能应该）使用：

，而不是使用界面

type VelocityCall = [{ [key: string]: any }, number, { easing?: string, delay?: number }];

TypeScript中数组类型的接口

1 个答案: