Я не понял, как мы их классифицируем?

пространства имен используются для организации / инкапсуляции кода. Внешние модули используются для организации / инкапсуляции кода и поиска кода во время выполнения. На практике у вас есть два варианта во время выполнения: 1) объединить весь транспилированный код в один файл или 2) использовать внешние модули и иметь несколько файлов и требовать какого-либо другого механизма для получения этих файлов.

когда экспортировать класс или пространство имен или посылка?

чтобы сделать тип или значение видимым за пределами файла, в котором он находится, Вы должны экспортировать его, если он находится внутри пространства имен. Независимо от того, экспортируете ли вы его на верхнем уровне или в пространстве имен, будет решено, находится ли он теперь во внешнем модуле.

если мы экспортируем пакет / пространство имен, все классы внутри которого экспортируются или должны быть явно экспортированы

классы в пространстве имен всегда должны быть явно экспортированы для класса быть виден во время компиляции вне файла, в котором он определен.

как каждый из них может быть импортирован/требуется?

это зависит от того, используете ли вы внешние модули. Внешний модуль всегда нужно будет импортировать, чтобы "использовать" его. Импорт пространства имен, которое не находится во внешнем модуле, на самом деле просто предоставляет псевдоним для пространства имен-вам все равно нужно префикс type/whatever с псевдонимом (и именно поэтому вы обычно не хотите использование пространств имен с внешними модулями; это означает, что вы всегда должны использовать префикс при обращении к любым внешним модулем.) Пространства имен, которые не находятся во внешнем модуле, могут охватывать файлы, поэтому, если вы находитесь в том же пространстве имен, вы можете ссылаться на все, что экспортируется пространством имен, без необходимости какого-либо импорта.

чтобы действительно понять вышеизложенное, вам нужны некоторые фоновые знания. Главное, что нужно понять со ссылками / пространствами имен / внешними модулями, это то, что они конструкции делают во время компиляции и то, что они делают во время выполнения.

справочная директивы используются во время компиляции, чтобы найти информацию о типе. В вашем источнике есть определенный символ. Как компилятор TypeScript находит определение для этого символа? Справочная директива в значительной степени была включена в tsconfig.механизм json -- использование tsconfig.json, вы говорите компилятору, где находятся все ваши источники.

пространства имен могут содержать определения типов и/или реализация. Если пространство имен содержит только информацию о типе, то оно вообще не имеет проявления времени выполнения - вы можете проверить это, посмотрев на вывод JS и найдя пустой файл JS. Если пространство имен имеет код реализации, то код заключен в замыкание, которое назначается глобальной переменной с тем же именем, что и пространство имен. С вложенными пространствами имен, будет глобальная переменная для корневого пространства имен. Опять же, проверьте вывод в JS. Пространства имен исторически таковы, как JS на стороне клиента библиотеки попытались избежать проблемы с коллизиями имен. Идея состоит в том, чтобы обернуть всю библиотеку в одно закрытие, а затем выставить как можно меньше глобального следа-только одну глобальную переменную, ссылающуюся на закрытие. Ну, проблема все еще в том, что вы претендовали на имя в глобальном пространстве. Что, если вы хотите, скажем, две версии библиотеки? Пространство имен TypeScript по-прежнему имеет вопрос о том, как найти источник для пространства имен. То есть исходный код, который ссылается на A. B все еще имеет проблему с сообщением компилятору, как найти A. B -- либо с помощью ссылочных директив, либо с помощью tsconfig.формат JSON. Или поместив пространство имен во внешний модуль, а затем импортировав внешний модуль.

