Typescript: Add a property on an inner object with module augmentation

Question

Considering an external (npm) module extmod exposing the following interface in its declarations file:

interface Options {
  somevar?: string;
  suboptions?: {
    somesubvar?: string;
  };
}

How can I add a property somesubvar2 inside suboptions with module augmentation?

I've tried the following in an extmod.d.ts file:

declare module 'extmod' {
  interface Options {
    suboptions?: {
      somesubvar2?: string;
    };
  }
}

But it throws the following errors:

error TS2687: All declarations of 'suboptions' must have identical modifiers.

error TS2717: Subsequent property declarations must have the same type.  Property 'suboptions' must be of type '<SNIP>', but here has type '{ somesubvar2: string; }'.

You might want to have a look at indexable types or simply use mutiple interfaces. I don't think you can "nest" them. — RienNeVaPlu͢s
– RienNeVaPlu͢s, Commented May 10, 2020 at 17:45
You can't merge fields like this... see Module declaration with same name for property and function; does that answer your question? — jcalz
– jcalz, Commented May 10, 2020 at 17:47
Or How can I augment a property within a third-party TypeScript interface defined as “any”? — jcalz
– jcalz, Commented May 10, 2020 at 17:49
Are you using a third-party library with a declaration file? If so you might need to copy it locally, modify it however you want, and use the modified version. As for "the said interface is used in multiple functions' arguments defined by the library itself"... but it wouldn't have a problem with somesubvar2 being a required property of suboptions? — jcalz
– jcalz, Commented May 10, 2020 at 19:37

Qwerty · Accepted Answer · 2022-01-06 19:24:29Z

0

This could have been done probably better, made available globally using ambient declarations, but it still makes the job done.

import Web3 from 'web3'
import type { Contract as TheBadContract } from 'xyz'

interface ContractMethods {
  // some properties...
}

interface Contract extends Modify<TheBadContract, {
  methods: ContractMethods // <- this `methods` is the actual overwritten property
}> {}

const contract: Contract = new web3.eth.Contract()

This was easy as the methods object was an immediate member and it is undefined on the original Contract type.

If you need to actually modify some deeply nested key, check out my ModifyDeep type below.

Modify: https://stackoverflow.com/a/55032655/985454
ModifyDeep: https://stackoverflow.com/a/65561287/985454

answered Jan 6, 2022 at 19:24

Qwerty

32.5k26 gold badges131 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Józef Podlecki · Accepted Answer · 2020-05-11 00:40:32Z

-1

How can I add a property somesubvar2 inside suboptions with module augmentation?

In your example you changed the type suboptions from <SNIP> to { somesubvar2: string; }

You could patch <SNIP> type with additional property.

answered May 11, 2020 at 0:40

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Collectives™ on Stack Overflow

Typescript: Add a property on an inner object with module augmentation

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related