首頁猿問 ...

創(chuàng)建一個通用函數(shù)，可以將解構(gòu)的對象屬性作為參數(shù)，但某些屬性可能會丟失

JavaScript

胡說叔叔 2023-08-18 10:03:03

我想找到一種方法，如何將不同的對象傳遞給同一個函數(shù)，并讓該函數(shù)僅處理給定對象中存在的輸入。具體來說，我傳遞不同的角度組件，并解構(gòu)對象屬性。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”類型的參數(shù)不可分配給“{ data: any;”類型的參數(shù) 玩家：任何；類型：任意；結(jié)果：任意；待刪除：任何；團(tuán)隊(duì)：任何；xGOn：任意；開槍：任意；}'。類型“ShotChart”不可分配給類型“{ data: any; 玩家：任何；類型：任意；結(jié)果：任意；待刪除：任何；團(tuán)隊(duì)：任何；xGOn：任意；開槍：任意；}'。類型“ShotChart”中缺少屬性“typesOn”。

查看完整描述

2 回答

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個贊

您可以通過執(zhí)行以下操作來傳遞任何對象，而無需 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;

});

}

因此，在編譯時不會出現(xiàn)錯誤，但在運(yùn)行時仍然會出現(xiàn)錯誤。如果你沒有通過playersOn，那么你就會崩潰Cannot read length of undefined。您需要為每個值實(shí)現(xiàn)故障保護(hù)。

反對回復(fù) 2023-08-18

慕俠2389804

TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個贊

您還可以利用接口并將Partial其內(nèi)置到 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;