TypeScript入門モジュールに分けよう

ここまでで、抽象クラスやインタフェーフェイスを紹介しました。これらは、1ファイルの中でその定義を使うというのは、あまり現実的ではなく、独立したファイルとして定義しておき、それらを参照しながら、各プログラムで実装していくというのが現実的です。

ここでは、定義した抽象クラスを「モジュール」にして、外部ファイル化しましょう。まずは、ファイルを作成します。

export abstract class Item {
  price: number = 0;
  name: string = "";
  abstract getTaxPrice(): number;
}

この時、先頭に「export」という記述が増えています。これによって、この「Item」という抽象クラスは外部からも参照が可能になりました。

それではこのファイルを使って、実際の処理を記述していきましょう。

import { Item } from "./Item.js";

class Food extends Item {
  getTaxPrice(): number {
    return this.price * 1.08; // 8%
  }
}
const peach = new Food();
peach.price = 150;
console.log(peach.getTaxPrice());

ファイルの先頭で「import」という記述を使って、先の「Item」抽象クラスをインポートしています。importは次のような書式で利用します。

import { クラス名など, クラス名など... } from "モジュールファイル";

こうして、これまでと同様に「Item」抽象クラスが利用できるようになります。

class Food extends Item {

export

モジュールファイルにした場合も、先頭に「export」と記述しない場合、外部からは参照することができません。

abstract class Item {

このしくみを利用すると、モジュールファイル内で「外部参照できるもの」と「できないもの」を厳密に分けて管理することができます。

例えば、次のように「tax」という定数は宣言はしているものの、外部からは参照できないようにします。

const tax: number = 1.1;

しかし、ここに「export」を追加すれば、外部から参照できるようになります。

import { Item, tax } from "./Item.js";

console.log(tax);

こうして、制御できます。

export default

モジュールファイルの作りがシンプルで、exportするものが1つしかない場合は「export default」という記述を利用すると便利です。

export default abstract class Item {

すると、「import」の際にはその「default」が付加されたものが参照できます。これに、好きな名前をつけて参照できます。

import Item from "./Item.js";

ここで、参照する時に中括弧がなくなっていることに注目しましょう。次のように参照します。

import 名前 from "モジュールファイル";

この時、名前は自由につけることができます。例えば次のように変更できます。

import ItemParent from "./Item.js"

なお、当然ながら「export default」は1つにしか付加できません。

export default tax: number = 1.1;
export default abstract class Item {
...

次のようにいずれかのみ、defaultにしましょう。

export const tax: number = 1.1;
export default abstract class Item {

なお、「export default」宣言されていないものを参照する場合は、これまでと同様で中括弧で囲みます。

import Item, { tax } from "./Item.js";

こうして、モジュールを定義することができます。