Is there a way to use dot notation in TypeScript for a string data type?

Question

Is there a way to use dot notation in TypeScript for a string data type?

I'm currently in the process of developing a function API with a specific format:

createRoute('customers.view', { customerId: 1 });  // returns `/customers/1`

However, I am facing challenges when it comes to typing the first argument. This is my progress so far:

const uris = {
  customers: {
    view: '/customers/:customerId',
  },
  users: {
    list: '/users',
  }
};

const createRoute = (route: string, routeParams: { [key: string]: string }) => {
  /**
   * Splitting 'customer.view' into resource and action variables
   */
  const [ resource, action ] = route.split('.');

  /**
   * Here's where I encounter an error:
   *  
   *   Element implicitly has an 'any' type because expression of type 'string' 
   *   can't be used to index type '{ customers: { view: string; } }'.
   *
   */
  const uri = uris[resource]?.[action]


  // ... additional code for replacing the route parameter...
};

I comprehend the meaning behind the error message. Although the function signature accepts any string, it should be limited to valid keys within the uri object.

Furthermore, the secondary split operation depends on the first one due to its nested nature.

Is there a way to define these types?

typescript

Answer 1

Answer №1

Another approach is the following that allows you to achieve this:

createRoute(['customers', 'view'], {}); // compile
createRoute(['users', 'list'], {}); // compile
createRoute(['users', 'view'], {}); // DOESN'T compile: Type '["users", "view"]' is not assignable to type 'Route<ICustomerUri>'.
createRoute(['nota router'], {}); // DOESN'T compile: Type '"nota router"' is not assignable to type '"customers" | "users"'

Code:

interface ICustomerUri {
    customers: {
        view: string;
    };
}

interface IUsersUri {
    users: {
        list: string;
    };
}

type Route<T> = [keyof T, keyof T[keyof T]];

type Routers = Route<ICustomerUri> | Route<IUsersUri>;

interface IUris extends ICustomerUri, IUsersUri {}

const uris: IUris = {
    customers: {
        view: '/customers/:customerId',
    },
    users: {
        list: '/users',
    }
};

const createRoute = (route: Routers, routeParams: { [key: string]: string }) => {
    // your implementation
}

Playground Link

Answer 2

Another approach is the following that allows you to achieve this:

createRoute(['customers', 'view'], {}); // compile
createRoute(['users', 'list'], {}); // compile
createRoute(['users', 'view'], {}); // DOESN'T compile: Type '["users", "view"]' is not assignable to type 'Route<ICustomerUri>'.
createRoute(['nota router'], {}); // DOESN'T compile: Type '"nota router"' is not assignable to type '"customers" | "users"'

Code:

interface ICustomerUri {
    customers: {
        view: string;
    };
}

interface IUsersUri {
    users: {
        list: string;
    };
}

type Route<T> = [keyof T, keyof T[keyof T]];

type Routers = Route<ICustomerUri> | Route<IUsersUri>;

interface IUris extends ICustomerUri, IUsersUri {}

const uris: IUris = {
    customers: {
        view: '/customers/:customerId',
    },
    users: {
        list: '/users',
    }
};

const createRoute = (route: Routers, routeParams: { [key: string]: string }) => {
    // your implementation
}

Playground Link

Answer 3

Answer №2

Here's a format that should suit your needs:

const resource = route.split('.')[0] as keyof typeof uris;
const action = route.split('.')[1] as keyof typeof uris[typeof resource];

Check it out on the Playground

Answer 4

Here's a format that should suit your needs:

const resource = route.split('.')[0] as keyof typeof uris;
const action = route.split('.')[1] as keyof typeof uris[typeof resource];

Check it out on the Playground

Answer 5

Answer №3

Appreciate all the feedback from everyone. The solutions presented were either overly complicated or lacked proper type safety. In the end, I opted for a more straightforward approach:

const paths = {
  'products.view': '/products/:productId',
  'orders.list', '/orders',
};

type PathKey = keyof typeof paths;

const createPath = (path: PathKey, ...)

Answer 6

Appreciate all the feedback from everyone. The solutions presented were either overly complicated or lacked proper type safety. In the end, I opted for a more straightforward approach:

const paths = {
  'products.view': '/products/:productId',
  'orders.list', '/orders',
};

type PathKey = keyof typeof paths;

const createPath = (path: PathKey, ...)

Is there a way to use dot notation in TypeScript for a string data type?

Answer №1

Answer №2

Answer №3

Similar questions

The Alert dialog in Shadcn will automatically close upon clicking the trigger from the dropdown menu

Include quotation marks around a string in C# to convert it into JSON format

Issues with CSS Styling not being applied properly on mobile devices in a React App deployed on Heroku

Error messages encountered following the latest update to the subsequent project

Retrieve the array from the response instead of the object

What is the process for creating a PickByValue data type?

How to conceal duplicate items in Angular2

Tips for importing a library in a TypeScript file that expands a JavaScript prototype

What is the best way to dynamically insert values into a JSON object?

How do I create a generic function in TypeScript that adjusts its behavior based on the input argument?

Incorporating a component specified in a .jsx file into a TypeScript file

What's stopping me from using useState() to assign API data to an array?

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Manipulate classes by adding or removing them on click events in Angular

Guide to executing various datasets as parameters for test cases in Cypress using Typescript

TS: How can we determine the type of the returned object based on the argument property?

Deleting an element from an object in TypeScript

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Unleashing the power of joint queries in Sequelize

Using Angular's filter pipe to search within a nested array