web-dev-qa-db-ja.com

TypeScriptのインポートで名前空間を使用する方法

2つの別々のファイルに2つのクラスがあり、一方はもう一方から拡張されています。基本クラスには、ノードモジュールを使用するいくつかの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'
typescriptnamespaceses6-modules
25
gevik

namespacesを使用したソリューション（非推奨）

問題を解決するには、名前空間をエクスポートできます。

// 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 {
    }
}

ただし、コードを整理することが目的の場合、namespacesおよび（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"
  ]
}
21
Paleo