How to effectively handle multiple conditional statements in TypeScript?

Question

How to effectively handle multiple conditional statements in TypeScript?

I attempted to implement a "multiple filter" feature in TS, so...

If I don't provide any input -> all products are returned as usual;

However, if I specify some parameters -> only products matching the parameters are returned.

(I used colors for demonstration purposes)

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 of request:

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

Example of request:

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

How can I handle multiple IF statements to check the parameters, as each one corresponds to a different function for loading, and I intend to include more filters in the future.

typescript if-statement

Answer 1

Answer №1

When dealing with an abundance of filters, the key is to avoid redundancy at all costs. The best approach would be to have the loading functions drive the entire process: You can establish an object containing these functions as const, and then derive your various filters from that central source. Below is a practical example with explanatory comments included:

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

// Individual loading functions for different 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;

// Function to load all products
const loadAll = async () => {
    const allLoaders = Object.values(loaders);
    return (
        await Promise.all(allLoaders.map(loader => loader()))
    ).flat();
};

// Types of filters available
type FilterType = keyof typeof loaders;

// Parameter types for filters
type ParamsFilters = {
    [Key in FilterType]?: boolean;
};
type Params = {
    filter?: ParamsFilters;
};

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

// Class where the functionality resides
class Example {
    async load(params: Params): Promise<Product[]> {
        let products: Product[];

        // Processing filters if present
        if (params.filter) {
            // Executing selected filters
            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;
    }
}

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

Playground link

(This demonstration incorporates the use of the relatively-new flat method. While widely supported by modern browser versions, older browsers may require polyfilling.)

Answer 2

When dealing with an abundance of filters, the key is to avoid redundancy at all costs. The best approach would be to have the loading functions drive the entire process: You can establish an object containing these functions as const, and then derive your various filters from that central source. Below is a practical example with explanatory comments included:

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

// Individual loading functions for different 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;

// Function to load all products
const loadAll = async () => {
    const allLoaders = Object.values(loaders);
    return (
        await Promise.all(allLoaders.map(loader => loader()))
    ).flat();
};

// Types of filters available
type FilterType = keyof typeof loaders;

// Parameter types for filters
type ParamsFilters = {
    [Key in FilterType]?: boolean;
};
type Params = {
    filter?: ParamsFilters;
};

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

// Class where the functionality resides
class Example {
    async load(params: Params): Promise<Product[]> {
        let products: Product[];

        // Processing filters if present
        if (params.filter) {
            // Executing selected filters
            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;
    }
}

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

Playground link

(This demonstration incorporates the use of the relatively-new flat method. While widely supported by modern browser versions, older browsers may require polyfilling.)

Answer 3

Answer №2

Although a minimal, reproducible example is missing, you can consider utilizing an array of tuples and iterating through it based on the information provided:

const fruitFns = [
  ['apple', load.appleProducts.bind(load)],
  ['orange', load.orangeProducts.bind(load)],
  // etc...
] as const;

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

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

  return products;
}

Answer 4

Although a minimal, reproducible example is missing, you can consider utilizing an array of tuples and iterating through it based on the information provided:

const fruitFns = [
  ['apple', load.appleProducts.bind(load)],
  ['orange', load.orangeProducts.bind(load)],
  // etc...
] as const;

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

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

  return products;
}

How to effectively handle multiple conditional statements in TypeScript?

Answer №1

Answer №2

Similar questions

Utilizing NGRX reducers with a common state object

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

The module "angular2-multiselect-dropdown" is experiencing a metadata version mismatch error

Needing to utilize the provide() function individually for every service in RC4

There are no HTTP methods available in the specified file path. Make sure to export a distinct named export for each HTTP method

Could JOI be used to validate unidentified keys within nested data structures?

Update to using res.get() instead of res.getHeader()

Displaying a child component as a standalone page rather than integrating it within the parent component's body

Is it possible to implement a redirect in Angular's Resolve Navigation Guard when an error is encountered from a resolved promise?

Is there a distinction in Typescript between the return types of Object.seal and .freeze?

Passing an observable from parameters to a pipe in RxJS: A guide

What are the steps to integrate TypeScript into JavaScript code?

Conditional Rendering with Next.js for Smaller Displays

Interactive Typescript slider with drag functionality

Is it feasible to alter the file name while utilizing express-fileUpload library?

What is the best way to change JSON into a key-value dictionary with TypeScript?

I am encountering issues with the TypeScript repository build on my local machine, but it successfully passes when

The Typescript error message states that the type '{ onClick: () => void; }' cannot be assigned to the type 'IntrinsicAttributes'

PrimeNG's Angular component pTree TreeNode

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements