Typescript definitions

[lordoffreaks]

Would be possible to create typescript definitions for this project?

Is there any policy for this project about it? I couldn't find it in https://github.com/DefinitelyTyped/DefinitelyTyped/ so I wonder if could be possible to generate them via https://github.com/microsoft/dts-gen ...

Happy to help with a PR to do it here or in https://github.com/DefinitelyTyped/DefinitelyTyped/

Thanks

[alvarotrigo]

Happy to help with a PR to do it here or in https://github.com/DefinitelyTyped/DefinitelyTyped/

That'd be great! 👍 You can perhaps base yours on the Angular-fullpage definitions? https://github.com/alvarotrigo/angular-fullpage/blob/master/src/angular-fullpage/lib/fullpage.d.ts

[ferddecoded]

hey just checking in on this, has the typescript definitions for react-fullpage been merged or created? @alvarotrigo @lordoffreaks

[alvarotrigo]

I believe @lordoffreaks never created the PR. But @ferddecoded feel free to do it based on the angular-fullpage ones.

[lordoffreaks]

Indeed I've never created it, sorry focus changed but is in my tasks list ... however if @ferddecoded wants to start the task I'm more than happy to support him!

[mptorz]

Hey is there any update on that :) ?

[alvarotrigo]

Apparently not. @cmswalker would this be a nice addition? As i said on my comment, perhaps we can take them from the angular repo?

[mptorz]

I will have more free time in February so maybe I can take care of that if nobody does that before that time. It would be a really good addition imo.

[alvarotrigo]

@mptorz that'd be great! :)

[paul-vd]

Did anyone have a chance to take a look at this yet?

[paul-vd]

I created this as a temporary solution, keep in mind, these types are not perfect, I duplicated them from the angular types, and I had to type the fullpage component as a function because I'm not sure how to extend a class component with the wrapper.

declare module '@fullpage/react-fullpage' {
  export interface fullpageOptions {
    anchors?: string[]
    animateAnchor?: boolean
    autoScrolling?: boolean
    bigSectionsDestination?: any //top, bottom, null
    continuousHorizontal?: boolean
    continuousVertical?: boolean
    controlArrowColor?: string
    controlArrows?: boolean
    css3?: boolean
    dragAndMove?: any //true, false, 'horizontal', 'fingersonly'
    easing?: string
    easingcss3?: string
    fadingEffect?: any //true, false, 'sections', 'slides'
    fitToSection?: boolean
    fitToSectionDelay?: number
    fixedElements?: string // '#header, .footer'
    hybrid?: boolean
    interlockedSlides?: any // true, false, [1, 3, 5]
    keyboardScrolling?: boolean
    lazyLoading?: boolean
    licenseKey?: string
    lockAnchors?: boolean
    loopBottom?: boolean
    loopHorizontal?: boolean
    loopTop?: boolean
    menu?: string
    navigation?: boolean
    navigationPosition?: string
    navigationTooltips?: string[] // ['firstSlide', 'secondSlide']
    normalScrollElementTouchThreshold?: number
    normalScrollElements?: string // '#element1, .element2',
    offsetSections?: boolean
    paddingBottom?: string
    paddingTop?: string
    parallax?: any // true, false, 'sections', 'slides'
    parallaxOptions?: {
      percentage?: number
      property?: string
      type?: string
    }
    recordHistory?: boolean
    resetSliders?: boolean
    responsive?: number
    responsiveHeight?: number
    responsiveSlides?: boolean
    responsiveWidth?: number
    scrollBar?: boolean
    scrollHorizontally?: boolean
    scrollOverflow?: boolean
    scrollOverflowHandler?: any
    scrollOverflowOptions?: any
    scrollOverflowReset?: boolean
    scrollingSpeed?: number
    sectionSelector?: string
    sectionsColor?: string[]
    showActiveTooltip?: boolean
    slideSelector?: string
    slidesNavPosition?: string
    slidesNavigation?: boolean
    touchSensitivity?: number
    v2compatible?: boolean
    verticalCentered?: boolean

