Add typescript definitions

[alekbarszczewski]

Correct me if I am wrong but it seems that ts definitions are not shipped along with this library. Also package @types/vue-advanced-cropper does not exist. For now I am shimming lib like this (I took code from another ts lib) but it would be nice to have ts typings out of the box:

// shims-cropper.d.ts

declare module 'vue-advanced-cropper' {
  import Vue, { VueConstructor } from 'vue'

  type CombinedVueInstance<
    Instance extends Vue,
    Data,
    Methods,
    Computed,
    Props
  > = Data & Methods & Computed & Props & Instance;

  type ExtendedVue<
    Instance extends Vue,
    Data,
    Methods,
    Computed,
    Props
  > = VueConstructor<
    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
  >;

  const Cropper: ExtendedVue<
    Vue,
    Record<string, unknown>,
    Record<string, unknown>,
    Record<string, unknown>,
    {
      url?: string;
      maxWidth?: number,
      stencilProps?: {
        handlers?: unknown,
        movable?: boolean,
        scalable?: boolean,
        aspectRatio?: number,
      },
      defaultBoundaries?: string,
      imageRestriction?: string,
    }
  >;

  export { Cropper };
}

[Norserium]

This library doesn't have typings now, but some of internals were rewritten on Typescript already. Sometime I will find time to write them finally.

Don't close this issue. It will remind me about this task.

[alekbarszczewski]

Never done this for vue component but AFAIK most of generating can be done automatically with this lib https://github.com/ktsn/vuetype for example. For any .ts files typescript can autogenerate typings automatically also on build time.

[Norserium]

You are right, .d.ts files can be automatically generated from source files. But currently only the not public internals are written on Typescript, so it's useless now.

[evgeniy-logvinov]

Have the same problem

[Awatatah]

same

[laodc]

I am also having this issue. I used your example above, i also added Preview to it. But I don't know how to set it up to have this.$refs.cropper.refresh() trying to read up docs on @types and the fact all existing ones i was looking at all do things insanely different i can't wrap my simple head around how to add support for some of the functions here.

[Norserium]

@laodc, I assume that you use Vue 2 and the options API and don't use any Vue typing libraries.

In this case the most simple solution is the following:

1. Add the getResult method to your shims file (example).

2. Then you can use the following code:

   const cropper = this.$refs.cropper as InstanceType<typeof Cropper> | null;
   if (cropper) {
       const result = cropper.getResult();
   }

It feels like a workaround, but it's the popular option.

[laodc]

@laodc, I assume that you use Vue 2 and the options API and don't use any Vue typing libraries.

In this case the most simple solution is the following:

1. Add the getResult method to your shims file (example).
2. Then you can use the following code:

const cropper = this.$refs.cropper as InstanceType<typeof Cropper> | null;
if (cropper) {
      const result = cropper.getResult();
}

It feels like a workaround, but it's the popular option.

correct, correct, and correct. I had taken over a project so had to use what was available without having to recode the whole thing.

I will give the above a try, thanks, really appreciate the quick reply.

[Norserium]

I've added the basic typescript definitions in 1.8.0 and 2.6.0 versions. This issue is the best place to notify about any bugs and to offer any suggestions, so I will leave it opened for a while.

[laodc]

It works great, my only request is can you add the Preview methods as well?

[Norserium]

@laodc, actually there is only one public method: refresh. But, yes, I forgot about it and I will add it now.

[Norserium]

@laodc, I've published 1.8.1 and 2.6.1 with the updated typings.

[andersevenrud]

The typings in 2.6.1 for Vue v3 is not working correctly. AFAIK you can't do import Vue from 'vue' anymore. Also, I don't know how well class components plays in v3.

I currently have a shim to work around this:

declare module 'vue-advanced-cropper' {
  import { DefineComponent } from 'vue'
  import {
    ManipulateImageEvent,
    ResizeEventParams,
    ResizeEvent,
    MoveEvent,
    DragEvent,
    Coordinates,
    VisibleArea,
    Limits,
    SizeRestrictions,
    ResizeDirections,
    MoveDirections,
    Point,
    Size,
    ImageSize,
    Boundaries,
    Intersections,
    AspectRatio,
    StencilEvent,
    EventType,
    Diff,
    TransformParams,
    Transform,
    Scale,
    ImageTransforms,
  } from 'vue-advanced-cropper/types/index'

  const Cropper: DefineComponent<{}, {}, any>
  const PreviewResult: DefineComponent<{}, {}, any>
  const DraggableArea: DefineComponent<{}, {}, any>
  const BoundingBox: DefineComponent<{}, {}, any>
  const LineWrapper: DefineComponent<{}, {}, any>
  const HandlerWrapper: DefineComponent<{}, {}, any>
  const DraggableElement: DefineComponent<{}, {}, any>
  const StencilPreview: DefineComponent<{}, {}, any>
  const RectangleStencil: DefineComponent<{}, {}, any>
  const CircleStencil: DefineComponent<{}, {}, any>
  const SimpleHandler: DefineComponent<{}, {}, any>
  const SimpleLine: DefineComponent<{}, {}, any>
  const Preview: DefineComponent<{}, {}, any>

  export {
    ManipulateImageEvent,
    ResizeEventParams,
    ResizeEvent,
    MoveEvent,
    DragEvent,
    Coordinates,
    VisibleArea,
    Limits,
    SizeRestrictions,
    ResizeDirections,
    MoveDirections,
    Point,
    Size,
    ImageSize,
    Boundaries,
    Intersections,
    AspectRatio,
    StencilEvent,
    EventType,
    Diff,
    TransformParams,
    Transform,
    Scale,
    ImageTransforms,
    Cropper,
    PreviewResult,
    DraggableArea,
    BoundingBox,
    LineWrapper,
    HandlerWrapper,
    DraggableElement,
    StencilPreview,
    RectangleStencil,
    CircleStencil,
    SimpleHandler,
    SimpleLine,
    Preview,
  }
}

Edit: Example error you can run into (I didn't spot this at first because the project this issue was raised in had --skipLibCheck set):

node_modules/vue-advanced-cropper/types/index.d.ts:160:44 - error TS2507: Type 'typeof import("/tmp/croppertest/node_modules/vue/dist/vue")' is not a constructor function type.

and (the line is simply <cropper></cropper>:

src/App.vue:2:4 - error TS2345: Argument of type '{}' is not assignable to parameter of type 'typeof Cropper & Omit<__VLS_GlobalAttrs, "prototype"> & Record<string, unknown>'.
  Property 'prototype' is missing in type '{}' but required in type 'typeof Cropper'.

[Norserium]

@andersevenrud, thanks for the report. Try to update to 2.6.3 version.

[andersevenrud]

@Norserium That seems to have done the trick. Thank you so much for the quick response on this!

[Norserium]

@andersevenrud, thank you for pointing this issue. It was a fatal mistake.

[Norserium]

I assume it's time to close this issue. Feel free to reopen, if anything comes up.