How do you globally add a property to a third-party ButtonProps interface?

WHAT THIS TESTS: This question evaluates whether you understand TypeScript declaration merging and module augmentation. The interviewer wants to see that you know how to safely extend third-party types without touching node_modules. It also checks if you understand the difference between type aliases and interfaces, since only interfaces merge. Senior candidates should mention ambient module declarations and tsconfig scoping.

A GOOD ANSWER COVERS: First, create a .d.ts file somewhere in your project that TypeScript will pick up, such as src/types/augmentations.d.ts. Second, if the library is an imported module, use ambient module augmentation by writing declare module 'library-name' and re-declaring the interface with the exact same name. Add the optional data-testid property inside that interface. TypeScript will merge the declarations automatically. Third, mention that the file should not have an export or import at the top level if you want it treated as a script that augments the global scope, though in modern bundlers a module-level declare module block also works. Fourth, verify that your tsconfig.json includes the directory or that the file is matched by the include array. If the library is global rather than modular, you would instead extend the global namespace directly.

COMMON WRONG ANSWERS: A major red flag is suggesting you edit the files inside node_modules or submit a pull request to the library as the immediate fix. Another weak answer is creating a local wrapper type like type MyButtonProps equals ButtonProps intersected with a local object type and casting at every usage site; this works locally but fails the requirement to add the property globally. Some candidates incorrectly say you cannot extend an interface from an external module. Others suggest using a type alias instead of an interface in the augmentation, which will error because type aliases do not merge.

LIKELY FOLLOW-UPS: The interviewer may ask what happens if the library exported a type alias instead of an interface. The correct response is that type aliases do not support declaration merging, so you would need a different strategy such as module augmentation with an interface or creating a separate helper type. They might also ask how to scope the augmentation to a single package or how to ensure the .d.ts file is loaded. A senior candidate should also be ready to discuss the impact of esModuleInterop and isolatedModules on declaration files.

ONE CONCRETE EXAMPLE: Create a file named button-augmentation.d.ts containing the following. Import the library or use a declare module block with the exact package name. Write declare module 'third-party-button-lib' { interface ButtonProps { 'data-testid'?: string; } }. Place this file in a directory covered by your tsconfig include pattern. After restarting the TypeScript language service, every import of ButtonProps from that library will now offer autocomplete for data-testid without any cast or local wrapper.