    /* callback and events */
    afterLoad?(origin?: any, destination?: any, direction?: any): void
    afterRender?(): void
    afterResize?(width: number, height: number): void
    afterReBuild?(): void
    afterResponsive?(isResponsive?: any): void
    afterSlideLoad?(section?: any, origin?: any, destination?: any, direction?: any): void
    onLeave?(origin?: any, destination?: any, direction?: any): void
    onSlideLeave?(section?: any, origin?: any, destination?: any, direction?: any): void

    /* keys for extensions */
    fadingEffectKey?: string
    responsiveSlidesKey?: string
    continuousHorizontalKey?: string
    interlockedSlidesKey?: string
    scrollHorizontallyKey?: string
    resetSlidersKey?: string
    offsetSectionsKey?: string
    dragAndMoveKey?: string
    parallaxKey?: string
    /* end key sections */
  }

  export interface fullpageApi {
    continuousHorizontal: any
    dragAndMove: any
    fadingEffect: any
    interlockedSlides: any
    offsetSections: any
    parallax: any
    resetSliders: any
    responsiveSlides: any
    scrollHorizontally: any
    scrollOverflowReset: any
    version: string
    destroy(n?: any): void
    fitToSection(): void
    getActiveSection(): any
    getActiveSlide(): any
    getFullpageData(): any
    landscapeScroll(e?: any, t?: any, n?: any): void
    moveSectionDown(): void
    moveSectionUp(): void
    moveSlideLeft(e?: any): void
    moveSlideRight(e?: any): void
    moveTo(e?: any, t?: any): void
    reBuild(t?: any): void
    setAllowScrolling(e?: any, t?: any): void
    setAutoScrolling(e?: any, t?: any): void
    setFitToSection(e?: any, t?: any): void
    setKeyboardScrolling(e?: any, t?: any): void
    setLockAnchors(e?: any): void
    setMouseWheelScrolling(n?: any): void
    setRecordHistory(e?: any, t?: any): void
    setResponsive(e?: any): void
    setScrollingSpeed(e?: any, t?: any): void
    silentMoveTo(e?: any, t?: any): void
    shared: {
      afterRenderActions(): void
    }
    test: {
      left: number[]
      top: string
      translate3d: string
      translate3dH: string[]
      setAutoScrolling(e?: any, t?: any): void
      options: fullpageOptions
    }
  }

  interface FullPageProps extends fullpageOptions {
    licenseKey?: string
    render: (comp: { state: any; fullpageApi: fullpageApi }) => React.ReactElement | void
    debug?: boolean
    pluginWrapper?: () => void
  }

  // should actually be: class ReactFullpage extends React.Component<FullPageProps>{}
  // not sure how to extend Wrapper to a class so typed as a function
  // FIX: https://github.com/alvarotrigo/react-fullpage/issues/163#issuecomment-650498351
  function ReactFullpage(props: FullPageProps): React.ReactElement

  interface WrapperProps {
    children: React.ReactNode
  }

  function Wrapper(props: WrapperProps): React.ReactElement

  ReactFullpage.Wrapper = Wrapper

  export default ReactFullpage
}

[alvarotrigo]

Thanks for that @PaulPCIO ! 👍

[azerpas]

@PaulPCIO Worked, thank you!

[shiftrtech]

@PaulPCIO I was getting the lint error error TS1036: Statements are not allowed in ambient contexts i change your module to:

