Typescript - Понимание экспорта / импорта

Question

Я изучаю Typescript. Я читал статьи о пространстве имен и import / export.

В своем собственном проекте я создал несколько классов. Поскольку это мой первый проект, я забыл поставить ключевое слово export на некоторые из них, но заметил, что они все еще доступны в других файлах без необходимости их импорта. Я также заметил, что класс с импортом должен быть экспорт / импорт, чтобы использовать его где-то еще.

Почему я могу это сделать? Это нормально делать это? Когда использование export обязательно, а когда нет?

Я думал, что всегда должен export / import мои классы и модули, но код работает без них.

class CoordinateModel {
    public x: number;
    public y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

А в другом файле я могу его использовать

import * as d3 from "d3";

module Mouse {
    export function getMousePosition(container:d3.ContainerElement): CoordinateModel {
        var m = d3.mouse(container);
        return new CoordinateModel(m[0], m[1]);
    }

    export function showMousePositionInElement(elementClassName: string, container: d3.ContainerElement) {
        var m = Mouse.getMousePosition(container);
        d3.select("." + elementClassName).html(m.x + ", " + m.y);
    }
}

export = Mouse;

Answer 1

Если в вашем файле нет операторов import или export верхнего уровня, он находится в глобальной области видимости, то есть все элементы верхнего уровня видны везде без необходимости import чего-либо.

Это, по сути, старый способ JavaScript, существовавший до появления модулей ES6.Старый синтаксис TypeScript module (теперь называемый namespace) был способом избежать конфликтов имен в глобальной области видимости.Новый способ написания модулей на JavaScript (и TypeScript) заключается в использовании синтаксиса import и export.

Так что да, в наши дни вы должны export class CoordinateModel, в этом случае другиефайлы должны import извлекать его из файла, а не полагаться на то, что он находится в глобальной области видимости.В большинстве случаев вам не нужен namespace (то, что вы написали как module Mouse, которое также можно записать как namespace Mouse с последним синтаксисом, предназначенное для устранения неоднозначности с модулями ES6).Подробнее о пространствах имен и модулях вы можете прочитать в документации .

Answer 2

Хорошо, файл в TypeScript является модулем ТОЛЬКО если вы что-то экспортируете из него.Как только вы это сделаете, будут доступны только вещи, экспортированные из этого файла, и вы должны импортировать их.

Это то, что вы делаете в другом файле (я назову это module.ts, поскольку я неимя не знаю), экспорт Mouse.Если вы добавите еще один ts файл в ваш проект и выполните

let a = getMousePosition(null);

, вы получите ошибку, потому что getMousePosition не определен.В этом случае вам нужно будет сделать в начале файла:

import { getMousePosition } from "./module";

Конечно, определение модуля внутри module.ts в вашем случае не так много значит, как вы его экспортируете.Вы могли бы легко определить пространство имен.Вы экспортируете содержимое Mouse, а не Mouse.

Если вы удалите строку export = Mouse, вам нужно будет сделать это в другом файле:

let a = Mouse.getMousePosition(...);

И вам не понадобится импорт.