Is there a more efficient method in Typescript to define the types of an object containing arrays?

Question

Is there a more efficient method in Typescript to define the types of an object containing arrays?

Suppose I have an object that contains various roles, each granting a specific set of rights:

const allRoles = {
  user: [
    'right1'
  ],
  admin: [
    'right1',
    'right2'
  ],
} as const

If I want to define the types for user rights and admin rights separately, I can use the following:

type userRights = Array<typeof allRoles.user[number]>
type adminRights = Array<typeof allRoles.admin[number]>

To represent both types combined, I would do:

type RoleRights = userRights | adminRights

However, if I want to create a single type declaration for all available rights without specifying individual user or admin rights, is there a way to achieve this?

It is similar to creating an array of all rights using:

const roleRights = new Map(Object.entries(allRoles))

typescript types

Answer 1

Answer №1

If you wish to define your types by using as const with the allRoles object for inference, here is a way to achieve that:

const allRoles = {
  user: [
    'right1'
  ],
  admin: [
    'right1',
    'right2'
  ],
} as const

type RolesMap = typeof allRoles;
/*
{
  readonly user: readonly ["right1"];
  readonly admin: readonly ["right1", "right2"];
}
*/

type UserRoles = RolesMap['user']; // readonly ["right1"]
type AdminRoles = RolesMap['admin']; // readonly ["right1", "right2"]
type AllRoles = UserRoles | AdminRoles; // readonly ["right1"] | readonly ["right1", "right2"]

Note: This approach solidifies fixed types for ['right1'] and ['right1', 'right2'], instead of collapsing automatically into something like ('right1' | 'right2')[] as you might expect.

If you have prior knowledge of all rights within the system architecture, it may be more logical to type the system in reverse, starting from the rights and constructing the map upwards, for instance:

enum RightsEnum {
  right1 = 'right1',
  right2 = 'right2',
  right3 = 'right3',
  ...
}
enum RolesEnum {
  user = 'user',
  admin = 'admin'
}

// explicit
interface RolesMap {
  [RolesEnum.user]: [RightsEnum.right1],
  [RolesEnum.admin]: [RightsEnum.right1, RightsEnum.right2]
}

// generic
type RolesMap = Record<RolesEnum, RightsEnum>;

const allRoles: RolesMap = {
  user: [
    'right1'
  ],
  admin: [
    'right1',
    'right2'
  ],
}

In this setup, your "all rights" type would simply be RightsEnum

Answer 2

If you wish to define your types by using as const with the allRoles object for inference, here is a way to achieve that:

const allRoles = {
  user: [
    'right1'
  ],
  admin: [
    'right1',
    'right2'
  ],
} as const

type RolesMap = typeof allRoles;
/*
{
  readonly user: readonly ["right1"];
  readonly admin: readonly ["right1", "right2"];
}
*/

type UserRoles = RolesMap['user']; // readonly ["right1"]
type AdminRoles = RolesMap['admin']; // readonly ["right1", "right2"]
type AllRoles = UserRoles | AdminRoles; // readonly ["right1"] | readonly ["right1", "right2"]

Note: This approach solidifies fixed types for ['right1'] and ['right1', 'right2'], instead of collapsing automatically into something like ('right1' | 'right2')[] as you might expect.

If you have prior knowledge of all rights within the system architecture, it may be more logical to type the system in reverse, starting from the rights and constructing the map upwards, for instance:

enum RightsEnum {
  right1 = 'right1',
  right2 = 'right2',
  right3 = 'right3',
  ...
}
enum RolesEnum {
  user = 'user',
  admin = 'admin'
}

// explicit
interface RolesMap {
  [RolesEnum.user]: [RightsEnum.right1],
  [RolesEnum.admin]: [RightsEnum.right1, RightsEnum.right2]
}

// generic
type RolesMap = Record<RolesEnum, RightsEnum>;

const allRoles: RolesMap = {
  user: [
    'right1'
  ],
  admin: [
    'right1',
    'right2'
  ],
}

In this setup, your "all rights" type would simply be RightsEnum

Answer 3

Answer №2


const userAccess = typeof roles.user[number] as UserAccess;
const adminAccess = typeof roles.admin[number] as AdminAccess;

const userAccessList: UserAccess[] = [];
const adminAccessList: AdminAccess[] = [];

type RoleAccess = (UserAccess | AdminAccess)[];

Answer 4


const userAccess = typeof roles.user[number] as UserAccess;
const adminAccess = typeof roles.admin[number] as AdminAccess;

const userAccessList: UserAccess[] = [];
const adminAccessList: AdminAccess[] = [];

type RoleAccess = (UserAccess | AdminAccess)[];

Is there a more efficient method in Typescript to define the types of an object containing arrays?

Answer №1

Answer №2

Similar questions

How to effectively test @input using Jasmine: Anticipated Object did not match undefined

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

What is the process of molding items?

Creating a versatile protractor framework to streamline multiple project implementations

No pathways can be established within Core UI Angular

Error: TypeScript cannot find @types declaration for restify-client

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

What are the steps to locally test my custom UI library package built with tsdx in a React.js project

Changing JSON names to display on a webpage

What are the steps to effectively utilize an interface within a TypeScript file that contains its own internal import?

What purpose does the "dom" serve in the "lib" array found in the tsconfig.json configuration file of an

MQTT Broker specialized in Typescript

What are the steps for changing this JavaScript file into TypeScript?

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

Is it possible to use an object's attribute as a switch case in TypeScript with useReducer?

Create keys for accessing objects based on props

Exploring Geofirestore's capabilities with advanced query functionalities

Is it necessary to manually validate parameters in TypeScript when developing a library?

Utilize the prototype feature from a versatile source

Using RxJS for various scenarios with Angular HttpInterceptor