Namespace vs import trouble | TypeScript Community | Page 1

I'm working with a library that requires the use of "message" packets over a websocket. They all have a designated name and a shape that I have an interface for. The general structure looks like this

/// File string.ts
export const TYPE_NAME = '/msg/string';
export interface Msg {
  data: string;
}

/// File hardwarestatus.ts
export const TYPE_NAME = '/msg/hardware/status';
export interface Msg {
  field1: string;
  field2: number;
  field3: boolean;
  // etc...
}

*** important ***
All of these used to be in namespaces because I wanted the format HardwareStatus.Msg, but ESLint recommended against namespaces in favor of ES2015 syntax, and several members here seconded that idea.
So I changed them all to be the format you see above, and import them like import {HardwareStatus} from '@declarations';

They all get consumed in a react hook called useSubscriber<T>(/* props */) where T is the message shape (called 'Msg').
e.g. useSubscriber<HardwareStatus.Msg>(props);

Here's my current problem:
I have an array of different SubscriberProps, and when I map over that to pass them to react components, I get a bunch of typescript errors saying import ('/* path */').Msg is not assignable to import('/* other path */').Msg.
If I go back to using namespaces, this problem doesn't happen, but since I was recommended to use the modules before, I'm not sure what I should be doing.
The ES modules way also dilutes my intellisense to just Msg when inspecting too, which is a decent annoyance.

What should I do?

#Namespace vs import trouble