TypeScript报错：类型'Element'不可分配给类型'never'，求助解决

问题根源 #

你定义的board数组未显式指定类型，TypeScript会根据空数组初始值推断其类型为never[]（表示该数组永远不能包含任何元素）。当你尝试向其中push React元素（JSX.Element类型）时，类型不匹配触发了报错。

解决方案 #

1. 显式标注数组类型 #

直接给board指定类型为JSX.Element[]，明确告知TypeScript这个数组用于存放React元素：

export default function Chessboard(){
    let board: JSX.Element[] = []; // 添加类型标注
    for(let i = 0 ; i < horizontalAxis.length; i++)
    {
        for(let j = verticalAxis.length-1 ; j >= 0 ; j--)
        {
            const num =  i + j + 2 ;
            board.push(<Tile number={num} />);
        }
    }
    return <div id="chessboard">{board}</div>
}

2. 简化类型推断写法 #

也可以在初始化时通过类型断言指定数组类型：

let board = [] as JSX.Element[];

额外提示 #

你的Tile组件命名为小写tile，React要求组件名称必须首字母大写（否则会被识别为普通HTML标签），建议修改为：

export default function Tile({number}: props){
    if(number % 2 === 0)
    {
        return <div className="tile black-tile"></div>
    }
    else
    {
        return <div className="tile white-tile"></div>
    }
}

避免后续出现渲染异常问题。

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