React TypeScript添加球队积分时遇类型错误：属性points不存在于number

问题本质 #

你遇到的property 'points' does not exist under number错误，是因为team1/team2的类型被TypeScript推断为number，而非你定义的Team接口类型。纯JSX（JavaScript）不做静态类型检查，所以之前能正常运行，但TS的静态校验会拦截这种类型不匹配的操作。

具体修复步骤 #

1. 确保Team接口跨组件可访问 #

在App.tsx中导出Team接口，让Newscore.tsx能正确引用：

// App.tsx
export interface Team {
  id: number;
  name: string;
  points: number;
  wins: number;
  lost: number;
  // 补充你定义的其他属性，比如goals
}

// 初始球队数组明确标注类型
const initialTeams: Team[] = [
  { id: 1, name: "Team A", points: 0, wins: 0, lost: 0, goals: 0 },
  // 其他初始球队数据
];

然后在Newscore.tsx中导入接口：

// Newscore.tsx
import { Team } from './App';

2. 给Newscore组件的Props定义明确类型 #

避免TS对props做错误的类型推断，直接定义props的类型结构：

// Newscore.tsx
interface NewscoreProps {
  team1: Team;
  team2: Team;
  // 传入父组件的更新函数，不要直接在子组件修改state
  updateTeamStats: (teamId: number, addPoints: number) => void;
}

const Newscore: React.FC<NewscoreProps> = ({ team1, team2, updateTeamStats }) => {
  const handleResult = () => {
    if (team1.goals > team2.goals) {
      // 调用父组件的更新函数，而非直接修改team1.points
      updateTeamStats(team1.id, 3);
    }
    // 平局、输球的逻辑同理
  };

  return (
    // 你的组件JSX结构
  );
};

3. 遵循React状态不可变原则更新数据 #

React的state是不可变的，绝对不能直接修改state数组中的对象属性，必须通过setTeams生成新数组来更新：

// App.tsx
import { useState } from 'react';
import Newscore from './Newscore';

export interface Team { /* ... */ }

function App() {
  const [teams, setTeams] = useState<Team[]>(initialTeams);

  const updateTeamStats = (teamId: number, addPoints: number) => {
    setTeams(prevTeams => 
      prevTeams.map(team => {
        if (team.id === teamId) {
          // 返回新对象，修改指定属性
          return { 
            ...team, 
            points: team.points + addPoints, 
            wins: team.wins + 1 
          };
        }
        return team;
      })
    );
  };

  return (
    <div className="App">
      <Newscore 
        team1={teams[0]} 
        team2={teams[1]} 
        updateTeamStats={updateTeamStats} 
      />
      {/* 其他组件 */}
    </div>
  );
}

export default App;

4. 排查变量赋值错误 #

检查Newscore组件中team1/team2的赋值逻辑，避免把球队的id（数字类型）当成Team对象使用：

// 错误示例：误将id赋值给team1（类型为number）
const team1 = selectedTeamId;

// 正确示例：根据id从teams数组中找到对应的Team对象
const selectedTeamId = 1;
const team1 = teams.find(t => t.id === selectedTeamId)!;
// 加!是断言该对象存在，也可以用可选链+默认值处理undefined情况

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