VS2017 React-Redux模板集成Material-UI-Next遇TypeScript错误求助

从你给出的错误信息和代码来看，这些问题本质上是依赖版本不兼容导致的——VS2017默认的React-Redux模板自带的React、TypeScript以及类型定义版本比较旧，而Material-UI Next（现在的Material-UI v1）需要更高版本的依赖支持。下面是具体的问题分析和解决步骤：

问题根源拆解 #

1. Namespace 'React' has no exported member 'AnchorHTMLAttributes'：旧版本的@types/react（React的TypeScript类型定义包）没有导出AnchorHTMLAttributes这个类型，而Material-UI的组件依赖这个类型来定义属性。
2. 类型约束不匹配（如BottomNavigationButton的onChange错误、Snackbar的action类型错误）：同样是因为React/TypeScript版本过低，导致Material-UI的类型定义无法和你的项目类型系统兼容。

具体解决步骤 #

1. 升级TypeScript版本 #

VS2017默认模板的TypeScript版本通常低于2.8，而Material-UI v1需要至少TypeScript 2.8+的支持。打开项目根目录的package.json，修改typescript的版本：

"typescript": "^3.5.3"

然后运行命令更新依赖：

npm install

2. 升级React类型定义包 #

升级@types/react和@types/react-dom到兼容Material-UI的版本，同样修改package.json：

"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0"

再次运行npm install完成更新。

3. 替换Material-UI包（关键） #

你当前使用的material-ui包是旧的"next"测试版，现在官方已经将正式版移到@material-ui/core包下，旧包已经被弃用，类型定义问题很多。先卸载旧包：

npm uninstall material-ui

安装正式版核心包：

npm install @material-ui/core

4. 修改代码中的导入路径 #

将原来的Material-UI组件导入路径替换为新包的路径：

// 旧导入
// import { GridList, GridListTile } from 'material-ui/GridList';

// 新导入
import { GridList, GridListTile } from '@material-ui/core/GridList';

5. 重启VS2017 #

完成上述步骤后，重启Visual Studio 2017，让TypeScript语言服务重新加载新的依赖类型定义，错误应该就会消失了。

最后检查一下你的组件代码，逻辑上没有问题——GridList和GridListTile的使用是正确的，只要依赖版本兼容后就能正常运行。

内容的提问来源于stack exchange，提问作者Tonven