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

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

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

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

  • stdWriteというクラスを定義しています。
  • stdwriteクラスには、stdOutWritestdErrWriteという2つの関数を持ちます。これらの関数は、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という文字列型の変数と、stdOutWritestdErrWriteという関数がある、ということを定義しています。

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
        }

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

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

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

    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==)

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