Complete set of keys within a type

Question

Complete set of keys within a type

In my TypeScript project, I am working with an API (specifically OData API) to retrieve data.

This API allows the selection of specific fields to retrieve. For example,

api/some/getbyid(42)?$select=x,y,z

can be used to get fields x, y, and z, along with some default technical fields such as id or author.

I have model types that correspond to the data retrieved from the API:

type APIItem = {
  id : number; 
  author : string; 
}

type CustomerModel = APIItem  & {
  firstName : string;
  lastName:string;
  age : number
}

I encapsulate the data retrieval logic in a function that takes the ID and fields to be retrieved, makes the API call, and processes the result:

const fakeApi = (id: number, fields : string[]): Promise<APIItem> => {
  // Construct API URL, fetch data, etc.
  const result = JSON.parse(`{
    "id": ${id}, "firstName": "Mark", "lastName": "Hamill", "age": 20, "author": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e7c3f0eceee6ade0ecee">[email protected]</a>"
  }`) ;
  return Promise.resolve(result);
}

const loadFromDB = async <
TModel extends APIItem
>(
  id: number, // Item's ID in the API
  fields : (keyof Omit<TModel, 'id'> & string)[] // Fields to retrieve. Exclude ID because it is always included.
  ): Promise<TModel> => {

  const fromDb = await fakeApi(id, fields);
  const result = fromDb as TModel;
  return Promise.resolve(result);
}

const customerPromise = loadFromDB<CustomerModel>(42, ['firstName']); // Error in code: missing fields
customerPromise.then(console.log).catch(console.error);

The functionality works as expected except for one issue: the consumer code must specify all fields to retrieve. In the example above, only the firstName field is retrieved, resulting in an incomplete object.

Is there a simple way to ensure that all fields from the model are provided in the API call?

As far as I know, TypeScript does not offer a way to iterate over keys in a type since types do not translate to actual JavaScript output.

I would like to enforce that the calling code specifies ALL fields (or allow the function to determine the necessary fields on its own):

loadFromDB<CustomerModel>(42, ['firstName', 'lastName', 'age']);

This approach ensures that the models will always be complete.

Playground Link

typescript

Answer 1

Answer №1

When I need both runtime and compile-time information, my approach involves deriving compile-time information from the data used for runtime purposes. Usually, it's not possible to go the other way around, except in special cases like enums. "Exhaustive arrays," as described, can pose challenges - see example by user123.

To achieve this, consider defining a CustomerModel based on a CustomerModelFields object containing field names and placeholder values:

// Main source of truth: object with field names and representative values
const CustomerModelFields = {
    firstName: "",
    lastName: "",
    age: 0,
};

// Model derived from fields object
type CustomerModel = APIItem & typeof CustomerModelFields;

Omitting author (absent from your sample call) and treating id as part of APIItem, modify the existing code:

In the modified version, loadFromDB takes the fields object type as its parameter type and leverages it for fields (an object rather than an array), determining its return type based on the fields object:

const loadFromDB = async <Fields extends object>(
    id: number, // Item ID
    fields: Fields // Fields to retrieve (excluding Id)
): Promise<APIItem & Fields> => {
    const fromDb = await fakeApi(id, Object.keys(fields));
    const result = fromDb as APIItem & Fields;
    return Promise.resolve(result);
};

During invocation, specify only the fields rather than both the type and fields:

const customer = await loadFromDB(42, CustomerModelFields);

If you desire the specific alias (CustomerModel) for customer, define the constant as follows:

const customer: CustomerModel = await loadFromDB(42, CustomerModelFields);

Complete example available at the playground link https://www.typescriptlang.org/play?jsx=0&pretty=true#code/C4TwDgpgBAggCgSQcCBbKBeKBvAUFAqASwBMAuKAOwFdUAjCAJwG59CBDa4ACwHtGKAZ2CMilAOasAvq1wB6OVDijU7RiCiDe1RgGNovAGZQRXbsUFR2lKLzoArCLuBQA7kR4nu0Su1QRLIy9oQyIIABsSS2sSKEYIMHjBCEpgdmAiADdoahpk2Mz2cOoA3F1eSmEoAGFqYV5-RgBZXhIIgDEwyMssPEIoUMZhADk-CAoAIgmAGjYCcPYRscmZuatxcagABlmZXHlFFrbwiyg20WzYw0YG4IGuqNsHJ2BcUEgauuAGpiOIzFgiGQaCgADITOAIEFavVGn9wp0IlFZOVKi5DOwANYQGBgIgAgAUpAoNHoTGm9yRgiEIjE4gA2gBdACUFGUDSIyQAPPAkChUAA...:

type APIItem = {
    id: number;
    author: string;
};

// Main source of truth: object with field names and representative values
const CustomerModelFields = {
    firstName: "",
    lastName: "",
    age: 0,
};

// Model derived from fields object
type CustomerModel = APIItem & typeof CustomerModelFields;

// Mock API response
const fakeApi = (id: number, fields: string[]): Promise<APIItem> => {
    const result = JSON.parse(`{
        "id": ${id},
        "firstName": "John",
        "lastName": "Doe",
        "age": 25,
        "author": "john.doe@example.com"
    }`);
    return Promise.resolve(result);
};

// Updated loadFromDB function
const loadFromDB = async <Fields extends object>(
    id: number,
    fields: Fields
): Promise<APIItem & Fields> => {
    const fromDb = await fakeApi(id, Object.keys(fields));
    const result = fromDb as APIItem & Fields;
    return Promise.resolve(result);
};

