如何将 TypeScript 可区分联合转换为对象

Question

说，我有一个类似的结构

//Modified from https://blog.parametricstudios.com/posts/pattern-matching-custom-data-types/.

enum RouteEnum 
{
  Home = "/",
  Todos = "/todos",
  Todo = "/todos/:id",
  NotFound = "*"
}

class HomeLocation
{
  readonly route = RouteEnum.Home;
  
  match<Out>(matcher: LocationMatcher<Out>): Out
  {
    return matcher[RouteEnum.Home](this);
  }
}

// A list of all Todo item links, when one is linked the next route is in TodoLocation.
class TodosLocation
{
  readonly route = RouteEnum.Todos;

  match<Out>(matcher: LocationMatcher<Out>): Out
  {
    return matcher[RouteEnum.Todos](this);
  }
}

// A single Todo location.
class TodoLocation 
{
  readonly route = RouteEnum.Todo;

  match<Out>(matcher: LocationMatcher<Out>): Out
  {
    return matcher[RouteEnum.Todo](this);
  }
}


class NotFoundLocation 
{
  readonly route = RouteEnum.NotFound;

  match<Out>(matcher: LocationMatcher<Out>): Out
  {
    return matcher[RouteEnum.NotFound](this);
  }
}

type NewLocation = HomeLocation | TodosLocation | TodoLocation | NotFoundLocation;

type LocationMatcher<Out> =
{
  [RouteEnum.Home]: (route: HomeLocation) => Out;
  [RouteEnum.Todos]: (route: TodosLocation) => Out;
  [RouteEnum.Todo]: (route: TodoLocation) => Out;
  [RouteEnum.NotFound]: (route: NotFoundLocation) => Out;
};

是否可以将NewLocation 变成类似的结构

// The matching order here is from the the first to latter.
const routes = {
  '/': HomeLocation,
  '/todos': TodosLocation,
  '/todos/:id': TodoLocation,
  '/*': NotFoundLocation
}

如果它很重要，这个问题的更大原因是我正在考虑在这个结构上进行路由匹配，但自然需要一种方法将 URL 转换为那些 *Location 类。

一个例子可能是使用https://github.com/CaptainCodeman/js-router 之类的东西（或者更适合这种结构的类似方法）。例如，这个特定的库在类似routes 示例的结构上运行。我认为，即使不使用这个特定的库，知道如何枚举有区别的联合并创建一个新类型也是很好的了解信息。

目标是将解析的参数作为强类型。当然，这是手动的，但他们需要首先从*Location 类中的相应路由以一种或另一种方式进行匹配。一种选择是为每个 *Location 类设置一个回调函数，该函数从匹配的路由中获取输入。

编辑 我写了一个 StackBlitz 来更好地说明我的思考。在https://stackblitz.com/edit/typescript-hl6drb?file=index.ts。

Answer 1

如果您想以编程方式生成一个对象类型，其中键来自NewLocation 联合成员的route 属性，而值是NewLocation 的相应元素的构造函数，那么您可以这样做这个：

type RoutesType = { 
  [K in NewLocation['route']]: new () => Extract<NewLocation, { route: K }> 
};

计算结果相当于

type RoutesType = {
    "/": new () => HomeLocation;
    "/todos": new () => TodosLocation;
    "/todos/:id": new () => TodoLocation;
    "*": new () => NotFoundLocation;
}

然后您可以将routes 变量注释为该类型：

const routes: RoutesType = {
  '/': HomeLocation,
  '/todos': TodosLocation,
  '/todos/:id': TodoLocation,
  '*': NotFoundLocation
}

请注意，这与

const routes: RoutesType = {
  [RouteEnum.Home]: HomeLocation,
  [RouteEnum.Todos]: TodosLocation,
  [RouteEnum.Todo]: TodoLocation,
  [RouteEnum.NotFound]: NotFoundLocation
}

所以你可以随意写。

这对你有用吗？希望有帮助；祝你好运！

Playground link

---

还有像 this 这样的东西，这是我能从值到类型的最接近的东西......