What is the best way to create an interface that only allows keys to be a combination of values from a specific property found within each object of an array?

Question

What is the best way to create an interface that only allows keys to be a combination of values from a specific property found within each object of an array?

interface Filter {
    id: string;
    name: string;
}

type Filters = Filter[];

const filters = [{ id: 'f1', name: 'f1name'}, { id: 'f2', name: 'f2name'}]

interface State { ... }

const state = {
    f1: any,
    f2: any
}

I am looking to define the type of state. My goal is to create a type called State that represents an object with the same number of properties as the objects in filters, and I want to limit the type of each property to be the union of the types of the id property from filters.

In the scenario given above, the type of state is State, which means it is "an object containing keys 'f1' | 'f2' with values of type any.

typescript

Answer 1

Answer №1

To maintain the string literal types when declaring filters, use as const as shown below:

const filters = [{ id: 'f1', name: 'f1name' }, { id: 'f2', name: 'f2name' }] as const

type Id = (typeof filters)[number]['id']
type State = Record<Id, any>

const state: State = {
    f1: 42,
    f2: 'any'
}

Try it on TypeScript playground

Answer 2

To maintain the string literal types when declaring filters, use as const as shown below:

const filters = [{ id: 'f1', name: 'f1name' }, { id: 'f2', name: 'f2name' }] as const

type Id = (typeof filters)[number]['id']
type State = Record<Id, any>

const state: State = {
    f1: 42,
    f2: 'any'
}

Try it on TypeScript playground

What is the best way to create an interface that only allows keys to be a combination of values from a specific property found within each object of an array?

Answer №1

Similar questions

Having issues with your Typescript in Sublime Text?

How can I swap a string for a symbol in JavaScript?

Can you explain the distinction between using [ngFor] or [ngForOf] in Angular 2?

How to use RxJs BehaviorSubject in an Angular Interceptor to receive incoming data

What is the best ECMAScript version to select for implementing the TypeScript compiler in an Electron application?

Is it considered safe to modify variables by using this[varName] = something within a function that includes varName as a parameter?

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

How to extract a string value from an observable array in Angular2 NativeScript?

What is the process for transforming binary code into a downloadable file format?

How can I call a method from a class using Typescript when getting an error saying that the property does not exist on the

What is the best way to implement an interface for accurately checking each prop type?

Is there a way to seamlessly share TypeScript types between my Node.js/Express server and Vite-React frontend during deployment?

An issue arises with launching karma.js when importing node-openid-client in a TypeScript specification file

Error: Unable to retrieve the value of 'secret' as it is undefined when attempting to assign a response cookie in Express framework

Retrieve parent route parameters from a dynamically loaded route component

Ways to stop a ngFor loop in TypeScript

Determine through programming whether an ng-content slot has been filled in Angular

Error encountered when attempting to locate the file declaration for module 'jwt-decode'

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

Learn the method for triggering events with a strongly-typed payload in Vue 3 Composition API and TypeScript