Angular、TypeScript、Ionic2で同じ名前のクラスをインポートする方法

Angular、TypeScript、Ionic2で同じ名前の2つのエクスポートされたクラスをインポートする方法

別名を使用する

最も簡単な方法は、それぞれのクラスに別名を付けることです。

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
import { MyClass as FirstClass } from './ファイル1';
import { MyClass as SecondClass } from './別のファイル';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

名前空間を使用すると、異なるモジュールで同じ名前のクラスを使用することができます。

// ファイル1.ts
export namespace FirstNamespace {
  export class MyClass {}
}

// ファイル2.ts
import { FirstNamespace } from './ファイル1';

const firstClass = new FirstNamespace.MyClass();

モジュールエイリアスを使用すると、モジュール名の省略形を定義することができます。

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
import { MyClass as FirstClass } from 'my-first-module';
import { MyClass as SecondClass } from 'my-second-module';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "my-first-module": ["./ファイル1.ts"],
      "my-second-module": ["./別のファイル.ts"]
    }
  }
}

アンビエント宣言を使用すると、外部モジュールの型情報を TypeScript に提供することができます。

// ファイル1.ts
declare module 'my-first-module' {
  export class MyClass {}
}

// ファイル2.ts
import { MyClass as FirstClass } from 'my-first-module';
import { MyClass as SecondClass } from 'my-second-module';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

// my-first-module.d.ts
declare class MyClass {}

// my-second-module.d.ts
declare class MyClass {}

どの方法を使用するかは、状況によって異なります。最も簡単な方法は別名を使用することですが、名前空間やモジュールエイリアスの方がコードがより読みやすくなる場合があります。アンビエント宣言は、外部モジュールの型情報を TypeScript に提供する必要がある場合にのみ使用してください。

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
import { MyClass as FirstClass } from './ファイル1';
import { MyClass as SecondClass } from './別のファイル';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

名前空間を使用する

// ファイル1.ts
export namespace FirstNamespace {
  export class MyClass {}
}

// ファイル2.ts
import { FirstNamespace } from './ファイル1';

const firstClass = new FirstNamespace.MyClass();

モジュールエイリアスを使用する

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
import { MyClass as FirstClass } from 'my-first-module';
import { MyClass as SecondClass } from 'my-second-module';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "my-first-module": ["./ファイル1.ts"],
      "my-second-module": ["./別のファイル.ts"]
    }
  }
}

アンビエント宣言を使用する

// ファイル1.ts
declare module 'my-first-module' {
  export class MyClass {}
}

// ファイル2.ts
import { MyClass as FirstClass } from 'my-first-module';
import { MyClass as SecondClass } from 'my-second-module';

const firstClass = new FirstClass();
const secondClass = new SecondClass();

// my-first-module.d.ts
declare class MyClass {}

// my-second-module.d.ts
declare class MyClass {}

クラスをデフォルトエクスポートすると、名前を指定せずにインポートすることができます。

// ファイル1.ts
export default class MyClass {}

// ファイル2.ts
import MyClass from './ファイル1';

const myClass = new MyClass();

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
import { MyClass as MyFirstClass } from './ファイル1';
import { MyClass as MySecondClass } from './別のファイル';

const myFirstClass = new MyFirstClass();
const mySecondClass = new MySecondClass();

require() 関数を使用すると、CommonJS モジュールを動的にインポートすることができます。

// ファイル1.ts
export class MyClass {}

// ファイル2.ts
const MyFirstClass = require('./ファイル1').MyClass;
const MySecondClass = require('./別のファイル').MyClass;

const myFirstClass = new MyFirstClass();
const mySecondClass = new MySecondClass();

これらの方法は、上記で説明した方法よりも特殊なケースで使用されます。