Why are Module and Namespace needed?

Question

typescript

Good afternoon, what are modules and namespaces used for in ts ?

After all, js has modularity and we import everything we need explicitly, when importing, we give a unique name to everything that was imported.

For what purposes and cases can we use module, namespace ?

Answer 1

TypeScript appeared even before any modules appeared in the JavaScript on which it is based, not only native ones, even emulations like commonjs or amd did not exist then. In those days, it was normal to simply wrap the contents of the file in a closure, and then either simply load all the files through the script tag, or simply combine these files into one. Outside, one single variable was highlighted, containing the entire public api of such a module, it was placed either in a global object or in another such variable.
The module and namespace constructs allow you to simplify the creation of such variables, saving the developer from writing the same type of code. In this regard, they essentially do the same thing.
This is currently deprecated and the default eslint typescript plugin disallows these constructs.
The second use is for declaration files.
namespace allows you to declare an object, but somewhat special in terms of typing, it can contain any language entities and export some of them, including types, which is not available for a normal object type declaration.

declare namespace XXX {
  // по сути просто поле XXX.a
  let a: number;
  // то же поле XXX.b но уже const
  // современный ts позволяет делать поля readonly, но раньше так было нельзя
  const b: number;
  // функция, по сути метод XXX.c()
  function c(): void;
  // а вот вложенный тип через тип объекта не объявить, а в namespace можно
  type T = number | string;
}

module allow you to declare virtual modules that typescript doesn't know about, for example because they are generated by bundlers like webpack. A vivid example here is css modules or images that can be imported thanks to webpack, but typescript does not know anything about their types, so you need to declare them in global declarations:

declare module '*.png' {
  const url: string;
  export default url;
}
declare module '*.css' {
  const classNames: Record<string, string>;
  export default classNames;
}

Answer 2

After all, js has modularity and we import everything we need explicitly, when importing, we give a unique name to everything that was imported.

And then you connect the AwesomeModule to which someone also wrote MyCoolClass with a bunch of IMyBestFriendDependancy. You grab your head, because. the package does the right thing, but using it means rewriting 95% of the code so that the names do not overlap. In your code or in a package... a pain in the ass.
This is where namespace comes to the rescue. Allow anything with the same names to exist.
A module is a super class that contains some common classes used only inside this module, exports only what you specify + some other little things in the angular architecture (registration of interceptors, factories, etc.).
Like the first, the second can be used to write a modular architecture. For example, plug-ins that will dynamically add something new to an existing application, using your own resources or adding your own.