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

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) {&nbsp; &nbsp; const { data, playersOn, typesOn, resultsOn, toBeRemoved, teamsOn, xGOn, shotsOn } = obj&nbsp; &nbsp; return data.filter(d => {&nbsp; &nbsp; &nbsp; &nbsp; const result = d.success ? 'Successful' : 'Unsuccessful';&nbsp; &nbsp; &nbsp; &nbsp; const players = playersOn.length === 0 || (playersOn.length > 0 && playersOn.includes(d.player_name));&nbsp; &nbsp; &nbsp; &nbsp; const types = typesOn.length === 0 || (typesOn.length > 0 && typesOn.includes(capitalizeAllWords(d.type)));&nbsp; &nbsp; &nbsp; &nbsp; const results = resultsOn.length === 0 || (resultsOn.length > 0 && resultsOn.includes(result));&nbsp; &nbsp; &nbsp; &nbsp; const removed = !toBeRemoved.map(p => p.time).includes(d.time);&nbsp; &nbsp; &nbsp; &nbsp; const shots = shotsOn.length === 0 || (shotsOn.length > 0 && shotsOn.includes(d.type));&nbsp; &nbsp; &nbsp; &nbsp; const xG = xGOn.length === 0 || (xGOn.length > 0 && d.xG < Math.max(...xGOn));&nbsp; &nbsp; &nbsp; &nbsp; const teams = teamsOn.length === 0 || (teamsOn.length > 0 && teamsOn.includes(d.team_name));&nbsp; &nbsp; &nbsp; &nbsp; return players && types && results && removed && shots && xG && teams;&nbsp; &nbsp; });}因此，在编译时不会出现错误，但在运行时仍然会出现错误。如果你没有通过playersOn，那么你就会崩溃Cannot read length of undefined。您需要为每个值实现故障保护。

Answer 2

您还可以利用接口并将Partial其内置到 TypeScript 中。export interface IData {&nbsp; &nbsp; success: boolean;&nbsp; &nbsp; player_name: string;&nbsp; &nbsp; type: string;&nbsp; &nbsp; time: string;&nbsp; &nbsp; team_name: string;}export interface IBaseArgs {&nbsp; &nbsp; data: IData[] ,&nbsp;&nbsp; &nbsp; playersOn: <TypeHere>,&nbsp;&nbsp; &nbsp; typesOn: <TypeHere>,&nbsp;&nbsp; &nbsp; resultsOn: <TypeHere>,&nbsp;&nbsp; &nbsp; toBeRemoved: <TypeHere>,&nbsp;&nbsp; &nbsp; teamsOn: <TypeHere>,&nbsp;&nbsp; &nbsp; xGOn: <TypeHere>,&nbsp;&nbsp; &nbsp; shotsOn: <TypeHere>}export function filterVisualData<T extends Partial<IBaseArgs>>(obj: T) {&nbsp; const {data, playersOn, typesOn, resultsOn, toBeRemoved, teamsOn, xGOn, shotsOn} = obj;&nbsp; return data.filter(d => {&nbsp; &nbsp; const result = d.success ? 'Successful' : 'Unsuccessful';&nbsp; &nbsp; const players = playersOn.length === 0 || (playersOn.length > 0 && playersOn.includes(d.player_name));&nbsp; &nbsp; const types = typesOn.length === 0 || (typesOn.length > 0 && typesOn.includes(capitalizeAllWords(d.type)));&nbsp; &nbsp; const results = resultsOn.length === 0 || (resultsOn.length > 0 && resultsOn.includes(result));&nbsp; &nbsp; const removed = !toBeRemoved.map(p => p.time).includes(d.time);&nbsp; &nbsp; const shots = shotsOn.length === 0 || (shotsOn.length > 0 && shotsOn.includes(d.type));&nbsp; &nbsp; const xG = xGOn.length === 0 || (xGOn.length > 0 && d.xG < Math.max(...xGOn));&nbsp; &nbsp; const teams = teamsOn.length === 0 || (teamsOn.length > 0 && teamsOn.includes(d.team_name));&nbsp; &nbsp; return players && types && results && removed && shots && xG && teams;&nbsp; });}使用Partial将使所有键成为可选键，并且该函数将接受缺少一些键的对象。您还将获得 IntelliSense。