如何在TypeScript中使用导入的名称空间

Question

我在两个单独的文件中有两个类,一个从另一个扩展.基类包含一些import使用节点模块的语句.我不清楚为什么派生类(在一个单独的文件中)不能识别基类!!! ???

有人可以澄清一下吗？

// 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'

Answer 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"
  ]
}