Typescript Array Map of Objects Producing No Unsafe Any Error

Question

I'm in the process of converting my Angular project to v13 in a new workspace, and as I was moving code over, I came across a typescript-eslint error that I don't have an answer for.

The code that worked before was as follows:

interface IConfigurationSetting {
  category?: string,
  key?: string,
  value?: string | number,
  message?: string
}

export class ConfigurationSetting implements IConfigurationSetting {
  category: string;
  key: string;
  value: string | number;
  message: string;

  constructor(options: IConfigurationSetting = {}) {
    this.category = options.category || '';
    this.key = options.key || '';
    this.value = options.value || '';
    this.message = options.message || '';
  }
}

export class ConfigurationSettingsGroup {
  settings: ConfigurationSetting[];
  errors: string[];

  constructor(options: {
    settings?: ConfigurationSetting[],
    errors?: string[]
  } = {}) {
    this.settings = (options.settings || []).map(setting => new ConfigurationSetting(setting));
    this.errors = options.errors || [];
  }
}

Now when the eslinter on VSC is finished, it produces an error for the setting parameter in the new ConfigurationSetting(setting) call - " Unsafe argument of type 'any' assigned to a parameter of type 'IConfigurationSetting' ".

I build out my classes as such because I want to be sure that the properties of complex objects or array of objects have all the necessary defaults established. Am I still allowed to map arrays of complex objects like above? If so, what can I do to have it bypass this unsafe rule without disabling it altogether? Or, is there now a better way to property map arrays of complex object types?

UPDATE: I made one change that removed the Unsafe argument of type 'any' assigned to a parameter of type 'IConfigurationSetting' error:

this.settings = <ConfigurationSetting[]>(options.settings || []).map((setting: ConfigurationSetting) => new ConfigurationSetting(setting));

But I am still getting a typescript-eslint error:

Unsafe call of an `any' typed value. eslint(@typescript-eslint/no-unsafe-call)

Anybody can help me figure that out?

Answer 1

There are a few implicit type conversions on your snippet, and that seems to be what the linter is warning about.

These look like the cause:

constructor(options: IConfigurationSetting = {}) {
                                         //   ^ here, this has "any" type

this.settings = (options.settings || []).ma...
                                  //  ^ here, this has "any[]" type

You could do some casting to work around it:

constructor(options: IConfigurationSetting = <IConfigurationSetting>{}) {
...

this.settings = (options.settings || <ConfigurationSetting[]>[]).ma...