支持typescript

[yucccc]

[renfurong]

这个现在是不支持ts的吗？我现在用ts+vue3，没办法使用

[ckvv]

@renfurong 可以用在TS中使用

你可以在env.d.ts文件中添加模块的类型声明

declare module '@ckpack/vue-color' {
  import type { Component } from '@vue/runtime-core'
  const Alpha: Component
  const Checkboard: Component
  const Chrome: Component
  const Compact: Component
  const EditableInput: Component
  const Grayscale: Component
  const Hue: Component
  const Material: Component
  const Photoshop: Component
  const Saturation: Component
  const Sketch: Component
  const Slider: Component
  const Swatches: Component
  const Twitter: Component
}

[seahindeniz]

For those who might trouble with this issue, you can use the following type definition and you can fill up the things at your own.

Create a shim file vue-color.d.ts with the following content

declare module '@ckpack/vue-color' {
    import type { defineComponent } from 'vue';

    interface HSL {
        h: number;
        s: number;
        l: number;
        a: number;
    }

    interface HSV {
        h: number;
        s: number;
        v: number;
        a: number;
    }

    interface RGB {
        r: number;
        g: number;
        b: number;
    }

    interface RGBA extends RGB {
        a: number;
    }

    interface Data {
        hsl?: string | HSL;
        hex?: string;
        hex8?: string;
        hsv?: string | HSV;
        rgba?: string | RGBA;
        rgb?: string | RGB;
        /** Alpha */
        a?: number;
        /** Hue */
        h?: number;
    }

    export interface Payload {
        hsl: HSL;
        hex: string;
        hex8: string;
        rgba: RGBA;
        hsv: HSV;
        oldHue: number;
        source: any;
        /** Alpha */
        a: number;
    }

    interface Props {
        presetColors: string[];
    }

    interface Context {
        colorChange(data: string | Data, oldHue?: number): Payload;
    }

    export const Sketch = defineComponent<Props, Context>();
}

[xcsrz]

Thanks @seahindeniz! Your post pointed me in the right direction. It looks like your type def only provides for the Sketch component, and it did not work for my vue3 setup. However, I was able to combine yours with @ckvv's post and get past the lack of type definitions in this package. My vue-color.d.ts file is now as follows and all the warnings are cleared:

declare module '@ckpack/vue-color' {
    import type { Component } from '@vue/runtime-core';

    interface HSL {
        h: number;
        s: number;
        l: number;
        a: number;
    }

    interface HSV {
        h: number;
        s: number;
        v: number;
        a: number;
    }

    interface RGB {
        r: number;
        g: number;
        b: number;
    }

    interface RGBA extends RGB {
        a: number;
    }

    interface Data {
        hsl?: string | HSL;
        hex?: string;
        hex8?: string;
        hsv?: string | HSV;
        rgba?: string | RGBA;
        rgb?: string | RGB;
        /** Alpha */
        a?: number;
        /** Hue */
        h?: number;
    }

    export interface Payload {
        hsl: HSL;
        hex: string;
        hex8: string;
        rgba: RGBA;
        hsv: HSV;
        oldHue: number;
        source: any;
        /** Alpha */
        a: number;
    }

    interface Props {
        presetColors: string[];
    }

    interface Context {
        colorChange(data: string | Data, oldHue?: number): Payload;
    }

    const Alpha: Component;
    const Checkboard: Component;
    const Chrome: Component;
    const Compact: Component;
    const EditableInput: Component;
    const Grayscale: Component;
    const Hue: Component;
    const Material: Component;
    const Photoshop: Component;
    const Saturation: Component;
    const Sketch: Component;
    const Slider: Component;
    const Swatches: Component;
    const Twitter: Component;
}

[ckvv]

I added type declarations in the latest version (^1.4.1), so you don't need extra work to use in TypeScript now.