0

我想找到一种方法如何将不同的对象传递给同一个函数，并让函数只处理给定对象中存在的输入。具体来说，我正在传递不同的 Angular 组件，并且正在解构对象属性。

export function filterVisualData({data, playersOn, typesOn, resultsOn, toBeRemoved, teamsOn, xGOn, shotsOn}) {
  return data.filter(d => {
    const result = d.success ? 'Successful' : 'Unsuccessful';
    const players = playersOn.length === 0 || (playersOn.length > 0 && playersOn.includes(d.player_name));
    const types = typesOn.length === 0 || (typesOn.length > 0 && typesOn.includes(capitalizeAllWords(d.type)));
    const results = resultsOn.length === 0 || (resultsOn.length > 0 && resultsOn.includes(result));
    const removed = !toBeRemoved.map(p => p.time).includes(d.time);
    const shots = shotsOn.length === 0 || (shotsOn.length > 0 && shotsOn.includes(d.type));
    const xG = xGOn.length === 0 || (xGOn.length > 0 && d.xG < Math.max(...xGOn));
    const teams = teamsOn.length === 0 || (teamsOn.length > 0 && teamsOn.includes(d.team_name));
    return players && types && results && removed && shots && xG && teams;
  });
}

问题是某些组件缺少某些属性，我收到此错误

TS2345：“this”类型的参数不可分配给“{ data: any; 播放器：任何；类型：任何；结果在：任何；待移除：任何；团队：任何；xGOn：任意；射击：任何；}'。类型 'ShotChart' 不可分配给类型 '{ data: any; 播放器：任何；类型：任何；结果在：任何；待移除：任何；团队：任何；xGOn：任意；射击：任何；}'。“ShotChart”类型中缺少属性“typesOn”。

4

2 回答 2

1

通过执行以下操作，您可以传递任何对象而不会抱怨 Typescript：

export function filterVisualData(obj: any) {

    const { data, playersOn, typesOn, resultsOn, toBeRemoved, teamsOn, xGOn, shotsOn } = obj

    return data.filter(d => {
        const result = d.success ? 'Successful' : 'Unsuccessful';
        const players = playersOn.length === 0 || (playersOn.length > 0 && playersOn.includes(d.player_name));
        const types = typesOn.length === 0 || (typesOn.length > 0 && typesOn.includes(capitalizeAllWords(d.type)));
        const results = resultsOn.length === 0 || (resultsOn.length > 0 && resultsOn.includes(result));
        const removed = !toBeRemoved.map(p => p.time).includes(d.time);
        const shots = shotsOn.length === 0 || (shotsOn.length > 0 && shotsOn.includes(d.type));
        const xG = xGOn.length === 0 || (xGOn.length > 0 && d.xG < Math.max(...xGOn));
        const teams = teamsOn.length === 0 || (teamsOn.length > 0 && teamsOn.includes(d.team_name));
        return players && types && results && removed && shots && xG && teams;
    });
}

所以你在编译时不会出错，但在运行时你仍然会出错。如果你不通过playersOn，那么你就会Cannot read length of undefined崩溃。您需要为每个值实现故障保护。

于 2020-11-19T18:00:24.610 回答
0

您还可以利用接口并Partial内置到 TypeScript 中。

export interface IData {
    success: boolean;
    player_name: string;
    type: string;
    time: string;
    team_name: string;
}
export interface IBaseArgs {
    data: IData[] , 
    playersOn: <TypeHere>, 
    typesOn: <TypeHere>, 
    resultsOn: <TypeHere>, 
    toBeRemoved: <TypeHere>, 
    teamsOn: <TypeHere>, 
    xGOn: <TypeHere>, 
    shotsOn: <TypeHere>
}

export function filterVisualData<T extends Partial<IBaseArgs>>(obj: T) {
  const {data, playersOn, typesOn, resultsOn, toBeRemoved, teamsOn, xGOn, shotsOn} = obj;
  return data.filter(d => {
    const result = d.success ? 'Successful' : 'Unsuccessful';
    const players = playersOn.length === 0 || (playersOn.length > 0 && playersOn.includes(d.player_name));
    const types = typesOn.length === 0 || (typesOn.length > 0 && typesOn.includes(capitalizeAllWords(d.type)));
    const results = resultsOn.length === 0 || (resultsOn.length > 0 && resultsOn.includes(result));
    const removed = !toBeRemoved.map(p => p.time).includes(d.time);
    const shots = shotsOn.length === 0 || (shotsOn.length > 0 && shotsOn.includes(d.type));
    const xG = xGOn.length === 0 || (xGOn.length > 0 && d.xG < Math.max(...xGOn));
    const teams = teamsOn.length === 0 || (teamsOn.length > 0 && teamsOn.includes(d.team_name));
    return players && types && results && removed && shots && xG && teams;
  });
}

UsingPartial将使所有键成为可选的，并且该函数将接受缺少一些键的对象。您还将获得 IntelliSense。

于 2020-11-19T18:56:54.623 回答