// Invoke loadFromDB asynchronously
(async () => {
    try {
        const customer = await loadFromDB(42, CustomerModelFields);
        console.log(customer);
    } catch (error: any) {
        console.error;
    }

    // Alternatively, use the alias
    try {
        const customer: CustomerModel = await loadFromDB(42, CustomerModelFields);
        console.log(customer);
    } catch (error: any) {
        console.error;
    }
})();

Answer 2

When I need both runtime and compile-time information, my approach involves deriving compile-time information from the data used for runtime purposes. Usually, it's not possible to go the other way around, except in special cases like enums. "Exhaustive arrays," as described, can pose challenges - see example by user123.

To achieve this, consider defining a CustomerModel based on a CustomerModelFields object containing field names and placeholder values:

// Main source of truth: object with field names and representative values
const CustomerModelFields = {
    firstName: "",
    lastName: "",
    age: 0,
};

// Model derived from fields object
type CustomerModel = APIItem & typeof CustomerModelFields;

Omitting author (absent from your sample call) and treating id as part of APIItem, modify the existing code:

In the modified version, loadFromDB takes the fields object type as its parameter type and leverages it for fields (an object rather than an array), determining its return type based on the fields object:

const loadFromDB = async <Fields extends object>(
    id: number, // Item ID
    fields: Fields // Fields to retrieve (excluding Id)
): Promise<APIItem & Fields> => {
    const fromDb = await fakeApi(id, Object.keys(fields));
    const result = fromDb as APIItem & Fields;
    return Promise.resolve(result);
};

During invocation, specify only the fields rather than both the type and fields:

const customer = await loadFromDB(42, CustomerModelFields);

If you desire the specific alias (CustomerModel) for customer, define the constant as follows:

const customer: CustomerModel = await loadFromDB(42, CustomerModelFields);

Complete example available at the playground link https://www.typescriptlang.org/play?jsx=0&pretty=true#code/C4TwDgpgBAggCgSQcCBbKBeKBvAUFAqASwBMAuKAOwFdUAjCAJwG59CBDa4ACwHtGKAZ2CMilAOasAvq1wB6OVDijU7RiCiDe1RgGNovAGZQRXbsUFR2lKLzoArCLuBQA7kR4nu0Su1QRLIy9oQyIIABsSS2sSKEYIMHjBCEpgdmAiADdoahpk2Mz2cOoA3F1eSmEoAGFqYV5-RgBZXhIIgDEwyMssPEIoUMZhADk-CAoAIgmAGjYCcPYRscmZuatxcagABlmZXHlFFrbwiyg20WzYw0YG4IGuqNsHJ2BcUEgauuAGpiOIzFgiGQaCgADITOAIEFavVGn9wp0IlFZOVKi5DOwANYQGBgIgAgAUpAoNHoTGm9yRgiEIjE4gA2gBdACUFGUDSIyQAPPAkChUAA...:

type APIItem = {
    id: number;
    author: string;
};

// Main source of truth: object with field names and representative values
const CustomerModelFields = {
    firstName: "",
    lastName: "",
    age: 0,
};

// Model derived from fields object
type CustomerModel = APIItem & typeof CustomerModelFields;

// Mock API response
const fakeApi = (id: number, fields: string[]): Promise<APIItem> => {
    const result = JSON.parse(`{
        "id": ${id},
        "firstName": "John",
        "lastName": "Doe",
        "age": 25,
        "author": "john.doe@example.com"
    }`);
    return Promise.resolve(result);
};

// Updated loadFromDB function
const loadFromDB = async <Fields extends object>(
    id: number,
    fields: Fields
): Promise<APIItem & Fields> => {
    const fromDb = await fakeApi(id, Object.keys(fields));
    const result = fromDb as APIItem & Fields;
    return Promise.resolve(result);
};

// Invoke loadFromDB asynchronously
(async () => {
    try {
        const customer = await loadFromDB(42, CustomerModelFields);
        console.log(customer);
    } catch (error: any) {
        console.error;
    }

    // Alternatively, use the alias
    try {
        const customer: CustomerModel = await loadFromDB(42, CustomerModelFields);
        console.log(customer);
    } catch (error: any) {
        console.error;
    }
})();

Complete set of keys within a type

Answer №1

Similar questions

typescript - add a global library import statement to every script

Piping in Angular 2 with injected dependencies

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

Toggle the presence of a string in an array with a checkbox

An issue arising with the TypeScript antlr4ts listener type

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

Having trouble retrieving a value from a reference object in React Typescript?

TypeScript - Indexable Type

Adding a second interface to a Prop in Typescript React: a step-by-step guide

Updating the navigation bar in Node/Angular 2 and displaying the sidebar once the user has logged in

The 'toDataURL' property is not recognized on the 'HTMLElement' type

Looking for assistance in setting up a straightforward TypeScript Preact application

The module 'Express' does not have a public member named 'SessionData' available for export

Implementing basic authentication with AWS Lambda and Application Load Balancer

Checking at compile time whether a TypeScript interface contains one or multiple properties

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

Angular2: Unable to locate the 'environment' namespace

When trying to reload Angular 8 pages, encountering an error that reads "Cannot GET /login" and also receiving a notification stating the image '/favicon.ico' cannot be loaded due to a violation of

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements