是否可以使用对象类型定义来构造新的数组/元组类型?

IT技术 reactjs typescript
2021-05-03 18:37:44

如果我有一个现有的类型定义:

type Person = {
  name: string;
  age: number;
  sayHello: (greeting: string) => void;
}

是否有可能如何构建此定义的键和类型的类型化数组/元组?

例如,如果我想要一个类型,如:

type PropAndTypes = ( 
  ['name',string] | 
  ['age',number]  | 
  ['sayHello', (arg: string) => void]
)[];

这可以从现有的类型定义中以某种方式生成吗?

对于不太深奥的例子,特定用例将帮助为路由库(ui-router创建类型安全的状态声明,给定链接组件的预期props。

示例状态声明有一个组件字段,以及将传递给组件的解析。

const exampleStateDefinition = {
  name: 'example.state',
  url: '/:name/:age',
  component: ExampleComponent,
  resolve: [
    {
      token: 'age' as const,
      deps: [Transition],
      resolveFn: (trans: Transition) => trans.params<Person>().age,
    },
    {
      token: 'name' as const,
      deps: [Transition],
      resolveFn: (trans: Transition) => trans.params<Person>().name,
    },
    {
      token: 'sayHello' as const,
      deps: [Transition],
      resolveFn: () => (greeting: str) => console.log(greeting),
    },
  ],
};

我想生成一个类型定义,如:

type stateDeclaration = {
    resolve: ResolveTypes[];
}

这里ResolveTypes

type ResolveTypes = { token: 'name', resolve: string } | { token: 'age', resolve: number }; 
1个回答

所以这就是我想出的“不那么深奥的例子”(操场):

const ExampleComponent = (props: { hey: string }) => ({ hey: props.hey });
interface Person {
  age: number;
  name: string;
}
interface Transition {
  params: <T>() => T;
}
const transition = { params: () => ({ age: 1, name: "aaa" }) };

const exampleStateDefinition = {
  name: "example.state",
  url: "/:name/:age",
  component: ExampleComponent,
  resolve: [
    {
      token: "age" as const,
      deps: [transition],
      resolveFn: (trans: Transition) => trans.params<Person>().age,
    },
    {
      token: "name" as const,
      deps: [transition],
      resolveFn: (trans: Transition) => trans.params<Person>().name,
    },
    {
      token: "sayHello" as const,
      deps: [transition],
      resolveFn: () => (greeting: string) => console.log(greeting),
    },
  ],
};

type ResolverIn<T, R> = {
  token: T;
  resolveFn: R;
};
type ResolverOut<T, R> = {
  token: T;
  resolve: R;
};

type T1<T> = T extends Array<infer U>
  ? U extends ResolverIn<infer V, infer R>
    ? R extends (...args: any) => infer Ret
      ? ResolverOut<V, Ret>
      : never
    : never
  : never;

type ResolveTypes = T1<typeof exampleStateDefinition["resolve"]>;
// = ResolverOut<"age", number> | ResolverOut<"name", string> | ResolverOut<"sayHello", (greeting: string) => void>
// which is:
// { token: "age", resolve: number } | { token: "name", resolve: string } | { token: "sayHello", resolve: (greeting: string) => void }

type StateDeclaration = {
  resolve: ResolveTypes;
};

随着事情的发生

type T1<T> = T extends Array<infer U>
  ? U extends ResolverIn<infer V, infer R>
    ? R extends (...args: any) => infer Ret
      ? ResolverOut<V, Ret>
      : never
    : never
  : never;

在这里,我首先使用条件来确保类型是数组并推断数组元素的类型,然后推断形状为(类似于ResolverIna Pick<>),然后推断resolveFn函数的返回类型(例如ReturnType<T>,但我们刚刚推断类型,因此我们需要infer再次将类型进一步约束为函数)并最终生成我们想要的形状,即ResolverOut<V, Ret>.

的类型ResolveTypes因此变为:

ResolverOut<"age", number> |
ResolverOut<"name", string> |
ResolverOut<"sayHello", (greeting: string) => void>

其形状相当于:

{ token: "age"; resolve: number } |
{ token: "name"; resolve: string } |
{ token: "sayHello"; resolve: (greeting: string) => void }

此外,您的示例排除了返回值为函数的解析器类型,可以使用另一个条件过滤掉该类型:

type T1<T> = T extends Array<infer U>
  ? U extends ResolverIn<infer V, infer R>
    ? R extends (...args: any) => infer Ret
      ? Ret extends (...args: any) => any
        ? never
        : ResolverOut<V, Ret>
      : never
    : never
  : never;

编辑:现在,我没有机会对此进行测试,但是要StateDeclaration直接从生成typeof exampleStateDefinition,您可能可以执行以下操作:

type T2<T> = T extends { resolve: infer U } ? { resolve: T1<U> } : never;
type StateDeclaration = T2<typeof exampleStateDefinition>;

编辑 2:我能够更接近你在评论中澄清的内容,这个答案使用一个实用程序函数(它只是按原样返回传递给它的数组)来强制传递给它的数组包含所有元素从联合类型。游乐场

interface Person {
  age: number;
  name: string;
}
interface Transition {
  params: <T>() => T;
}

type ResolveType<T> = {
  [K in keyof T]: { token: K; resolveFn: (...args: any[]) => T[K] };
}[keyof T];

type ResolveTypes<T> = ResolveType<T>[]


function arrayOfAll<T>() {
  return function <U extends T[]>(array: U & ([T] extends [U[number]] ? unknown : 'Invalid')) {
    return array;
  };
}

interface CustomStateDeclaration<T> {
  name: string;
  url: string;
  component: any;
  resolve: ResolveTypes<T>;
}

type ExampleComponentProps = {
  age: number;
  name: string;
  sayHello: (greeting: string) => string;
};

const arrayOfAllPersonResolveTypes = arrayOfAll<ResolveType<ExampleComponentProps>>()
// passes
const valid = arrayOfAllPersonResolveTypes([
  {
    token: "age" as const,
    resolveFn: (trans: Transition) => trans.params<Person>().age,
  },
  {
    token: "name" as const,
    resolveFn: (trans: Transition) => trans.params<Person>().name,
  },
  {
    token: "sayHello" as const,
    resolveFn: () => (greeting: string) => `Hello, ${greeting}`,
  },
])

// error; missing the "sayHello" token
const missing1 = arrayOfAllPersonResolveTypes([
  {
    token: "age" as const,
    resolveFn: (trans: Transition) => trans.params<Person>().age,
  },
  {
    token: "name" as const,
    resolveFn: (trans: Transition) => trans.params<Person>().name,
  }
])

// error; "name" token's resolveFn returns a number instead of a string
const wrongType = arrayOfAllPersonResolveTypes([
  {
    token: "age" as const,
    resolveFn: (trans: Transition) => trans.params<Person>().age,
  },
  {
    token: "name" as const,
    resolveFn: (trans: Transition) => 123,
  },
  {
    token: "sayHello" as const,
    resolveFn: () => (greeting: string) => `Hello, ${greeting}`,
  },
])

可以尝试创建一个执行效用函数的类型,或者创建一个状态定义工厂/构造函数,所有状态声明都需要创建(可能由符号强制执行),它使用该效用函数。