How Typescript infers generics from a single object argument - Stack Overflow

admin管理员组

文章数量:1123778

I'm defining some overloads for a typescript function

export function createRoute<
  const TOptions,
  const TComponent extends Component
>(options: TOptions & CreateRouteOptions & WithComponent<TComponent, TOptions>): Route<TOptions> { ... }

CreateRouteOptions is a simple type that defines expected properties of a route

export type CreateRouteOptions = {
  name: string,
  path: string,
  query: string,
}

WithComponent is slightly more complicated, but basically just includes some context around adding a component and optional props callback

export type WithComponent<
  TComponent extends Component = Component,
  TOptions = unknown
> = {
  component: TComponent,
  props?: (route: TOptions) => ComponentProps<TComponent>,
}

createRoute only takes a single argument that is an object. TOptions really should match CreateRouteOptions but I found that putting const TOptions extends CreateRouteOptions in the generics broke my WithComponents type. Most of this is working how I want, except the route argument of the props callback is unknown. I'm struggling to understand how Typescript is building the TOptions type.

Example

const myRoute = createRoute({
  name: 'foo',
  path: '/',
  query: '',
  component: SomeComponent,
  props: (route) => { ... }
  //        ^? EXPECTED { name: 'foo', path: '/', query: '' } RECIEVED unknown
})

Typescript Playground

Playground Example

type Component = { template: string, script: string, props: Record<string, any> }
type ComponentProps<T> = T extends { props: infer TProps extends Record<string, any> } ? TProps : {}
const SomeComponent = {
    template: 'something',
    script: '',
    props: {
        foo: true,
        bar: 123
    }
} satisfies Component

type Route<T> = T & {id: number}

type CreateRouteOptions = {
  name: string,
  path: string,
  query: string,
}

export type WithComponent<
  TComponent,
  TOptions
> = {
  component: TComponent,
  props?: (route: TOptions) => ComponentProps<TComponent>,
}

function createRoute<
  const TOptions,
  const TComponent
>(options: TOptions & CreateRouteOptions & WithComponent<TComponent, TOptions>): Route<TOptions> {
    throw 'not implemented'
}

const myRoute = createRoute({
  name: 'foo',
  path: '/',
  query: '',
  component: SomeComponent,
  props: (route) => ({ foo: true, bar: 14 })
  //        ^? EXPECTED { name: 'foo', path: '/', query: '' } RECIEVED unknown
})

I'm defining some overloads for a typescript function

export function createRoute<
  const TOptions,
  const TComponent extends Component
>(options: TOptions & CreateRouteOptions & WithComponent<TComponent, TOptions>): Route<TOptions> { ... }

CreateRouteOptions is a simple type that defines expected properties of a route

export type CreateRouteOptions = {
  name: string,
  path: string,
  query: string,
}

WithComponent is slightly more complicated, but basically just includes some context around adding a component and optional props callback

export type WithComponent<
  TComponent extends Component = Component,
  TOptions = unknown
> = {
  component: TComponent,
  props?: (route: TOptions) => ComponentProps<TComponent>,
}

createRoute only takes a single argument that is an object. TOptions really should match CreateRouteOptions but I found that putting const TOptions extends CreateRouteOptions in the generics broke my WithComponents type. Most of this is working how I want, except the route argument of the props callback is unknown. I'm struggling to understand how Typescript is building the TOptions type.

Example

const myRoute = createRoute({
  name: 'foo',
  path: '/',
  query: '',
  component: SomeComponent,
  props: (route) => { ... }
  //        ^? EXPECTED { name: 'foo', path: '/', query: '' } RECIEVED unknown
})

Typescript Playground

Playground Example

type Component = { template: string, script: string, props: Record<string, any> }
type ComponentProps<T> = T extends { props: infer TProps extends Record<string, any> } ? TProps : {}
const SomeComponent = {
    template: 'something',
    script: '',
    props: {
        foo: true,
        bar: 123
    }
} satisfies Component

type Route<T> = T & {id: number}

type CreateRouteOptions = {
  name: string,
  path: string,
  query: string,
}

export type WithComponent<
  TComponent,
  TOptions
> = {
  component: TComponent,
  props?: (route: TOptions) => ComponentProps<TComponent>,
}

function createRoute<
  const TOptions,
  const TComponent
>(options: TOptions & CreateRouteOptions & WithComponent<TComponent, TOptions>): Route<TOptions> {
    throw 'not implemented'
}

const myRoute = createRoute({
  name: 'foo',
  path: '/',
  query: '',
  component: SomeComponent,
  props: (route) => ({ foo: true, bar: 14 })
  //        ^? EXPECTED { name: 'foo', path: '/', query: '' } RECIEVED unknown
})

• typescript

Share Improve this question Follow edited yesterday stackoverfloweth asked yesterday stackoverflowethstackoverfloweth 6,90555 gold badges4141 silver badges7575 bronze badges 5

• 1 hey @jcalz thanks for always being there for us TS devs

  本文标签： How Typescript infers generics from a single object argumentStack Overflow

  版权声明：本文标题：How Typescript infers generics from a single object argument - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736598993a1945182.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。