How to set provider.apiGateway.shouldStartNameWithService in a serverless.ts file?

Question

I am kicking off a new project with a new Serverless TypeScript monorepo! Used the aws-nodejs-typescript template, which gave a serverless.ts config file. After some weeks, I am now getting the nice warning below from Serverless on command line:

Serverless: Deprecation warning: Starting with next major version, API Gateway naming will be changed from “{stage}-{service}” to “{service}-{stage}”.
Set “provider.apiGateway.shouldStartNameWithService” to “true” to adapt to the new behavior now.
More Info: https://www.serverless.com/framework/docs/deprecations/#AWS_API_GATEWAY_NAME_STARTING_WITH_SERVICE

Ok! Looks great, and I like the new naming. And since it’s a new project, better to apply the new naming now, before we release anything. However, it looks like the TypeScript definitions are rather strict, and do not seem to allow for the new variable yet:

Loading failed with: TSError: ⨯ Unable to compile TypeScript:
serverless.ts(44,7): error TS2322: Type ‘{ minimumCompressionSize: number; shouldStartNameWithService: true; }’ is not assignable to type ‘ApiGateway’.
Object literal may only specify known properties, and ‘shouldStartNameWithService’ does not exist in type ‘ApiGateway’.

awsProvider.d.ts(51, 9): The expected type comes from property ‘apiGateway’ which is declared here on type ‘Provider’

Is there a way to set the new property without reverting everything to YAML, which would be somewhat painful at this point?

Update 1

Many thanks to @NexGen for the pointer! Here is a minimal serverless.ts (emphasis on the TS!) showing the solution.

import type { Serverless, ApiGateway } from 'serverless/aws';

const serverlessConfiguration: Serverless = {
  service: {
    name: 'foo',
  },
  frameworkVersion: '2',
  custom: {
    webpack: {
      webpackConfig: './webpack.config.js',
      packager: 'yarn',
      includeModules: true,
    },
    alerts: {
      stages: ['stage', 'prod'],
      definitions: {
        functionErrors: { treatMissingData: 'notBreaching' },
      },
      alarms: ['functionErrors'],
    },
  },
  package: {
    individually: true,
  },
  plugins: [
    'serverless-webpack',
    'serverless-jest-plugin',
    'serverless-plugin-aws-alerts',
  ],
  provider: {
    name: 'aws',
    runtime: 'nodejs12.x',
    region: 'us-west-2',
    stage: "${opt:stage, 'dev'}",
    apiGateway: {
      minimumCompressionSize: 1024,
      shouldStartNameWithService: true,
    } as ApiGateway,
    environment: {
      AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',
    },
  },
};

module.exports = serverlessConfiguration;

Answer 1

It is really simple to apply this change, all what you need to do is to add this to your serverless.yml file.

provider:
  apiGateway:
    shouldStartNameWithService: true

Answer 2

provider: {
  name: 'aws',
  runtime: 'nodejs12.x',
  apiGateway: {
    shouldStartNameWithService: true
  } as ApiGateway,
  stage: 'dev'
}