Passing unknown as generic in typescript

I'm using this npm package where, among other stuff, they use the following types (this is a simplified version of the types in that package):

export interface APIGatewayProxyStructuredResultV2 {
    statusCode?: number;
    headers?: {
        [header: string]: boolean | number | string;
    };
    body?: string;
    isBase64Encoded?: boolean;
    cookies?: string[];
}
export interface APIGatewayProxyEvent {
    version: string;
    routeKey: string;
    rawPath: string;
    body?: string;
}
type ProxyIntegrationBody<T = unknown> = {
    body?: T;
};
type APIGatewayEventRequestContext = {
    key: string;
}
export type ProxyIntegrationEvent<T = unknown> = Omit<APIGatewayProxyEvent, 'body'> & ProxyIntegrationBody<T>
export type ProxyIntegrationResult = Omit<APIGatewayProxyStructuredResultV2, 'statusCode'> & {
    statusCode?: APIGatewayProxyStructuredResultV2['statusCode'];
};
export interface ProxyIntegrationRoute {
    path: string
    method: 'GET' | 'POST' | 'OPTIONS' | 'PUT';
    action: (
    request: ProxyIntegrationEvent<unknown>,
    context: APIGatewayEventRequestContext
    ) => ProxyIntegrationResult | Promise<ProxyIntegrationResult> | string | Promise<string>
}
export interface ProxyIntegrationConfig {
    routes: ProxyIntegrationRoute[];
}

Then in my code, I'm trying to use the types as follows

const handler: ProxyIntegrationConfig = {
    routes: [
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request: ProxyIntegrationEvent, context) => {
                return { statusCode: 200, body: '' };
            }
        },
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request: ProxyIntegrationEvent<{ name: string, numbers: string[] }>, context) => {
                return { statusCode: 200, body: '' };
            }
        },
    ]
};

If I understand generics correctly, I should be able to pass a custom type to ProxyIntegrationEvent via generics, however, I'm getting the following typescript error in the second object of the routes array:

Type '(request: ProxyIntegrationEvent<{ name: string; numbers: string[]; }>, context: APIGatewayEventRequestContext) => Promise<{ statusCode: number; body: string; }>' is not assignable to type '(request: ProxyIntegrationEvent<unknown>, context: APIGatewayEventRequestContext) => string | ProxyIntegrationResult | Promise<...> | Promise<...>'.
  Types of parameters 'request' and 'request' are incompatible.
    Type 'ProxyIntegrationEvent<unknown>' is not assignable to type 'ProxyIntegrationEvent<{ name: string; numbers: string[]; }>'.
      Type 'ProxyIntegrationEvent<unknown>' is not assignable to type 'ProxyIntegrationBody<{ name: string; numbers: string[]; }>'.
        Types of property 'body' are incompatible.
          Type 'unknown' is not assignable to type '{ name: string; numbers: string[]; } | undefined'.ts(2322)
Untitled-1(29, 5): The expected type comes from property 'action' which is declared here on type 'ProxyIntegrationRoute'

If I remove the generic and simply do (request: ProxyIntegrationEvent, context), as I have in the first object of the routes array, it fixes the problem but that defeats the whole purpose because it doesn't give me any typing for the request parameter.

Am I using these types incorrectly or is this some typing bug in the package? I'm thinking of forking that project anyway so I could fix it if needed.

If you'd like ProxyIntegrationConfig to just allow the request callback param to be of a type narrower than unknown, then you can always just change unknown to any in various definitions like:

interface ProxyIntegrationRoute {
    path: string
    method: 'GET' | 'POST' | 'OPTIONS' | 'PUT';
    action: (
        request: ProxyIntegrationEvent<any>, // edit
        context: APIGatewayEventRequestContext
    ) => ProxyIntegrationResult | Promise<ProxyIntegrationResult> | string | Promise<string>
}

But this loosens the type safety until things which are currently rejected for being unsafe are accepted despite being unsafe:

const handler: ProxyIntegrationConfig = {
    routes: [
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request: ProxyIntegrationEvent, context) => {
                return { statusCode: 200, body: '' };
            }
        },
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request: 
              ProxyIntegrationEvent<{ name: string, numbers: string[] }>, // okay
              context) => {
                return { statusCode: 200, body: '' };
            }
        },
    ]
};

declare const a: APIGatewayEventRequestContext
handler.routes[1].action(
    { rawPath: '', routeKey: "", version: "", body: { name: "a", numbers: [] } },
    a); // okay
handler.routes[1].action(
    { rawPath: '', routeKey: "", version: "", body: { oops: 123 } },
    a); // okay?

On the other hand if you want ProxyIntegrationConfig to both allow and keep track of these more specific types so that it can verify type safety, then it needs to be encoded into the type.

That means ProxyIntegrationConfig should maybe be generic in the type of the array of type arguments to the ProxyIntegrationEvent<> type for the request parameters in each element of the routes array. Like this:

interface ProxyIntegrationConfig<T extends unknown[] = unknown[]> {
    routes: { [I in keyof T]: ProxyIntegrationRoute<T[I]> };
}

That's a mapped array type, transforming the array/tuple of elements in T to a corresponding array/tuple of elements of routes. That also means ProxyIntegrationRoute needs to be generic:

interface ProxyIntegrationRoute<T = unknown> {
    path: string
    method: 'GET' | 'POST' | 'OPTIONS' | 'PUT';
    action: (
        request: ProxyIntegrationEvent<T>,
        context: APIGatewayEventRequestContext
    ) => ProxyIntegrationResult | Promise<ProxyIntegrationResult> | string | Promise<string>
}

So now we can give your handler an accurate type:

const handler: ProxyIntegrationConfig<[unknown, { name: string, numbers: string[] }]> = {
    routes: [
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request, context) => {
                return { statusCode: 200, body: '' };
            }
        },
        {
            path: '/playedGames',
            method: 'POST',
            action: async (request, context) => {
                return { statusCode: 200, body: '' };
            }
        },
    ]
};

And note that this isn't really any harder to write, since you don't have to annotate the request parameter anymore. And now we get the benefits of strong types:

handler.routes[1].action(
    { rawPath: '', routeKey: "", version: "", body: { name: "a", numbers: [] } },
    a); // okay

handler.routes[1].action(
    { rawPath: '', routeKey: "", version: "", body: { oops: 123 } }, // error!
    a); 

Note that maybe any really is acceptable, since you can use the satisfies operator to avoid annotation of handler at all. But all of that depends strongly on the use case for what you do with handler, which is probably ultimately out of scope here.

Playground link to code