search

nhn / toast-ui.react-image-editor

TOAST UI ImageEditor wrapper for React.js
MIT License
117 stars 51 forks source link

Typescript support #5

Open threeaccents opened 5 years ago

threeaccents commented 5 years ago

Version

^1.0.0

Test Environment

Brave, mac OSX 10.14.1

Current Behavior

No types file present in repo. Or in @types repo. Cannot use library in TypeScript project.

import ImageEditor from '@toast-ui/react-image-editor' // Could not find a declaration file for module '@toast-ui/react-image-editor'

import ImageEditor = require('tui-image-editor'); // import =` is not supported by @babel/plugin-transform-typescript Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.

Expected Behavior

Be able to use library in TypeScript project.

threeaccents commented 5 years ago

For anyone looking for a workaround:

  1. Create a react-image-editor.d.ts file with the following content

    declare module '@toast-ui/react-image-editor';

  2. Import it to the component using ImageEditor

    /// <reference path="./react-image-editor.d.ts" />
import ImageEditor from '@toast-ui/react-image-editor';
junghwan-park commented 5 years ago

@threeaccents I'll add type definition file. Thank you for your report.

indfnzo commented 4 years ago

@threeaccents I'll add type definition file. Thank you for your report.

Thanks, this would be great :)

Currently, we've had to ts-ignore the imports to make it work:

// @ts-ignore
import ImageEditor from '@toast-ui/react-image-editor';
import 'tui-image-editor/dist/tui-image-editor.css';

If we have a mapped set of options for the props like includeUI, that would be even better.

junqdu commented 4 years ago

@junghwan-park Just wondering, is this issue resolved?

Distortedlogic commented 3 years ago

Typescript available yet?

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

박시우(viewrain@nhn.com) 

        * 발송 시간 : 

2020-11-13T21:43:57

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] Typescript support (#5)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.
nghieptiki commented 3 years ago

It's works perfect for me.

image

Create a react-image-editor.d.ts

declare module '@toast-ui/react-image-editor' {
  import ImageEditor from 'tui-image-editor';

  type Props = ConstructorParameters<typeof ImageEditor>[1];

  export default function BaseImageEditor(props: Props): JSX.Element;
}
swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

박시우(viewrain@nhn.com) 

        * 발송 시간 : 

2020-11-16T17:52:50

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] Typescript support (#5)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.
Distortedlogic commented 3 years ago

@nghieptiki thanks! Ill give it another try with your TS declaration

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

박시우(viewrain@nhn.com) 

        * 발송 시간 : 

2020-11-16T18:36:50

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] Typescript support (#5)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.
AKclown commented 3 years ago

Does typescript support? I introduced the module and reported an error:

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

Cannot find module '@toast-ui/react-image-editor' or its corresponding type declarations.ts(2307)

I used the above answer to no avail 53dd2d8ab62884d9126901f74d36e2fa1e5c13147d1c54eaa1381c370a6499d9QzpcVXNlcnNcYWtcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDg5NDM0NzM1X3YyXEltYWdlRmlsZXNcMTYyMzc0MDE1Njk2MF9FOURCNERGQS1GODg4LTQzNTctQjhCMS04NEFENUE2RTRDREYucG5n

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

@.***) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

@.***) 

        * 발송 시간 : 

2021-06-15T15:46:21

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] Typescript support (#5)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      ***@***.***
      으로 문의해 주시기 바랍니다.

    © Dooray!.
AKclown commented 3 years ago

Does typescript support? I introduced the module and reported an error:

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

Cannot find module '@toast-ui/react-image-editor' or its corresponding type declarations.ts(2307)

I used the above answer to no avail 53dd2d8ab62884d9126901f74d36e2fa1e5c13147d1c54eaa1381c370a6499d9QzpcVXNlcnNcYWtcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDg5NDM0NzM1X3YyXEltYWdlRmlsZXNcMTYyMzc0MDE1Njk2MF9FOURCNERGQS1GODg4LTQzNTctQjhCMS04NEFENUE2RTRDREYucG5n

The reason for the error is the package version problem, @toast-ui/react-image-editor: 3.14.3 version problem, when I changed to 3.14.2, it ran well

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

@.***) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

@.***) 

        * 발송 시간 : 

2021-06-15T16:57:22

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] Typescript support (#5)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      ***@***.***
      으로 문의해 주시기 바랍니다.

    © Dooray!.