How to implement a Typescript interface that allows additional properties?

Issue

Ok, I have been struggling with this one as all information I find is about how to define interfaces that allow other properties, but not how to create a class that can implement the interface.

I have (or want to have) the following interface:

export interface IEnvironment {
    value: string;
    names: string[];
    [x: string | 'value' | 'names']: (() => boolean) | string | string[]
};

Then I want a class that implements said interface, but I only want to implement the value and names properties.

For full disclosure, I want to create an environment object with value, names and one function per name in names. Like this:

export class Environment implements IEnvironment {
    value: string;
    names: Array<string>;
    static defaultNames: string[] = ['Development', 'PreProduction', 'Production'];
    constructor(value: string, names?: Array<string>) {
        this.value = value;
        this.names = names ?? Environment.defaultNames;
        let currEnvFound = false;
        this.names.forEach((name) => {
            // Look at all the hoops I had to jump so TypeScript would not complain.  Suggestions welcome.
            (this as unknown as { [x: string]: () => boolean })[`is${name}`] = function () { return (this as unknown as Environment).value === name; };
            currEnvFound = currEnvFound || name === value;
        });
        // Throw if the current environment value was not found.
        if (!currEnvFound) {
            throw new Error(`The provided environment value "${value}" was not found among the provided list of environments.`);
        }
    }
};

Now this works except for one error I get:

Class 'Environment' incorrectly implements interface 'IEnvironment'. Index signature for type 'string' is missing in type 'Environment'.

So how can I do this? I'm a noob in the TypeScript arena, so I'd rather ask the experts.

If no solution, could this be worked around with another interface that extends IEnvironment? Like remove the extra properties thing and move it to another interface that I would use as consumer of the object so I get the correct Intellisense.

Thank you very much in advance.

Solution

You just need to declare this dynamic x property from interface as class property.

Add this line as your class property: [x: string]: string|(() => boolean)|string[];

Finally, your class looks like this:

class Environment implements IEnvironment {
    value: string;
    names: Array<string>;
    static defaultNames: string[] = ['Development', 'PreProduction', 'Production'];

    //ADD THIS
    [x: string]: string|(() => boolean)|string[];

    constructor(value: string, names?: Array<string>) {
        this.value = value;
        this.names = names ?? Environment.defaultNames;
        
        let currEnvFound = false;
        this.names.forEach((name) => {
            // Look at all the hoops I had to jump so TypeScript would not complain.  Suggestions welcome.
            (this as unknown as { [x: string]: () => boolean })[`is${name}`] = function () { return (this as unknown as Environment).value === name; };
            currEnvFound = currEnvFound || name === value;
        });
        // Throw if the current environment value was not found.
        if (!currEnvFound) {
            throw new Error(`The provided environment value "${value}" was not found among the provided list of environments.`);
        }
    }
};

Answered By - Bane2000