внешние модули, созданные на стороне сервера JS. Существует взаимно однозначное соответствие между внешним модулем и файлом в файловой системе. Структуру каталогов файловой системы можно использовать для организации внешних модулей во вложенную структуру. Импорт внешний модуль, как правило, всегда вводит зависимость времени выполнения от этого внешнего модуля (исключение-когда вы импортируете внешний модуль, но затем не используете его экспорт в позиции значения-то есть вы импортируете только внешний модуль, чтобы получить информацию о его типе). Внешний модуль неявно находится в замыкании, и это ключ: пользователь модуля может назначить замыкание любой локальной переменной, которую они хотят. TypeScript / ES6 добавляет дополнительный синтаксис вокруг сопоставления экспорта из внешних модулей к локальным именам, но это просто тонкость. На стороне сервера поиск внешнего модуля относительно прост: просто найдите файл, представляющий внешний модуль в локальной файловой системе. Если вы хотите использовать внешние модули на стороне клиента, в браузере, это становится более сложным, поскольку нет эквивалента файловой системе, которая имеет модуль, доступный для загрузки. Итак, теперь на стороне клиента вам нужен способ объединить все эти файлы в форму, которая может быть используется удаленно в браузере - вот где модули bundlers, такие как Webpack (Webpack делает намного больше, чем модули bundle, хотя) и Browserify вступают в игру. Пакетов, модуль разрешения времени выполнения внешних модулей в браузере.

сценарий реального мира: AngularJS. Притворитесь, что внешние модули не существуют, используйте одно пространство имен для ограничения загрязнения глобального пространства (в приведенном ниже примере одна переменная MyApp-это все, что есть в глобальном пространстве), только экспорт интерфейсы и использование AngularJS dependency-injection для обеспечения доступности реализаций для использования. Поместите все классы в корень каталога, добавьте tsconfig.json в корень, установите AngularJS typings в том же корневом каталоге, чтобы tsconfig.json тоже поднимает его, объединяет все выходные данные в один JS-файл. Это будет отлично работать для большинства проектов, если повторное использование кода не вызывает особых проблем.

MyService.ТС:

namespace MyApp {

    // without an export the interface is not visible outside of MyService.ts
    export interface MyService { 
        ....
    }

    // class is not exported; AngularJS DI will wire up the implementation
    class MyServiceImpl implements MyService {
    }

    angular.module("MyApp").service("myService", MyServiceImpl);
}

MyController.ТС:

namespace MyApp {

   class MyController {
       // No import of MyService is needed as we are spanning 
       // one namespace with multiple files.
       // MyService is only used at compile time for type checking. 
       // AngularJS DI is done on the name of the variable. 
       constructor(private myService: MyService) { 
       }
   }
   angular.module("MyApp").controller("myController", MyController);
}

использование IIFE, чтобы избежать загрязнять глобальную область видимости во время выполнения. В этом примере глобальные переменные вообще не создаются. (A tsconfig.предполагается, что json.)

Фу.ТС:

namespace Foo {
    // without an export IFoo is not visible. No JS is generated here
    // as we are only defining a type.
    export interface IFoo {
        x: string;
    }
}

interface ITopLevel {
    z: string;
}

(function(){
    // export required above to make IFoo visible as we are not in the Foo namespace
    class Foo1 implements Foo.IFoo {
        x: string = "abc";
    }
    // do something with Foo1 like register it with a DI system
})();

бар.ТС:

// alias import; no external module created
import IFoo = Foo.IFoo;

(function() {

    // Namespace Foo is always visible as it was defined at
    // top level (outside of any other namespace).
    class Bar1 implements Foo.IFoo {
        x: string;
    }

    // equivalent to above
    class Bar2 implements IFoo {
        x: string;
    }

    // IToplevel is visible here for the same reason namespace Foo is visible
    class MyToplevel implements ITopLevel {
        z: string;
    }

})();

используя IIFE, вы можете исключить введение MyApp в качестве глобальной переменной в первом примере.

MyService.ТС:

interface MyService { 
    ....
}

(function() {

    class MyServiceImpl implements MyService {
    }

    angular.module("MyApp").service("myService", MyServiceImpl);
})();

MyController.ТС:

(function() { 

   class MyController { 
       constructor(private myService: MyService) { 
       }
   }

   angular.module("MyApp").controller("myController", MyController);
})();