2016-12-01 148 views
0

我爲Velocityjs做了一個接口,所以我可以在TypeScript中使用它,但我不確定如何正確地爲數組類型創建接口。這是撥打電話[]從速度UI包的Velocity.RegisterEffect方法的功能:TypeScript中數組類型的接口

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 }; 
} 

我需要擴展數組,如果不是編譯器抱怨數組的缺失方法。

現在我可以這樣做:

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]; 
    }); 

這裏是速度界面的其餘部分(不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; 
+0

它應該是'[{[鍵:字符串]:任何},數量,緩解{?:字符串,延緩?: number}]'最後沒有額外的'[]',基於你發佈的VelocityCall接口 –

+0

對不起,我刪除了[]。這是一個VelocityCalls數組(複製過去的錯誤) – user3717718

+0

當你使用這個表單時,你會得到什麼錯誤?當我這樣做時:'let a:[{[key:string]:any},number,{easing?:string,delay?:number}];'我得到變量'a'的所有數組方法。 –

回答

2

什麼你描述與tuple type相匹配,因爲您希望使用每個索引的特定類型來描述特定長度的數組。

而不是使用的接口,你可以(並且可能應該)的使用:

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