TypeScript非空数组类型变量赋值报ts(2322)错误解决方法

你用非空元组约束组件入参的思路是完全正确的：

• 定义的NonEmptyArray<T> = [T, ...T[]]类型，本质是要求传入的数组必须至少包含1个元素，刚好匹配你组件内默认取首个元素作为选中餐厅的逻辑，从类型层面直接避免了data[0]取到undefined的运行时错误。
• 组件里写的if (!data.length) return null属于冗余判空，在类型约束生效的前提下，这个分支永远不可能被触发，留着不影响运行，删掉可以精简代码。

你遇到的ts(2322)错误和组件本身的类型定义无关，是TypeScript默认的类型加宽规则导致的：
当你在测试文件顶层单独声明数组、手动给变量标注NonEmptyArray<Restaurant>类型时，TS不会自动把数组字面量识别为固定长度的元组，而是默认把它推导为普通可变数组Restaurant[]——普通数组类型不做长度保证，TS会认为它存在为空的可能性，无法满足非空元组「位置0必须存在元素」的要求，就抛出了类型不匹配的错误。

根据你的TS版本和编码习惯，选下面任意一种方案即可：

• 方案1：用as const+satisfies做类型校验（推荐，TS 4.9及以上版本支持）
  不要提前手动给变量标注NonEmptyArray类型，用satisfies让TS自动校验数组是否符合非空要求，同时用as const锁定数组结构避免被加宽：

const data = [
  {id: 1, name: 'abc', rating: 3},
  {id: 2, name: 'xyz', rating: 4},
  {id: 3, name: 'pqr', rating: 3}
] as const satisfies NonEmptyArray<Restaurant>;

it('renders properly', () => {
  render(<Restaurants data={data} />);
  // 后续测试逻辑
});

这种写法不会放过错误：如果你不小心把mock数据改成空数组，TS会直接抛错提示，不会把问题留到运行时。

• 方案2：内联传参，靠上下文自动推导
  不需要单独声明data变量，直接把mock数组写在组件传参的位置，TS会根据组件的props类型自动做上下文推导，识别到传入的是固定长度的非空数组：

it('renders properly', () => {
  render(<Restaurants data={[
    {id: 1, name: 'abc', rating: 3},
    {id: 2, name: 'xyz', rating: 4},
    {id: 3, name: 'pqr', rating: 3}
  ]} />);
  // 后续测试逻辑
});

• 方案3：非空类型守卫（兼容低版本TS）
  如果你的项目TS版本低于4.9不支持satisfies，可以写一个轻量的类型守卫函数校验数组非空，比直接硬写类型断言更安全：

function isNonEmpty<T>(arr: T[]): arr is NonEmptyArray<T> {
  return arr.length > 0;
}

const mockData = [
  {id: 1, name: 'abc', rating: 3},
  {id: 2, name: 'xyz', rating: 4},
  {id: 3, name: 'pqr', rating: 3}
];

if (isNonEmpty(mockData)) {
  it('renders properly', () => {
    render(<Restaurants data={mockData} />);
    // 后续测试逻辑
  });
}

注意：不要图省事直接给mock数据加as NonEmptyArray<Restaurant>硬断言，这种写法会跳过TS的类型校验，如果后续你不小心把mock数据改成空数组，TS不会给出任何提示，问题会留到运行时才暴露。

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