TypeScript で別ファイルにクラスを定義して、importする

TypeScript では厳密に型定義ができるので、独自に作成したクラスやメソッドでも入力補完ができて重宝しています。また、別ファイルにクラスを定義して別モジュールからインポートすることで、開発効率の向上も期待ができます。

今回は、別ファイルにクラスを定義して、別モジュールから import する方法を紹介します。

1. クラス定義のソース全体像

• stdWriteというクラスを定義しています。
• stdwriteクラスには、stdOutWrite と stdErrWriteという２つの関数を持ちます。これらの関数は、msgという文字列型の変数を引数にとり、number型の値を返します。
• stdwriteクラスには、headerというメンバを持ちます。コンストラクタで初期化をしています。

    // classdef.ts
    export interface _IClass {
        header: string;
        stdOutWrite(msg: string): number;
        stdErrWrite(msg: string): number;
    }
    export default class stdWrite implements _IClass {
        header: string
        constructor(header:string) {
            this.header = header
        }
        stdOutWrite(msg: string) {
            console.log(this.header + msg);
            return 0
        }
        stdErrWrite(msg: string) {
            console.error(this.header + msg)
            return 1
        }
    }

2. interface で メンバを定義

以下のように、_IClassというインタフェースを定義しています。

    export interface _IClass {
        header: string;
        stdOutWrite(msg: string): number;
        stdErrWrite(msg: string): number;
    }

ここでは、headerという文字列型の変数と、stdOutWrite、stdErrWriteという関数がある、ということを定義しています。

3. 定義したインタフェースに則したクラスを定義

    export default class stdWrite implements _IClass {
        ... 省略 ...
    }

imprelemts インタフェース名 で、このインタフェースに則した内容でクラスを定義します。

4. コンストラクタでメンバを初期化

        constructor(header:string) {
            this.header = header
        }

コンストラクタは、クラスを生成したときに実行される初期化処理のようなものです。このコンストラクタでは、headerという引数を取ります。この引数の値を、クラスのメンバであるheaderに格納しています。

5. 関数定義

        stdOutWrite(msg: string) {
            console.log(this.header + msg);
            return 0
        }
        stdErrWrite(msg: string) {
            console.error(this.header + msg)
            return 1
        }

インタフェース内で定義したstdOutWriteとstdErrWriteの関数を定義しています。文字列型のmsgを引数にとり、クラスのメンバのheaderと合わせ、標準出力と標準エラー出力に出力する処理になります。

6. 呼び出し側ソースの全体像

classdef.tsファイルをインポートし、オブジェクトを生成して、２つの関数を実行しています。

    import stdWrite from "./classdef"
    const IstdWrite = new stdWrite("Header String")
    const ret1:number = IstdWrite.stdOutWrite("Std Out")
    console.log(ret1)
    const ret2:number = IstdWrite.stdErrWrite("Std Err")
    console.log(ret2)

7. オブジェクト生成

    const IstdWrite = new stdWrite("Header String")

ここで、stdWriteクラスを実体化しています。このときの引数 Header String がコンストラクタの引数に渡されます。よって、この文字列が、stdWriteクラスのメンバのheaderに入るわけです。クラスを実体化したオブジェクトはIstdWriteとしています。

8. 関数の実行と値の取得

    const ret1:number = IstdWrite.stdOutWrite("Std Out")
    console.log(ret1)
    const ret2:number = IstdWrite.stdErrWrite("Std Err")
    console.log(ret2)

オブジェクトIstdWriteを使用して関数を実行しています。

実践TypeScript【電子書籍】[ 吉井健文 ]
価格：3726円 (2019/7/23時点)

[

楽天で購入

](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F5456816fd8833397a6aa8b80647873ad%2F%3Fscid%3Daf_pc_bbtn&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F18341447%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ==)