Add typescript types

[jacob-leger]

I'm always frustrated when I don't have Typescript types. Everyone uses TS, and this library should too.

Could you please add Typescript? It's not even that hard, and it can be done slowly and incrementally.

I believe this is the MOST important thing to do with this library at the moment, and I am willing to help too.

[giorgosart]

Hi @Leiloukou thanks for creating this ticket!

I don't really know how to do that so feel free to create a PR with the changes you need and then I'll follow your lead?

[jacob-leger]

I am not familiar with this library and have never even used it before, but I would be happy to help in the near future. I am currently working on a personal project as well as school, but I will try to help as soon as I can. I will probably be free in December, as I will have less school. See you then!

[jacob-leger]

Update: I'm a little busy, but I still want to help. I might be able to in the near future, sorry 😞

[jayanti-prajapati]

@Leiloukou You can create a custom type declaration file for now to use with typescript.

1. Create a new file named react-easy-edit.d.ts in your src directory (or in a types directory if you have one).
2. Add the following declaration inside the react-easy-edit.d.ts file:

declare module 'react-easy-edit' {
  import * as React from 'react';

  export interface EasyEditProps {
    type: 'text' | 'textarea' | 'number' | 'date' | 'time' | 'select';
    onSave: (value: any) => void;
    onCancel?: () => void;
    value: any;
    saveButtonLabel?: string;
    cancelButtonLabel?: string;
    attributes?: object;
    instructions?: string;
    placeholder?: string;
    validationMessage?: string;
    allowEdit?: boolean;
    viewAttributes?: object;
    editAttributes?: object;
    options?: Array<{ label: string, value: any }>;
    hideIcons?: boolean;
    buttonsPosition?: 'before' | 'after';
    saveButtonStyle?: object;
    cancelButtonStyle?: object;
    saveButtonClassName?: string;
    cancelButtonClassName?: string;
    validation?: (value: any) => boolean;
  }

  const EasyEdit: React.FC<EasyEditProps>;

  export default EasyEdit;
  export const Types: {
    TEXT: 'text';
    TEXTAREA: 'textarea';
    NUMBER: 'number';
    DATE: 'date';
    TIME: 'time';
    SELECT: 'select';
  };
}

[jacob-leger]

@Leiloukou You can create a custom type declaration file for now to use with typescript.

Thank you ❤️

[spacecat]

It would be nice indeed to add a declaration file. Getting the following in VSCode currently:

Could not find a declaration file for module 'react-easy-edit'. '/xyz/node_modules/react-easy-edit/build/react-easy-edit.min.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-easy-edit if it exists or add a new declaration (.d.ts) file containing declare module 'react-easy-edit';ts(7016)

[veyDer]

It would be nice indeed to add a declaration file. Getting the following in VSCode currently:

Could not find a declaration file for module 'react-easy-edit'. '/xyz/node_modules/react-easy-edit/build/react-easy-edit.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-easy-edit if it exists or add a new declaration (.d.ts) file containing declare module 'react-easy-edit';ts(7016)

Got here trying to sort out the exact same issue.