首頁猿問 ...

創建一個通用函數，可以將解構的對象屬性作為參數，但某些屬性可能會丟失

JavaScript

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

我想找到一種方法，如何將不同的對象傳遞給同一個函數，并讓該函數僅處理給定對象中存在的輸入。具體來說，我傳遞不同的角度組件，并解構對象屬性。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”。

查看完整描述

2 回答

海綿寶寶撒

TA貢獻1809條經驗獲得超8個贊

您可以通過執行以下操作來傳遞任何對象，而無需 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。您需要為每個值實現故障保護。

反對回復 2023-08-18

慕俠2389804

TA貢獻1719條經驗獲得超6個贊

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