declare module '@fullpage/react-fullpage' {
  export interface fullpageOptions {
    anchors?: string[]
    animateAnchor?: boolean
    autoScrolling?: boolean
    bigSectionsDestination?: any //top, bottom, null
    continuousHorizontal?: boolean
    continuousVertical?: boolean
    controlArrowColor?: string
    controlArrows?: boolean
    css3?: boolean
    dragAndMove?: any //true, false, 'horizontal', 'fingersonly'
    easing?: string
    easingcss3?: string
    fadingEffect?: any //true, false, 'sections', 'slides'
    fitToSection?: boolean
    fitToSectionDelay?: number
    fixedElements?: string // '#header, .footer'
    hybrid?: boolean
    interlockedSlides?: any // true, false, [1, 3, 5]
    keyboardScrolling?: boolean
    lazyLoading?: boolean
    licenseKey?: string
    lockAnchors?: boolean
    loopBottom?: boolean
    loopHorizontal?: boolean
    loopTop?: boolean
    menu?: string
    navigation?: boolean
    navigationPosition?: string
    navigationTooltips?: string[] // ['firstSlide', 'secondSlide']
    normalScrollElementTouchThreshold?: number
    normalScrollElements?: string // '#element1, .element2',
    offsetSections?: boolean
    paddingBottom?: string
    paddingTop?: string
    parallax?: any // true, false, 'sections', 'slides'
    parallaxOptions?: {
      percentage?: number
      property?: string
      type?: string
    }
    recordHistory?: boolean
    resetSliders?: boolean
    responsive?: number
    responsiveHeight?: number
    responsiveSlides?: boolean
    responsiveWidth?: number
    scrollBar?: boolean
    scrollHorizontally?: boolean
    scrollOverflow?: boolean
    scrollOverflowHandler?: any
    scrollOverflowOptions?: any
    scrollOverflowReset?: boolean
    scrollingSpeed?: number
    sectionSelector?: string
    sectionsColor?: string[]
    showActiveTooltip?: boolean
    slideSelector?: string
    slidesNavPosition?: string
    slidesNavigation?: boolean
    touchSensitivity?: number
    v2compatible?: boolean
    verticalCentered?: boolean

    /* callback and events */
    afterLoad?(origin?: any, destination?: any, direction?: any): void
    afterRender?(): void
    afterResize?(width: number, height: number): void
    afterReBuild?(): void
    afterResponsive?(isResponsive?: any): void
    afterSlideLoad?(section?: any, origin?: any, destination?: any, direction?: any): void
    onLeave?(origin?: any, destination?: any, direction?: any): void
    onSlideLeave?(section?: any, origin?: any, destination?: any, direction?: any): void

    /* keys for extensions */
    fadingEffectKey?: string
    responsiveSlidesKey?: string
    continuousHorizontalKey?: string
    interlockedSlidesKey?: string
    scrollHorizontallyKey?: string
    resetSlidersKey?: string
    offsetSectionsKey?: string
    dragAndMoveKey?: string
    parallaxKey?: string
    /* end key sections */
  }

  export interface fullpageApi {
    continuousHorizontal: any
    dragAndMove: any
    fadingEffect: any
    interlockedSlides: any
    offsetSections: any
    parallax: any
    resetSliders: any
    responsiveSlides: any
    scrollHorizontally: any
    scrollOverflowReset: any
    version: string
    destroy(n?: any): void
    fitToSection(): void
    getActiveSection(): any
    getActiveSlide(): any
    getFullpageData(): any
    landscapeScroll(e?: any, t?: any, n?: any): void
    moveSectionDown(): void
    moveSectionUp(): void
    moveSlideLeft(e?: any): void
    moveSlideRight(e?: any): void
    moveTo(e?: any, t?: any): void
    reBuild(t?: any): void
    setAllowScrolling(e?: any, t?: any): void
    setAutoScrolling(e?: any, t?: any): void
    setFitToSection(e?: any, t?: any): void
    setKeyboardScrolling(e?: any, t?: any): void
    setLockAnchors(e?: any): void
    setMouseWheelScrolling(n?: any): void
    setRecordHistory(e?: any, t?: any): void
    setResponsive(e?: any): void
    setScrollingSpeed(e?: any, t?: any): void
    silentMoveTo(e?: any, t?: any): void
    shared: {
      afterRenderActions(): void
    }
    test: {
      left: number[]
      top: string
      translate3d: string
      translate3dH: string[]
      setAutoScrolling(e?: any, t?: any): void
      options: fullpageOptions
    }
  }

