Reactjs 使用剑道反应网格'；s类型脚本实现

无法使用最简单的网格实现进行编译，如下所示。（但这同样适用于react JS实现） react组件的代码如下所示

import { connect } from 'react-redux';
import * as redux from 'redux';
import * as projectActions from '../../redux/actions/projectActions';
import * as authorActions from '../../redux/actions/authorActions';
import * as React from 'react';
import { bindActionCreators } from 'redux';
import { Project } from '../../interfaces/Project';
import { ApplicationState } from '../../redux/reducers/initialState';
import { Grid } from '@Progress/kendo-react-grid';
​
interface OwnProps {
​
}
​
​
type ReduxProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
// type Props = StateFromProps & DispatchFromProps & NavbarComponentProps;
interface Pprops extends ReduxProps {
    handleDeleteProject1: (project: Project) => void
}
​
class ProjectsPage extends React.Component<Pprops, any> {
​
    state = {
        redirectToAddProjectPage: false
    };
​
    componentDidMount() {
    }
​
    handleDeleteProject1 = async (project: Project) => {
    }
​
    render() {
        return (
            <>
                <Grid></Grid>
            </>
        );
    }
}
​
function mapStateToProps(
    state: ApplicationState
    , ownProps: OwnProps
) {
    const projectsList = state.projectsStateSlice.projects;
    return {
        projects:
            projectsList.map(project => {
                const authorNamee = project.authorId.toString();
                return {
                    ...project,
                    authorName: authorNamee
                };
            }),
        authors: state.authorsStateSlice.authors,
        loading: 0
    };
}
​
function mapDispatchToProps(dispatch: redux.Dispatch) {
    return {
        actions: {
            loadProjects: bindActionCreators(projectActions.loadProjects, dispatch),
            loadAuthors: bindActionCreators(authorActions.loadAuthors, dispatch),
            deleteProject: bindActionCreators(projectActions.deleteProject, dispatch)
        }
    };
}
​
// prop types declarations
export default connect(mapStateToProps, mapDispatchToProps)(ProjectsPage);
​

从'react redux'导入{connect}；
从“redux”导入*作为redux；
从“../../redux/actions/projectActions”导入*作为项目操作；
从“../../redux/actions/authorActions”导入*作为authorActions；
从“React”导入*作为React；
从“redux”导入{bindActionCreators}；
从“../../interfaces/Project”导入{Project}；
从“../../redux/reducers/initialState”导入{ApplicationState}；
从'@Progress/kendo-react-Grid'导入{Grid}；
​
界面道具{
​
}
​
​
类型ReduxProps=返回类型和返回类型；
//类型Props=StateFromProps&DispatchFromProps&NavbarComponentProps；
接口Pprops扩展了ReduxProps{
handleDeleteProject1：（项目：项目）=>void
}
​
类ProjectsPage扩展了React.Component{
​
状态={
重定向到AddProjectPage:false
};
​
componentDidMount（）{
}
​
handleDeleteProject1=异步（项目：项目）=>{
}
​
render（）{
返回(
);
}
}
​
函数MapStateTops(
状态：应用程序状态
，ownProps:ownProps
) {
const projectsList=state.projectsStateSlice.projects；
返回{
项目：
projectsList.map（项目=>{
const authorname=project.authord.toString（）；
返回{
项目
authorName:authorName
};
}),
作者：state.authorsStateSicle.authors，
加载：0
};
}
​
函数mapDispatchToProps（调度：redux.dispatch）{
返回{
行动：{
loadProjects:bindActionCreators（projectActions.loadProjects，dispatch），
loadAuthors:bindActionCreators（authorActions.loadAuthors，dispatch），
deleteProject:bindActionCreators（projectActions.deleteProject，调度）
}
};
}
​
//道具类型声明
导出默认连接（mapStateToProps、mapDispatchToProps）（ProjectsPage）；
​

My package.json如下所示：

