Some improvement ideas

[xuanswe]

First of all, thanks for sharing your smart idea!

But, IMO, to be used in production, it requires some important improvements:

1. It should be implemented as a typescript module and re-export only typedPath function in index.ts. The implementation detail should be private and placed in separated files.
2. Currently, separator is hard-coded as a dot. In real life, we also want to use slash / to build url or file path. So the separator should be configurable.
3. How to insert a dynamic value in the middle of the path? For example, how can we build url /users/:username/posts/:postId/comments?

Best regards

[xuanswe]

The example below is valid in typescript:

type _Routes = {
  users: {
    [username: string]: {
      posts: {
        [postId: number]: {
          comments: {}
        }
      }
    }
  }
};

const exampleRoutes: _Routes = {
  users: {
    myusername: {
      posts: {
        2: {
          comments: {}
        }
      }
    }
  }
}

It would be great if it's possible to build similar thing with typedPath<_Routes>()!

What is your opinion? What if we can find a way to allow this:

const routes = typedPath<_Routes>('/'); // use slash instead of dot.
const exampleRoutes = routes.users.username('myusername').posts.postId(2).comments.$path;
console.log(exampleRoutes); // users/myusername/posts/2/comments

[xuanswe]

So similar to $path, in theory, I think we can add also username('myusername') and postId(2). But in this case, it's more difficult because we need to know how to get the identifier username and it's type string.

[bsalex]

@nguyenxndaidev , thanks for the suggestions.

[bsalex]

Hi @nguyenxndaidev

There is an update regarding your recommendations.
After multiple contributions - the following use case is possible:

type _Routes = {
    users: {
      [username: string]: {
        posts: {
          [postId: number]: {
            comments: {}
          }
        }
      }
    }
  };
  
  /*
  const exampleRoutes: _Routes = {
    users: {
      myusername: {
        posts: {
          2: {
            comments: {}
          }
        }
      }
    }
  }
  */

  const path = typedPath<_Routes>().users['myusername'].posts[2].comments.$rawPath;

  console.log('Raw path:', path); // logs ["users", "myusername", "posts", 2, "comments"]
  console.log('Url:', path.join('/')); // logs users/myusername/posts/2/comments 

It supports dynamic chunks in the path (myusername and 2) and access to raw path chunks, which enables users to merge path chunks with their own logic.

Here is the working example to play with:

https://codesandbox.io/s/typed-path-routes-mc5jo?file=/src/index.ts

Does it cover your recommendations?

[xuanswe]

Wow @bsalex, this's a super cool improvement!

I did a quick test with IntelliJ IDEA, Visual Studio Code and codesandbox. There's a small issue, could you check?

// Wrong type of postId and username, but no complain
typedPath<_Routes>().users[1].posts['a'].comments.$rawPath.join('/')

Another thing is that, the syntax hides field name username and postId. This example is easy to understand even without these field names. But in other cases, it could be difficult to know the meaning of field values. In some cases, it could be even misinterpret.
I think it would be nice if we show the field name for clarity:
typedPath<_Routes>().users.username['myname'].posts.postId[1].comments.$rawPath.join('/').

What's your opinion?