After creating an interface for Velocityjs to use in TypeScript, I encountered a challenge with making interfaces for array types. Specifically, when working on a function for generating calls for the Velocity.RegisterEffect method from the Velocity UI Pack:
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];
});
I needed to define an interface for the type:
[{ [key: string]: any }, number, { easing?: string, delay?: number }]The solution that worked involved extending the Array object:
interface VelocityCall extends Array<any>{
[0]: { [key: string]: any };
[1]: number;
[2]: { easing?: string, delay?: number };
}
By extending Array, I was able to overcome compiler errors related to missing methods on the array.
Now, I can implement the following:
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];
});
In case it is helpful to others or if there are better solutions, here are additional parts of the Velocity interface (excluding 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 caching 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;