Angular 7中MatTable数据源类型不匹配报错，为何用any可正常运行？

这个问题本质是TypeScript的类型严格检查导致的类型不兼容，我给你拆解一下原因和正确的解决方式：

1. 为什么会报错？ #

你一开始把dataSource声明为TableRecord[]（原生数组类型），但new MatTableDataSource(response.tableRows)返回的是一个MatTableDataSource<TableRecord>类实例——它是Angular Material为表格专门封装的数据源对象，不是原生数组。

原生数组自带length、pop、push等20+方法，但MatTableDataSource本身没有这些数组方法，它只是内部持有一个data属性来存储你的数组数据，所以TypeScript会严格检查到类型不匹配，抛出那个错误。

2. 为什么用any就没问题？ #

any是TypeScript里的“万能类型”，它会完全关闭类型检查——不管你给它赋值什么类型的对象，TypeScript都不会做校验。虽然能运行，但这相当于放弃了TypeScript最核心的类型安全优势，很容易在后续代码里埋下隐藏bug，不建议这么用。

3. 正确的解决方式 #

你需要把dataSource的类型声明为MatTableDataSource<TableRecord>，而不是原生数组类型：

// 先导入MatTableDataSource
import { MatTableDataSource } from '@angular/material/table';

// 正确的类型声明，初始化一个空的数据源
dataSource: MatTableDataSource<TableRecord> = new MatTableDataSource<TableRecord>([]);

// 赋值时两种方式都可以：
// 方式1：直接替换内部的data数组
this.dataSource.data = response.tableRows;
// 方式2：重新实例化数据源
this.dataSource = new MatTableDataSource(response.tableRows);

这样既符合TypeScript的类型规范，又能正常使用MatTableDataSource提供的筛选、排序、分页等功能，同时保留了类型检查的优势。

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