What is the best way to organize the storage of settings and parameters that are common to several components?

Question

JavaScript

I write in TypeScript.
What is the best way to store settings that are common to several components?
To be more precise, there are 5 components so far, then, perhaps, there will be more of them.
Most settings are read-only, but some are writable.
At the moment, the settings are placed in a separate component-class Settings, the settings are grouped by meaning into objects and are private properties of this class, accessed through the getSetting(settingName) method. As a result, such properties are obtained in the region of 10-15.
Each of the settings can be used in several components.
In the component where these settings (Settings class) are used, they are passed as a constructor argument as a dependency (ioc) and assigned to properties of this class that are similar in name to the settings. Well, then we turn to the settings through this.

constructor (settings) {
    this._settingNameA = settings.getSetting('settingNameA');
    this._settingNameB = settings.getSetting('settingNameB');
}

Accordingly, what I don't like is the selection of the properties of the component class, where these settings are used, for settings. If you do not do this, but select only 1 property for settings - settings (this._settings), then you will have to write something like

let value = this._settings.getSetting('settingNameC').blablabla + this._settings.getSetting('settingNameD');

In general, what is the best way to do this?