  interface FullPageProps extends fullpageOptions {
    licenseKey?: string
    render: (comp: { state: any; fullpageApi: fullpageApi }) => React.ReactElement | void
    debug?: boolean
    pluginWrapper?: () => void
  }

  class ReactFullpage extends React.Component<FullPageProps>{}

  interface WrapperProps {
    children: React.ReactNode
  }

  namespace ReactFullpage {
    function Wrapper(props: WrapperProps): React.ReactElement
  }

  export default ReactFullpage
}

[paul-vd]

@shiftrtech thanks, that looks much better, I was unsure of the ReactFullpage + Wrapper, that's why I left the comment there. 😉

[adrienduchemin]

Hi ! Any update on merging this to DefinitelyTyped so the types stay updated with the lib ? Thanks !

[paul-vd]

I'm not sure anyone added it to DefinitelyTyped types yet.

It might be better to just ship the declarations with the project first?

[adrienduchemin]

That would be great. Also, @shiftrtech's proposal (that I am using right now) has many any elements. I think it would be nice to reference fullpagejs types so that react-fullpage keeps in sync with the underlying lib ? Or at least type react-fullpage with the same types as fullpagejs to avoid these any attributes ?

[alvarotrigo]

I've improved @shiftrtech types. Let me know if that's better for you guys :)

In any case, I'm working on fullPage.js version 4 so some things might change pretty soon.

Feel free to correct possible errors or improve it!

declare module '@fullpage/react-fullpage' {

  type Item = {
    anchor: string | number,
    index: number,
    item: HTMLElement,
    isFirst: boolean,
    isLast: boolean
  };

  type DragAndMove = boolean | "vertical" | "horizontal" | "fingersonly" | "mouseonly";
  type FadingEffect = boolean | "sections" | "slides";
  type InterlockedSlides = boolean | Array<number>;
  type bigSectionsDestination =  "top" | "bottom" | null;
  type Parallax = boolean | "sections" | "slides" ;

  export interface fullpageOptions {
    anchors?: string[]
    animateAnchor?: boolean
    autoScrolling?: boolean
    bigSectionsDestination?: bigSectionsDestination //top, bottom, null
    continuousHorizontal?: boolean
    continuousVertical?: boolean
    controlArrowColor?: string
    controlArrows?: boolean
    css3?: boolean
    dragAndMove?: DragAndMove
    easing?: string
    easingcss3?: string
    fadingEffect?: FadingEffect
    fitToSection?: boolean
    fitToSectionDelay?: number
    fixedElements?: string // '#header, .footer'
    hybrid?: boolean
    interlockedSlides?: InterlockedSlides
    keyboardScrolling?: boolean
    lazyLoading?: boolean
    licenseKey?: string
    lockAnchors?: boolean
    loopBottom?: boolean
    loopHorizontal?: boolean
    loopTop?: boolean
    menu?: string
    navigation?: boolean
    navigationPosition?: string
    navigationTooltips?: string[] // ['firstSlide', 'secondSlide']
    normalScrollElementTouchThreshold?: number
    normalScrollElements?: string // '#element1, .element2',
    offsetSections?: boolean
    paddingBottom?: string
    paddingTop?: string
    parallax?: Parallax // true, false, 'sections', 'slides'
    parallaxOptions?: {
      percentage?: number
      property?: "translate" | "background"
      type?: "reveal" | "cover"
    }
    recordHistory?: boolean
    resetSliders?: boolean
    responsive?: number
    responsiveHeight?: number
    responsiveSlides?: boolean
    responsiveWidth?: number
    scrollBar?: boolean
    scrollHorizontally?: boolean
    scrollOverflow?: boolean
    scrollOverflowHandler?: any
    scrollOverflowOptions?: any
    scrollOverflowReset?: boolean
    scrollingSpeed?: number
    sectionSelector?: string
    sectionsColor?: string[]
    showActiveTooltip?: boolean
    slideSelector?: string
    slidesNavPosition?: string
    slidesNavigation?: boolean
    touchSensitivity?: number
    v2compatible?: boolean
    verticalCentered?: boolean

