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

// ファイル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() 関数を使用する

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();