第0行:解析错误:无法读取未定义TypeScript的属性“映射”

Question

我正在用TypeScript替换一个使用React和JS创建的应用程序，使用ts migrate，但是在App.tsx文件中发生了以下错误。

Line 0: Parsing error: Cannot read property 'map' of undefined

下面是App.tsx

import React, { useState, useEffect, useCallback} from 'react';
import './assets/styles/style.css';
import {AnswersList, Chats} from './components/index';
import FormDialog from './components/Forms/FormDialog';
import {db} from './firebase/index';

const App = () => {
  const [answers, setAnswers] = useState([]);
  const [chats, setChats] = useState([]);
  const [currentId, setCurrentId] = useState("init");
  const [dataset, setDataset] = useState({});
  const [open, setOpen] = useState(false);

  interface Dataset {
    "answers": Array<Answer>,
    "question": string
  }

  interface Answer {
    "answers": [
      {"content": string, "nextId": string}
    ]
  }


  const displayNextQuestion = (nextQuestionId: string, nextDataset: Dataset) => {
    addChats({
      text: nextDataset.question,
      type: 'question'
    })

      setAnswers(nextDataset.answers)
      setCurrentId(nextQuestionId)
  }

  const selectAnswer = (selectedAnswer: any, nextQuestionId: any) => {
    switch(true) {
      case (nextQuestionId === 'contact'):
          handleClickOpen()
          break;

      case (/^https:*/.test(nextQuestionId)):
          const a = document.createElement('a');
          a.href = nextQuestionId;
          a.target = '_blank';
          a.click();
          break;

      default:
          addChats({
              text: selectedAnswer,
              type: 'answer'
          })
        setTimeout(() => displayNextQuestion(nextQuestionId, dataset[nextQuestionId]), 500) 
        break;
    }
  }

  const addChats = (chat: any) => {
    setChats((prevState) => {
      return [...prevChats, chat]
    })
  }

  const handleClickOpen = () => {
    setOpen(true)
  };

  const handleClose = useCallback(() => {
      setOpen(false)
  }, [setOpen]);


  useEffect(() => { 
    (async() => {
      const initDataset = {};

      await db.collection('questions').get().then(snapshots => {
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          initDataset[id] = data
        })
      })

      setDataset(initDataset)
      displayNextQuestion(currentId, initDataset[currentId])
    })()
  }, [])

  useEffect(() => {
      const scrollArea = document.getElementById('scroll-area')
      if (scrollArea) {
        scrollArea.scrollTop = scrollArea.scrollHeight
      } 
  })

  return(
    <section className="c-section"> 
      <div className="c-box">
        <Chats chats={chats} />
        <AnswersList answers={answers} select={selectAnswer} />
        <FormDialog open={open} handleClose={handleClose} />
      </div>
    </section>
  );
}

export default App;

下面是package.json

{
  "name": "chatbot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/system": "^4.11.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/eslint-plugin": "^4.9.0",
    "@typescript-eslint/parser": "^4.9.0",
    "firebase": "^7.24.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "ts-migrate": "^0.1.10",
    "typescript": "^4.1.2"
  }
}

当我研究这个错误的时候，我发现了此页，所以我试着引用它，但是它没有改变。

顺便说一句，这是我试过的

• 删除node_modules文件并再次安装npm
• 安装@typescript-eslint/eslint-plugin和@typescript-eslint/解析器

如果在App.tsx中删除接口数据集和接口答案的说明，则相关错误将消失。但也会发生另一种错误。

我在谷歌上找不到好的提示，所以我问了这个问题。

如果你能告诉我这个Line 0: Parsing error: Cannot read property 'map' of undefined和更多的原因，我会很感激的。

Answer 1

您会得到错误，因为react-scripts=3.4.3与typescript=^4.1.2不兼容。相关问题可以在这里找到：https://github.com/facebook/create-react-app/issues/9515

你可以用任何一种方法来解决这个问题

1. 升级到react-scripts到>=4.0 (其中添加对TypeScript 4的支持)。
2. 将typescript降级为<4。