Draft-js: How can i use Draft with TypeScript?

[EysaDun]

I install the Draft with npm, cmd: npm install --save draft-js,
and install the @types command, cmd: npm install @types/draft-js --save,
my TypeScript code is :

`class MyEditor extends React.Component<any, any> {
    constructor(props) {
        super(props);

        this.state = { editorState: EditorState.createEmpty() };
    }
    handleChange(e) {
        this.setState({ editorState: e });
    }
    render() {
        return (
            <Editor editorState={this.state.editorState} onChange={e => this.handleChange(e)} />
        );
    }
}

ReactDOM.render(
    <MyEditor />,
    document.getElementById('editor')
);`

But the IDE tell me: cannot find the name EditorState and Editor.
How can i resolve it?

[eelco]

import { Editor, EditorState } from "draft-js"

[EysaDun]

@eelco throw the exception like this by your code.
require.js:8 Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([])(…)

[cramhead]

Works for me with

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Editor, EditorState } from 'draft-js';

interface MyEditorProps {
}

class MyEditor extends React.Component<MyEditorProps, any> {
  constructor(props: MyEditorProps) {
    super(props);

    this.state = { editorState: EditorState.createEmpty() };
  }
  handleChange(e: EditorState) {
    this.setState({ editorState: e });
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={e => this.handleChange(e)} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('editor'),
);

export { MyEditor }

[davidchang]

@EysaDun - were you able to get this working?

[tandat2209]

How can I import the DraftEditorProps interface?

[dangcuuson]

@tandat2209 it's re-exported as EditorProps

[niveditc]

Looks like this is answered. Please reopen if there are further questions.