Ensuring the type safety of arguments in TypeScript through conditional checking based on the previous argument

Question

Ensuring the type safety of arguments in TypeScript through conditional checking based on the previous argument

I am looking to implement type-checking for function arguments, where the properties of the second argument are based on the properties of the previous one.

The config variable should only contain properties present in objects within the values array. These properties should be optional (not all required in config, but cannot add additional ones).

Here is an example code snippet:

type CustomType <T> = {
  [K in keyof T]: number
};
type Config <T> = {
  [K in keyof T]? : {
    highPriority: boolean;
    callback: (values: any[]) => number[];
  }
};

const customFunction = <T>(values: T[], config: Config <T> ): Array <CustomType<T>> => {
  // logic...

  return [];
};

const values = [
  {
    foo: 'foo',
    bar: 'bar'
  },
  {
    foo: 'foo',
    bar: 'bar'
  }
];

// Should optionally contain only "foo" and "bar" properties in this example
const config = {
  foo: {
    highPriority: true,
    callback: () => []
  },
  // not present in values objects
  wrong: {
    highPriority: true,
    callback: () => []
  }
};

// Error should be displayed for 'config' as "wrong" property is not present in 'values' objects
const result = customFunction(values, config);

In the final line, config must show an error because it introduces a "wrong" property that isn't present in the original values object.

I can enforce some checking by implementing an interface for the config, but I believe there's a way to do it without this step.

interface ISpecific {
  foo: any,
  bar: any
}

const values: ISpecific[] = [
  {
    foo: 'foo',
    bar: 'bar'
  },
  {
    foo: 'foo',
    bar: 'bar'
  }
];

const config: Config<ISpecific> = {
  // ...
  // The wrong property is marked as an error
}

UPDATED:

config has been defined elsewhere and is not aware of the values variable
customFunction is used in various places throughout the application, so passing the config as an object literal is not feasible.

Any suggestions or assistance?

typescript generics

Answer 1

Answer №1

Typescript's behavior is to only check for excess properties when assigning an object literal directly to a variable or parameter of a specific type, as detailed here. To address this in your scenario, you have the option to explicitly type the config variable or use an object literal directly:

const values = [
    {
        foo: 'foo',
        bar: 'bar'
    },
    {
        foo: 'foo',
        bar: 'bar'
    }
];

// We can define config based on the values without needing an additional interface
const config: Config<typeof values[number]> = {
    foo: {
        highPriority: true,
        callback: () => []
    },
    // This will cause an error
    wrong: {
        highPriority: true,
        callback: () => []
    }
};

// Alternatively, pass the object literal directly 
const result2 = customFunction(values, {
    foo: {
        highPriority: true,
        callback: () => []
    },
    // This will also trigger an error
    wrong: {
        highPriority: true,
        callback: () => []
    }
});

Another approach involves using conditional types and an additional parameter to flag an error if the passed type contains extra properties:

type NoExtraProperties<TSource, TTarget> = Exclude<keyof TSource, keyof TTarget> extends never ? true : "Extra properties detected";
const customFunction = <T, TConfig extends Config<T>>(values: T[], config: TConfig, validate: NoExtraProperties<TConfig, T>): Array<CustomType<T>> => {
    // implementation...

    return [];
};

// The following line will throw an error
const result = customFunction(values, config, true);

For further experimentation, you can visit the Playground link.

Answer 2

Typescript's behavior is to only check for excess properties when assigning an object literal directly to a variable or parameter of a specific type, as detailed here. To address this in your scenario, you have the option to explicitly type the config variable or use an object literal directly:

const values = [
    {
        foo: 'foo',
        bar: 'bar'
    },
    {
        foo: 'foo',
        bar: 'bar'
    }
];

// We can define config based on the values without needing an additional interface
const config: Config<typeof values[number]> = {
    foo: {
        highPriority: true,
        callback: () => []
    },
    // This will cause an error
    wrong: {
        highPriority: true,
        callback: () => []
    }
};

// Alternatively, pass the object literal directly 
const result2 = customFunction(values, {
    foo: {
        highPriority: true,
        callback: () => []
    },
    // This will also trigger an error
    wrong: {
        highPriority: true,
        callback: () => []
    }
});

Another approach involves using conditional types and an additional parameter to flag an error if the passed type contains extra properties:

type NoExtraProperties<TSource, TTarget> = Exclude<keyof TSource, keyof TTarget> extends never ? true : "Extra properties detected";
const customFunction = <T, TConfig extends Config<T>>(values: T[], config: TConfig, validate: NoExtraProperties<TConfig, T>): Array<CustomType<T>> => {
    // implementation...

    return [];
};

// The following line will throw an error
const result = customFunction(values, config, true);

For further experimentation, you can visit the Playground link.

Ensuring the type safety of arguments in TypeScript through conditional checking based on the previous argument

Answer №1

Similar questions

Unraveling Props in a React Component Using Typescript and a Union Interface

How can variables from state be imported into a TypeScript file?

Tips on how to properly handle Promises in a constructor function

Is there a way to access the value of a public variable within the @input decorator of a function type?

Changing array in TypeScript/Angular

TS: Utilizing a generic parameter in an overloaded function call

A step-by-step guide on reading/loading a JSON file using Typescript

Type inference in Typescript is especially powerful when used in conjunction with decorators

Issue with Nativescript + Angular project: A critical error has occurred - Module not found: '@schematics/angular/utility/parse-name'

Typescript: organizing nested types within an interface

The JokesService (?) has encountered dependency resolution issues that Nest is unable to resolve

Conditional types allow the function parameter type to be determined based on the type of another parameter

implementing an event listener in vanilla JavaScript with TypeScript

Jasmine: utilizing unit test to spy on the invocation of a nested function

What is the process for incorporating a restriction in a map within a generic framework?

Angular8 Material Grid displaying headers and tiles, experiencing slight resizing issue with mat-grid-tile content

TypeScript: defining a custom type with a collection of properties following a consistent pattern

Challenge with Ahead-of-Time Compilation in Angular Dynamic Components

The Typescript loop appears to be stuck and not moving through the

Having trouble getting the npm package with @emotion/react and vite to function properly