Как использовать пространства имён с импортом в TypeScript

У меня есть два класса в двух отдельных файлах, а один - другой. Базовый класс содержит несколько операторов import с использованием модулей node. Мне непонятно, почему производный класс (который находится в отдельном файле) не распознает базовый класс!!!???

Может ли кто-нибудь прояснить это, пожалуйста?

// UtilBase.ts

/// <reference path="../typings/node.d.ts" />
/// <reference path="../typings/packages.d.ts" />

import * as path from "path"; // <---- THIS LINE BREAKS THE BUILD!!!!

namespace My.utils {

    export class UtilBase {

        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

И затем

// UtilOne.ts
/// <reference path="UtilBase.ts" />

namespace My.utils {

    export class UtilOne extends My.utils.UtilBase {

    }
}

После компиляции я получаю:

src/UtilOne.ts(6,47): error TS2339: Property 'UtilBase' does not 
exist on type 'typeof utils'

Ответы

Ответ 1

Решение с пространствами имен (не рекомендуется)

Чтобы устранить проблему, вы можете экспортировать пространство имен:

// UtilBase.ts
import * as path from "path";
export namespace My.utils {
    export class UtilBase {
        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Затем вы сможете импортировать его:

// UtilOne.ts
import {My} from './UtilBase';
namespace My.utils {
    export class UtilOne extends My.utils.UtilBase {
    }
}

Однако, если целью является организация кода, плохо использовать практику пространств имен и (ES6) одновременно. С Node.js ваши файлы являются модулями, тогда вам следует избегать пространств имен.

Использовать модули ES6 без пространств имен

TypeScript очень хорошо поддерживает синтаксис модулей ES6:

// UtilBase.ts
import * as path from "path";
export default class UtilBase {
    protected fixPath(value: string): string {
        return value.replace('/', path.sep);
    }
}

// UtilOne.ts
import UtilBase from './UtilBase';
export default class UtilOne extends UtilBase {
}

Это рекомендуемый способ. Модули ES6 предотвращают конфликты имен с возможностью переименования каждого импортированного ресурса.

Он будет работать с Node.js(используя синтаксис модуля commonjs в параметрах компилятора).

Для ознакомления с синтаксисом модулей ES6 прочитайте эту статью.

Используйте файл tsconfig.json вместо /// <reference

Примечание. Синтаксис /// <reference заменяется на файл tsconfig.json. Пример для Node.js:

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}