TypeScript-我如何處理多個IF

我試圖在 TS中做一個“多重過濾器” ，所以......

如果我什么都不發送 ->它會正常回傳所有產品；

但是如果我發送一些引數- >它會回傳由引數過濾的產品。

（我僅使用顏色作為示例）

async load(params: params): LoadProducts.Result => {
  const products = [];

  if (params) {
    if (params.red != undefined) // products.push( ...load.redProducts() );
    if (params.blue != undefined) // products.push( ...load.blueProducts() );
    if (params.green != undefined) // products.push( ...load.greenProducts() );
    if (params.yellow != undefined) // products.push( ...load.yellowProducts() );
  } else {
    // products.push( ...load.products() );
  }

  return products;
}

請求型別：

type params = {
  filter?: {
    red?:  boolean;
    blue?: boolean;
    green?: boolean;
    yellow?: boolean;
  };
};

請求示例：

{
  "filter": {
    "red": true,
    "blue": true
  }
}

我該如何處理多個 IF 來驗證引數，因為每個 IF 都有自己的加載功能，我想添加更多過濾器。

uj5u.com熱心網友回復：

如果有很多過濾器，主要的事情可能是避免重復自己。所以我會讓執行加載的函式驅動這個程序：你用這些函式定義一個物件as const，然后從中派生出你可能的過濾器。這是一個示例（請參閱行內注釋）：

// Placeholder for your product type
type Product = {
    name: string;
    type: string;
};

// The functions that do the loading of individual types
const loaders = {
    async red() {
        return [{ type: "red", name: "Red 1" }];
    },
    async blue() {
        return [{ type: "blue", name: "Blue 1" }];
    },
    async green() {
        return [{ type: "green", name: "Green 1" }];
    },
    async yellow() {
        return [
            { type: "yellow", name: "Yellow 1" },
            { type: "yellow", name: "Yellow 2" },
        ];
    },
} as const;

// A function that loads everything
const loadAll = async () => {
    const allLoaders = Object.values(loaders);
    return (
        await Promise.all(allLoaders.map(loader => loader()))
    ).flat();
};

// The types of filters we might have
type FilterType = keyof typeof loaders;

// The params type
type ParamsFilters = {
    [Key in FilterType]?: boolean;
};
type Params = {
    filter?: ParamsFilters;
};

// A function that asserts a string key is a valid key for `loaders`
function assertIsLoaderKey(key: string): asserts key is keyof typeof loaders {
    if (!(key in loaders)) {
        throw new Error(`Expected key for 'loaders', got "${key}"`);
    }
}

// The class this is apparently in
class Example {
    async load(params: Params): Promise<Product[]> {
        let products: Product[];

        // If we have filters...
        if (params.filter) {
            // ...run them
            products = (
                await Promise.all(
                    Object.entries(params.filter)
                        .filter(([key, flag]) => flag)
                        .map(([key]) => {
                            assertIsLoaderKey(key);
                            return loaders[key]();
                        })
                )
            ).flat();
        } else {
            // No filters, load everything
            products = await loadAll();
        }

        return products;
    }
}

// Example usage
const e = new Example();
e.load({
    filter: {
        red: true,
        blue: true,
    },
});

游樂場鏈接

（這使用了相對較新的flat方法。即使是現代瀏覽器的最新版本也支持它，但可能需要對舊版本進行 polyfill。）

uj5u.com熱心網友回復：

您沒有包含一個最小的、可重現的示例，但是根據您所展示的內容，您可以使用一個（類似地圖的）元組陣列并對其進行迭代：

const colorFns = [
  ['red', load.redProducts.bind(load)],
  ['blue', load.blueProducts.bind(load)],
  // etc...
] as const;

async load(params: params): LoadProducts.Result => {
  const products = [];

  if (params) {
    for (const [color, fn] of colorFns) {
      if (params[color] != undefined) products.push(...fn());
    }
  } else {
    // products.push( ...load.products() );
  }

  return products;
}

標籤：打字稿 if 语句

上一篇：將命令添加到用戶輸入

下一篇：Python為什么這個if陳述句回傳True？