    /* callback and events */
    afterLoad?(origin: Item, destination: Item, direction: string): void
    afterRender?(): void
    afterResize?(width: number, height: number): void
    afterReBuild?(): void
    afterResponsive?(isResponsive: boolean): void
    afterSlideLoad?(section: Item, origin: Item, destination: Item, direction: string): void
    onLeave?(origin: Item, destination: Item, direction: string): void
    onSlideLeave?(section: Item, origin: Item, destination: Item, direction: string): void

    /* keys for extensions */
    fadingEffectKey?: string
    responsiveSlidesKey?: string
    continuousHorizontalKey?: string
    interlockedSlidesKey?: string
    scrollHorizontallyKey?: string
    resetSlidersKey?: string
    offsetSectionsKey?: string
    dragAndMoveKey?: string
    parallaxKey?: string
    /* end key sections */
  }

  export interface fullpageApi {
    continuousHorizontal: boolean
    dragAndMove: DragAndMove
    fadingEffect: FadingEffect
    interlockedSlides: InterlockedSlides
    offsetSections: boolean
    parallax: Parallax
    resetSliders: boolean
    responsiveSlides: boolean
    scrollHorizontally: boolean
    scrollOverflowReset: boolean
    version: string
    destroy(type?: string): void
    fitToSection(): void
    getActiveSection(): Item
    getActiveSlide(): Item
    getFullpageData(): any
    landscapeScroll(e?: any, t?: any, n?: any): void
    moveSectionDown(): void
    moveSectionUp(): void
    moveSlideLeft(): void
    moveSlideRight(): void
    moveTo(section: string | number, slide: string | number): void
    reBuild(isResizing?: boolean): void
    setAllowScrolling(value: boolean, directions?: string): void
    setAutoScrolling(value: boolean, type?: string): void
    setFitToSection(value: boolean, type?: string): void
    setKeyboardScrolling(value: boolean, directions?: string): void
    setLockAnchors(value: boolean): void
    setMouseWheelScrolling(value: boolean): void
    setRecordHistory(value: boolean, type?: string): void
    setResponsive(value: boolean): void
    setScrollingSpeed(value: number, type?: string): void
    silentMoveTo(sectionAnchor: string | number, slideAnchor?: string | number): void
    shared: {
      afterRenderActions(): void
    }
    test: {
      left: number[]
      top: string
      translate3d: string
      translate3dH: string[]
      setAutoScrolling(value: boolean, type?: string): void
      options: fullpageOptions
    }
  }

  interface FullPageProps extends fullpageOptions {
    licenseKey?: string
    render: (comp: { state: any; fullpageApi: fullpageApi }) => React.ReactElement | void
    debug?: boolean
    pluginWrapper?: () => void
  }

  class ReactFullpage extends React.Component<FullPageProps>{}

  interface WrapperProps {
    children: React.ReactNode
  }

  namespace ReactFullpage {
    function Wrapper(props: WrapperProps): React.ReactElement
  }

  export default ReactFullpage
}

[DukeManh]

Any update on this issue? I'd love to see this type declaration merged into the project.

[alvarotrigo]

@DukeManh no updates. I'm working on v4. Will probably take a look at this when releasing it for React too. However, if you want to use this one in v3, feel free to create a PR :)

[benjamin-benoit]

Hello, how can I implement this module please ?

[alvarotrigo]

Hello, how can I implement this module please ?

This is already available in the latest react-fullpage: https://github.com/alvarotrigo/react-fullpage/blob/master/types/index.d.ts