{
  "name": "cncy-react-redux",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start:dev": "react-scripts start",
    "prestart:api": "node tools/createMockDb.js",
    "start:api": "node tools/apiServer.js",
    "test": "jest",
    "start": "run-p start:api start:dev"
  },
  "jest": {
    "setupFiles": [
      "./tools/testSetup.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|mp3|wav|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
      "\\.(css|less)$": "<rootDir>/tools/styleMock.js"
    }
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-regular-svg-icons": "^5.12.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@reduxjs/toolkit": "^1.2.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/bootstrap": "^4.3.1",
    "@types/enzyme": "^3.10.4",
    "@types/jest": "^24.0.24",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-toastify": "^4.1.0",
    "@types/redux": "^3.6.0",
    "@types/redux-immutable-state-invariant": "^2.1.1",
    "@types/redux-thunk": "^2.1.0",
    "@types/reselect": "^2.2.0",
    "bootstrap": "^4.4.1",
    "immer": "2.1.3",
    "node-sass": "^4.13.0",
    "prop-types": "15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-toastify": "^5.4.1",
    "redux": "^4.0.4",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "typescript": "~3.7.2",
    "@progress/kendo-data-query": "1.5.2",
    "@progress/kendo-date-math": "1.5.1",
    "@progress/kendo-drawing": "1.6.0",
    "@progress/kendo-react-animation": "3.9.0",
    "@progress/kendo-react-buttons": "3.9.0",
    "@progress/kendo-react-data-tools": "^3.9.0",
    "@progress/kendo-react-dateinputs": "3.9.0",
    "@progress/kendo-react-dialogs": "3.9.0",
    "@progress/kendo-react-dropdowns": "3.9.0",
    "@progress/kendo-react-excel-export": "3.9.0",
    "@progress/kendo-react-grid": "3.9.0",
    "@progress/kendo-react-inputs": "3.9.0",
    "@progress/kendo-react-intl": "3.9.0",
    "@progress/kendo-react-layout": "3.9.0",
    "@progress/kendo-react-pdf": "3.9.0",
    "@progress/kendo-react-popup": "3.9.0",
    "react-transition-group": "4.3.0"
  },
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "1.11.2",
    "fetch-mock": "^8.1.0",
    "jest": "^24.9.0",
    "json-server": "0.14.2",
    "node-fetch": "^2.3.0",
    "npm-run-all": "4.1.5",
    "react-test-renderer": "16.8.4",
    "react-testing-library": "^6.1.2",
    "redux-immutable-state-invariant": "2.1.0",
    "redux-mock-store": "^1.5.3",
    "rimraf": "2.6.3",
    "style-loader": "0.23.1"
  },
  "eslintConfig": {
    "extends": "react-app",
    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "root": true
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

{
“名称”：“cncy react redux”，
“版本”：“0.1.0”，
“私人”：没错，
“脚本”：{
“开始：开发”：“反应脚本开始”，
“prestart:api”：“节点工具/createMockDb.js”，
“start:api”：“节点工具/apiServer.js”，
“测试”：“玩笑”，
“start”：“run-p start:api start:dev”
},
“笑话”：{
“设置文件”：[
“/tools/testSetup.js”
],
“moduleNameMapper”：{
“\ \（jpg | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | mp3 | wav | m4a | aac | oga）$”：“/tools/fileMock.js，
“\\（css |减去）$”：“/tools/styleMock.js”
}
},
“依赖项”：{
“@fortawesome/fontawesome svg core”：“^1.2.26”，
“@fortawesome/free常规svg图标”：“^5.12.0”，
“@fortawesome/free实心svg图标”：“^5.12.0”，
“@fortawesome/react-fontawesome”：“^0.1.8”，
“@reduxjs/toolkit”：“^1.2.1”，
“@测试库/jest dom”：“^4.2.4”，
“@testing library/react”：“^9.3.2”，
“@测试库/用户事件”：“^7.1.2”，
“@types/bootstrap”：“^4.3.1”，
“@types/enzyme”：“^3.10.4”，
“@types/jest”：“^24.0.24”，
“@types/node”：“^12.0.0”，
“@types/react”：“^16.9.0”，
“@types/react-dom”：“^16.9.0”，
“@types/react redux”：“^7.1.5”，
“@types/react路由器dom”：“^5.1.3”，
“@types/react to astify”：“^4.1.0”，
“@types/redux”：“^3.6.0”，
“@types/redux不可变状态不变量”：“^2.1.1”，
“@types/redux thunk”：“^2.1.0”，
“@types/重新选择”：“^2.2.0”，
“引导”：“^4.4.1”，
“伊默”：“2.1.3”，
“节点sass”：“^4.13.0”，
“道具类型”：“15.7.2”，
“反应”：“^16.12.0”，
“react引导”：“^1.0.0-beta.16”，
“react dom”：“^16.12.0”，
“react redux”：“^7.1.3”，
“反应路由器dom”：“^5.1.2”，
“反应脚本”：“3.3.0”，
“反应迟钝”：“^5.4.1”，
“redux”：“^4.0.4”，
“redux不可变状态不变量”：“^2.1.0”，
“redux thunk”：“^2.3.0”，
“重新选择”：“^4.0.0”，
“类型脚本”：“~3.7.2”，
“@progress/kendo数据查询”：“1.5.2”，
“@progress/kendo date math”：“1.5.1”，
“@progress/kendo绘图”：“1.6.0”，
“@progress/kendo react动画”：“3.9.0”，
“@progress/kendo反应按钮”：“3.9.0”，
“@progress/kendo react数据工具”：“^3.9.0”，
“@progress/kendo反应日期输入”：“3.9.0”，
“@progress/kendo react对话框”：“3.9.0”，
“@progress/kendo react下拉列表”：“3.9.0”，
“@progress/kendo react excel导出”：“3.9.0”，
“@progress/kendo反应网格”：“3.9.0”，
“@progress/kendo react输入”：“3.9.0”，
“@progress/kendo react intl”：“3.9.0”，
“@progress/kendo react布局”：“3.9.0”，
“@progress/kendo react pdf”：“3.9.0”，
“@progress/kendo react弹出窗口”：“3.9.0”，
“反应过渡组”：“4.3.0”
},
“依赖性”：{
“酶”：“^3.9.0”，
“酶-适配器-反应-16”：“1.11.2”，
“获取模拟”：“^8.1.0”，
“玩笑”：“^24.9.0”，
“json服务器”：“0.14.2”，
“节点提取”：“^2.3.0”，
“npm全部运行”：“4.1.5”，
“反应测试渲染器”：“16.8.4”，
“反应测试库”：“^6.1.2”，
“redux不可变状态不变量”：“2.1.0”，
“redux模拟商店”：“^1.5.3”，
“rimraf”：“2.6.3”，
“样式加载器”：“0.23.1”
},
“eslintConfig”：{
“扩展”：“反应应用程序”，
“设置”：{
“反应”：{
“版本”：“检测”
}
},
“根”：真的吗
},
“浏览者”：{
“生产”：[
">0.2%",
“没有死”，
“不是全部”
],
“发展”：[
“上一个chrome版本”，
“上一个firefox版本”，
“最后1个safari版本”
]
}
}

引发以下错误：

./src/components/projects/ProjectsPage.tsx 找不到文件：“main.js”与磁盘上的相应名称不匹配：”。\node_modules@Progress\剑道反应网格\dist\es@progr

import { Grid } from '@Progress/kendo-react-grid';