Extract the string values of a specific property from an array of objects using Typescript

Question

Extract the string values of a specific property from an array of objects using Typescript

I'm currently working on a project where I need to ensure type safety, but I'm unsure if it's achievable:

Suppose I have an array of "services", with each service defined as follows:

interface Service {
  id: string;
  dependencies?: [string] // references to other Service.id's
}

Is there a method to enforce type safety for the dependencies array? For example:

import { Service } from './service.ts';

const services: Service[] = [
  {
    id: "authors",
  },
  {
    id: "comments",
  }
  {
    id: "posts",
    dependencies: [] // <-- specify this as `Array<"authors" | "comments">`
  }
]

typescript

Answer 1

Answer №1

If you want to achieve a similar outcome, you can utilize unions as shown in the example below:

type RawType = "authors" | "comments";
type RawId = { id : RawType };
type Posts = {
  id: "posts";
  dependencies: RawType[];
}

type Service = RawId | Posts;

// define an array of Services
const services: Service[] = [
  {
    id: "authors",
  },
  {
    id: "comments",
  },
  {
    id: "posts",
    dependencies: [],
  }
];

Interactive Example

Answer 2

If you want to achieve a similar outcome, you can utilize unions as shown in the example below:

type RawType = "authors" | "comments";
type RawId = { id : RawType };
type Posts = {
  id: "posts";
  dependencies: RawType[];
}

type Service = RawId | Posts;

// define an array of Services
const services: Service[] = [
  {
    id: "authors",
  },
  {
    id: "comments",
  },
  {
    id: "posts",
    dependencies: [],
  }
];

Interactive Example

Answer 3

Answer №2

It may seem a bit messy, but to guarantee that the id is included in the array of dependencies, you can try this method:

type Id = 'id1' | 'id2' | 'id3'
type Obj<CurrentId extends Id> = {
  id: CurrentId
  dependencies: Exclude<Id, CurrentId>[]
}

const obj: <CurrentId extends Id>(obj: Obj<CurrentId>) => Obj<CurrentId> = obj => obj

const array = [
  obj({
    id: 'id1',
    dependencies: [], // processed successfully
  }),
  obj({
    id: 'id2',
    dependencies: ['id1'], // processed successfully
  }),
  obj({
    id: 'id3',
    dependencies: ['id3'], // compilation error occurs
  }),
  obj({
    id: 'id3', // please note: compiled even if multiple objects have the same Id
    dependencies: [],
  }),
]

Answer 4

It may seem a bit messy, but to guarantee that the id is included in the array of dependencies, you can try this method:

type Id = 'id1' | 'id2' | 'id3'
type Obj<CurrentId extends Id> = {
  id: CurrentId
  dependencies: Exclude<Id, CurrentId>[]
}

const obj: <CurrentId extends Id>(obj: Obj<CurrentId>) => Obj<CurrentId> = obj => obj

const array = [
  obj({
    id: 'id1',
    dependencies: [], // processed successfully
  }),
  obj({
    id: 'id2',
    dependencies: ['id1'], // processed successfully
  }),
  obj({
    id: 'id3',
    dependencies: ['id3'], // compilation error occurs
  }),
  obj({
    id: 'id3', // please note: compiled even if multiple objects have the same Id
    dependencies: [],
  }),
]

Extract the string values of a specific property from an array of objects using Typescript

Answer №1

Answer №2

Similar questions

Exploring the relationships between nested tuple types

Issue with custom validator in Angular 6: setTimeout function not functioning as expected

Guide to making a TreeView in Angular 2 with Typescript

Should I opt for ionic2 for my production needs?

Using Typescript generics to deduce the type from the second parameter for utilization in the first slot

Reactive form within a parent object for nested counting

Running a Vue.js 3 application with TypeScript and Vite using docker: A step-by-step guide

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

What is the best way to retrieve the file path of a imported Angular module?

Error in Mocha test: Import statement can only be used inside a module

Transferring the storage value to an Ionic 2 object

What sets apart an index signature from a Record when dealing with an empty object?

Creating a typescript array with values matching keys in an object: How to do it?

Introducing the Eventbridge Pipeline enhancer: a tool that assigns a personalized MessageGroupID to each message without

Tips for displaying the date of a JSON response in Angular HTML format?

Tips for creating a string format for the value of an HTML attribute

Generate a compressed file in RAM and then save it to Amazon S3

The appearance of DC charts can vary when constructing an Angular application in production mode

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

Adjust element sizes in real time with Angular 5