属性“模块”在类型“ typeof MyEditor”上不存在。ts（2339）

Question

Trying to add a rich text editor and am running across the error in the title. Basically I need to know how in TypeScript to declare what properties my class component has. This is a react project. Anyone have any ideas? Here is the code. The part i'm running into is when it comes to the .modules.

import React from 'react';
import ReactQuill from 'react-quill'; // ES6

type modules = {

}
class MyEditor<modules> extends React.Component<any, any, {}> {
    constructor(props) {
        super(props)
        this.state = { text: this.props.text } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }
    shouldComponentUpdate(nextProps) { // error here
        if (nextProps.className) {
            return false
        }
    }
    handleChange(value) {
        this.setState({ text: value })
        this.props.gatherBody(value)
    }

    render() {

        return (

            <ReactQuill value={this.state.text}
                onChange={this.handleChange}
                modules={MyEditor.modules}
            />
        )
    }
}
MyEditor.modules = {
    toolbar: [
        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' },
        { 'indent': '-1' }, { 'indent': '+1' }],
        ['clean']
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
}
export default MyEditor

Answer 1

You have to declare a static property inside the component. Code below.

import React, { Component } from 'react';
import ReactQuill from 'react-quill'; // ES6


class MyEditor extends React.Component<any, any, {}> {
    constructor(props) {
        super(props)
        this.state = { text: this.props.text } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }
    static modules: {} = {
        modules: {}
    }
    shouldComponentUpdate(nextProps) { // error here
        if (nextProps.className) {
            return false
        }
    }
    handleChange(value) {
        this.setState({ text: value })
        this.props.gatherBody(value)
    }

    render() {

        return (

            <ReactQuill value={this.state.text}
                onChange={this.handleChange}
                modules={MyEditor.modules}
            />
        )
    }
}
MyEditor.modules = {
    toolbar: [
        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' },
        { 'indent': '-1' }, { 'indent': '+1' }],
        ['clean']
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
}
export default MyEditor