"Can you show me how to create a dotted-object-path type from an Object

Is there a way to use ts-toolbelt's Object.Paths and String.Join to generate all paths of an object as String literals with dot separators, creating a Union type like the example below?

// Object
const obj = {
  a: 'abc',
  b: 'def',
  c: {
    c1: 'c1',
    100: 'c2',
  }
}
// Type
type dottedType = 'a' | 'b' | 'c.c1' | 'c.100'

I came across this solution that doesn't involve using ts-toolbelt:

type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]]

type Join < K, P > = K extends string | number ?
  P extends string | number ?
  `${K}${"" extends P ? "" : "."}${P}` :
  never :
  never

type Leaves < T, D extends number = 10 > = [D] extends[never] ?
  never :
  T extends object ?
  {
    [K in keyof T] - ? : Join < K,
    Leaves < T[K],
    Prev[D] >>
  }[keyof T] :
  ""

// Object
const obj = {
  a: 'abc',
  b: 'def',
  c: {
    c1: 'c1',
    100: 'c2',
  }
}
// Type
type dottedType = Leaves < typeof obj >
// type dottedType =  'a' | 'b' | 'c.c1' | 'c.100'

Is there a simpler way to achieve this with ts-toolbelt?

Answer №1

One might expect it to be as follows:

type ObjPaths = Object.Paths<typeof obj>
type DottedObjPaths = String.Join<ObjPaths, '.'> // string

However, this results in widening to string.

The issue arises from the fact that for some unknown reason (possibly a valid one), Object.Paths returns tuples containing optional values. The type of ObjPaths is:

type ObjPaths = ["a"?] | ["b"?] | ["c"?, "c1"?] | ["c"?, 100?]

Notice the presence of ? indicating those values as optional. To satisfy String.Join, we need to eliminate these optionals.

It appears that List.Required can accomplish this.

We can implement it like so:

type ObjPaths = Object.Paths<typeof obj>
type NonOptionalObjPaths = List.Required<ObjPaths>
type DottedObjPaths = String.Join<NonOptionalObjPaths, '.'>
// "a" | "b" | "c.c1" | "c.100"

This solution seems to produce the desired outcome.

View Playground Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a comprehensive switch case in Typescript using string enums that are referencing other string enums?

I am faced with a challenge where I have a subset of values from one enum that I need to switch case across in TypeScript. Here's an example to illustrate my dilemma: const enum Fruit { APPLE = 'Apple', BANANA = 'Banana', ...

Tips for triggering the update of index.view when the Save command is triggered within an active dialog

When I try to save in an open dialog using the Save command, the parent index.view does not update. However, everything works fine when using the SaveAndClose command. This was tested on the Product object at https://github.com/alex-kukhtin/A2v10.Web.Sampl ...

Trying to enter the function, but it exits without executing

I'm facing an issue with my function that involves making multiple calls to an observer. I need the function to wait until all the calls are complete before returning. I attempted putting the return statement inside the subscribe method, but it result ...

React TypeScript - Issue with passing props to Hooks causing type errors

I have set up a codesandbox project to demonstrate my problem 1) Initially, I created the <Input> component for styling and tracking input content. 2) While everything was functional, adding more forms prompted me to create a useInput hook for easi ...

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

I'm currently integrating the Advice Slip API into my project. I am experiencing an issue when trying to store the JSON data in a variable like so: let advice; fetch("https://api.adviceslip.com/advice").then(response => response.json()). ...

The final value of a loop is consistently returned each time

Creating a loop to generate objects. Action.ts public campaing:any = { 'id': '', 'campaing_code': '', 'campaing_type': '', 'start_date': this.currentDate, 'end ...

What is the Typescript compiler utilized by Visual Studio 2015 when compiling on save?

Currently using Visual Studio 2015 Update 3 with TypeScript 2 for VS installed. I have a basic ASP.NET Core MVC web application with a few simple TypeScript files. The project contains a tsconfig.json file in the root folder with "compileOnSave": true. I ...

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

I have a unique service dedicated to managing app configurations class Configuration { get setting() { return dataStore.fetchSetting(); } set setting(value) { dataStore.saveSetting(value); } } This configuration is linked to components t ...

Encountering Issues with TypeScript Strict in Visual Studio Code Problems Panel

I have discovered that I can optimize my TypeScript compilation process by utilizing the --strict flag, which enhances type checking and more. Typically, I compile my TypeScript code directly from Visual Studio Code with a specific task that displays the c ...

Alert: User is currently engaging in typing activity, utilizing a streamlined RXJS approach

In my current project, I am in the process of adding a feature that shows when a user is typing in a multi-user chat room. Despite my limited understanding of RXJS, I managed to come up with the code snippet below which satisfies the basic requirements for ...

Implementing basic authentication with AWS Lambda and Application Load Balancer

A few days ago, I sought assistance on implementing basic-authentication with AWS Lambda without a custom authorizer on Stack Overflow. After receiving an adequate solution and successfully incorporating the custom authorizer, I am faced with a similar cha ...

Vue Deep Watcher fails to activate when the data is altered

While the countdown timer is functioning properly, it seems that the deep watcher is not working as expected. Despite attempting to log the new value of seconds in the console, it does not display anything even though the countdown timer continues to funct ...

Revitalize access token with Keycloak in Javascript

I am currently working with keycloak-js version 8.0.1 and have a function called getToken that checks if the token is expired. If it is expired, the function refreshes it; otherwise, it returns the current token. The issue I am facing is that even though t ...

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...

Problem encountered with @HostListener

In an Angular component, I have the following code snippet that is functioning as intended: @HostListener('document:click', ['$event']) onClick(event) { if(!this.eRef.nativeElement.contains(event.target)) { console.log("clicked out ...

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

What is the purpose of specifying the data types of my method parameters while I am incorporating an interface?

For instance: interface Foo { someProperty: Number someMethod?: (str: string) => void } class Bar implements Foo { someProperty = 42 someMethod (str) { console.log(this.someProperty) } } The str argument in someMethod() is clearly a str ...

Customize the text displayed in a dropdown menu in Angular Material based on the selection made

I am working with a multi-select dropdown menu that includes an option labeled "ALL" which, when selected, chooses all available options in the list. My goal is to display "ALL" in the view when this option is chosen or when the user manually selects all t ...

Tips for preventing the ngbTypeahead input field from automatically opening when focused until all data is fully mapped

When clicking on the input field, I want the typeahead feature to display the first 5 results. I have created a solution based on the ngbTypeahead documentation. app.component.html <div class="form-group g-0 mb-3"> <input id="typ ...