【前端】關於react+typescript遇到的“泛型約定組件狀態”，報錯：Property ‘***‘ does not exist on type ‘Readonly＜{}＞‘.ts(2339）

最近自己做東西的時候又遇到這么一個報錯：Property ‘***’ does not exist on type ‘Readonly<{}>’.ts(2339），報錯的意思可以參考typescript的官方錯誤信息列表：typescript官方錯誤信息列表，簡單說就是我們使用的state中的數據，必須要在一開始用泛型去規定一下類型，防止錯誤類型的數據傳進來。

如果想深入了解，可以參考官方文檔：typescript–泛型

接下來我說一下我的解決方法，我的解決方法是參考了這篇文章：原文鏈接，以下是我出現問題時的主要代碼：

class ChapterList extends React.Component {

    constructor(prop) {
        super(prop)
        this.state = {
            // 章、節 chapter section
            chapterId:0,
            chapterName:'第五章',
            chapterContent: [
                {
                    sectionId: 0,
                    sectionName: '第一節',
                    subsectionNum: 2,
                    subsection: [
                        {
                            subsectionId: 0,
                            subsectionName: '第一小節'
                        },
                        {
                            subsectionId: 1,
                            subsectionName: '第二小節'
                        }
                    ]
                }
            ]
        }
    }

    handleClick = (e) => {
        console.log('click ', e);
    }

    render() {

        return (
            <Menu
                onClick={this.handleClick}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <div style={{ height: "150px", textAlign: "center", backgroundColor: "#2e92cd" }}>
                    <h1 style={{ lineHeight: "100px", fontSize: "30px" }}>{this.state.chapterName}</h1><br />
                    <h4 style={{ color: "white" }}>一次函數</h4>
                </div>
            </Menu>
        )
    }
}

改正之后的代碼：

class ChapterList extends React.Component 
<{
    navList ?: any
},
{
    chapterId ?: number
    chapterName ?: string
    chapterContent ?: object
}
>
{

    constructor(prop) {
        super(prop)
        this.state = {
            // 章、節 chapter section
            chapterId:0,
            chapterName:'第五章',
            chapterContent: [
                {
                    sectionId: 0,
                    sectionName: '第一節',
                    subsectionNum: 2,
                    subsection: [
                        {
                            subsectionId: 0,
                            subsectionName: '第一小節'
                        },
                        {
                            subsectionId: 1,
                            subsectionName: '第二小節'
                        }
                    ]
                }
            ]
        }
    }

    handleClick = (e) => {
        console.log('click ', e);
    }

    render() {

        return (
            <Menu
                onClick={this.handleClick}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <div style={{ height: "150px", textAlign: "center", backgroundColor: "#2e92cd" }}>
                    <h1 style={{ lineHeight: "100px", fontSize: "30px" }}>{this.state.chapterName}</h1><br />
                    <h4 style={{ color: "white" }}>一次函數</h4>
                </div>
            </Menu>
        )
    }
}

也就是在創建類的時候，規定一下state里數據的類型，可以自己對比一下。

總結：因為之前沒有系統的看過typescript的文檔，直接就上手了項目，導致現在遇到一些小問題，不過好在這些小問題網上都有現成的解決方案，把問題解決掉，總結下來，就變成了自己的東西，用項目去驅動學習，這樣印象會更加深刻。就算我前期看了文檔，估計實際寫的時候也不會想到這個問題。