如何在 TypeScript 中使用带有导入的命名空间 [英] How to use namespaces with import in TypeScript

问题描述

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

I have two classes in two separate files and one extends from another. The base class contains some import statements using node modules. It is unclear to me why the derived class (which is in a separate file) does not recognize the base class!!!???

有人可以澄清一下吗?

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

推荐答案

带命名空间的解决方案(不推荐)

要解决您的问题，您可以导出命名空间:

A solution with namespaces (not recommended)

To resolve your issue, you can export your namespace:

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

然后，你应该可以导入它了:

Then, you should be able to import it:

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

但是，如果目的是组织代码，那么同时使用 namespaces 和 (ES6) 模块 是一种不好的做法.使用 Node.js，你的文件是模块，那么你应该避免命名空间.

However, if the purpose is to organize the code, it is a bad practice to use namespaces and (ES6) modules at the same time. With Node.js, your files are modules, then you should avoid namespaces.

TypeScript 非常支持 ES6 模块的语法:

TypeScript supports the syntax of ES6 modules very well:

// 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 模块通过重命名每个导入资源的能力来防止命名冲突.

It is the recommended way. ES6 modules prevent naming conflicts with the ability to rename each imported resource.

它将在 Node.js 上工作(使用编译器选项中的 commonjs 模块语法).

It will work on Node.js (using the commonjs module syntax in compiler options).

关于 ES6 模块语法的良好介绍，阅读这篇文章.

For a good introduction to the ES6 modules syntax, read this article.

注意:语法 ///<reference 被替换为 文件 tsconfig.json.Node.js 的一个例子:

Notice: The syntax /// <reference is replaced by the file tsconfig.json. An example for Node.js:

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

这篇关于如何在 TypeScript 中使用带有导入的命名空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！