Add TypeScript?

[felipefialho]

I've been adding a TypeScript interface to use funnel-graph-js in my project. Follows the code if you want to create a TypeScript version here 😄

export interface IFunnelGraph {
  container: string;
  gradientDirection: 'horizontal' | 'vertical';
  data: {
    colors: string[];
    labels: string[];
    values: number[];
  };
  displayPercent: boolean;
  direction: 'horizontal' | 'vertical';
  height: number;
  width: number;
  subLabelValue: 'percent' | 'raw';
  draw: () => {};
  makeVertical: () => {};
  makeHorizontal: () => {};
  toggleDirection: () => {};
  gradientMakeVertical: () => {};
  gradientMakeHorizontal: () => {};
  gradientToggleDirection: () => {};
  updateHeight: () => {};
  updateWidth: () => {};
  updateData: (data: any) => {};
  update: (options: any) => {};
}

Thanks for your project ❤️

[greghub]

Hi @felipefialho , thank you very much! I have no TypeScript experience, is it possible to incorporate your code somehow in the library to make it usable for both JS and TS?

[muriloamendola]

Hi @greghub, answering your question... Yes! You can code your library to make it usable for JS and TS. The following article has a good explanation about how to do that: https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-typescript-package-to-npm-89d93ff7bccd

[yourtraffix]

any update for Typescript support?

[maitrungduc1410]

waiting for this

[elektronik2k5]

Here's what worked for me, based on @felipefialho's work above:

declare module 'funnel-graph-js' {
  class IFunnelGraph {
    color: string;
    container: string;
    gradientDirection: 'horizontal' | 'vertical';
    data: {
      colors: string[];
      labels: string[];
      values: number[];
    };
    displayPercent: boolean;
    direction: 'horizontal' | 'vertical';
    height: number;
    width: number;
    subLabelValue: 'percent' | 'raw';
    draw: () => {};
    makeVertical: () => {};
    makeHorizontal: () => {};
    toggleDirection: () => {};
    gradientMakeVertical: () => {};
    gradientMakeHorizontal: () => {};
    gradientToggleDirection: () => {};
    updateHeight: () => {};
    updateWidth: () => {};
    updateData: (data: any) => {};
    update: (options: any) => {};
    constructor(options: Partial<IFunnelGraph>);
  }

  export default IFunnelGraph;
}