Given that `react-localization` does not have date and number format and is heavily dependent on one developer we decided to switch to `react-intl` because it seems safer in the long run.

<https://github.com/stefalda/react-localization/graphs/contributors>

Our previous code looked like this:

localizationService.ts

```
import LocalizedStrings from 'react-localization';

import svSE from './languages/sv-SE';
import enUS from './languages/en-US';
import arSA from './languages/ar-SA';

export default new LocalizedStrings({
    svSE,
    enUS,
    arSA
});

```

ILanguageStrings.ts

```
export interface ILanguageStrings {
    appName: string
    narration: string
    language: string
}

```

en-US.ts

```
import { ILanguageStrings } from '../ILanguageStrings';

const language: ILanguageStrings = {
    appName: "Our App",
    narration: "Narration",
    language: "Language"
}

export default language;

```

Localization could then be imported and `ILanguageStrings` was visible via IntelliSense in Visual Studio and validated by TypeScript.

```
import localization from '../services/localizationService';

```

[![enter image description here](https://i.stack.imgur.com/8lzaz.png)](https://i.stack.imgur.com/8lzaz.png)

However using `FormattedMessage` from `react-intl` `id` is either `string | number | undefined`. We still use the language files so how can we make sure `id` is in `ILanguageStrings` without breaking the original type definitions from `react-intl`?

[![enter image description here](https://i.stack.imgur.com/lp5mN.png)](https://i.stack.imgur.com/lp5mN.png)

I tried with TypeScript Declaration Merging and Merging Interfaces but I could only add new members there and not change the id property. A "valid" string was not seen as correct either.

react-app-env.d.ts:

```
import * as reactIntl from 'react-intl';

declare module 'react-intl' {
    export interface MessageDescriptor {
        id?: ILanguageStrings;
        idTest: ILanguageStrings 
    }
}

```

[![enter image description here](https://i.stack.imgur.com/pvUfm.png)](https://i.stack.imgur.com/pvUfm.png)

<https://github.com/microsoft/TypeScript/issues/10859>

<https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces>