创建一个通用函数，可以将解构的对象属性作为参数，但某些属性可能会丢失

Question

我想找到一种方法，如何将不同的对象传递给同一个函数，并让该函数仅处理给定对象中存在的输入。具体来说，我传递不同的角度组件，并解构对象属性。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”。

Answer 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。您需要为每个值实现故障保护。

Answer 2

您还可以利用接口并将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;

  });

}

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