スポンサーリンク

【TypeScript】TypeScriptで別ファイルからclassを呼び出す方法。

TypeScript
スポンサーリンク
スポンサーリンク

TypeScriptで別ファイルからclassを呼び出す方法。

今回の記事ではTypeScriptを用いて別ファイルのclassを呼び出す方法を紹介します。

TypeScriptのclassに関しての記事も記載していますので興味のある方はご参照ください。

「import 〜 from 〜」、「interface」を使う方法

コチラがclassの引き継ぎの方法ではメインの方法になってくると思われます。

まず引き継ぎ先のclassの存在するファイルです。

export interface test_interface {
  test1: string;
  test_function(): void;
}
export default class test_class implements test_interface {
  test1: string ="testok"
  test_function() {
      console.log(this.test1);
  }
}

では説明していきましょう。
まず下記の記述にて「interface」を定義しています。「interface」の使い方を詳しく知りたい方はコチラの記事をご参照ください。
まあ実はこの「interface」はなくても大丈夫なのですが笑。使わない場合は「class」の後ろの「implement interface名」を消してください。
「interface」で記載している変数の「test1」はString型、関数「test_function()」はreturnさせるものはないのでvoid型に設定します。

export interface test_interface {
  test1: string;
  test_function(): void;
}

次に下記でclassを記述しています。

export default class test_class implements test_interface {
  test1: string ="testok"
  test_function() {
      console.log(this.test1);
  }
}

「test1」という変数に「testok」というString型の文字を入れています。
関数「test_function()」のconsole.logのカッコ内には「this.test1」を記載。「this」はなくてもいいのですが、このclass内で定義している変数を用いる場合は使用しておいた方が見やすくなります。TypeScriptですとDocumentの意味合いもあるので特に書いておいた方がいいと思います。

次に呼び出す先のファイルを作成していきましょう。

import test_class from "./test_class_file"

const test2 = new test_class()
test2.test_function()

コチラの説明としては、test2でインスタンスを作成しclassの関数を呼び出しています。
そしてその下のコードで関数を使用しているだけです。

「require」を使う方法

export class test_class{
  test(){
    console.log('test');
  }
}

コチラに簡単なclassとtest()関数を記載。
このクラスを呼び出して別のファイルから使えるようにします。

上記コードの解説として「export class名」でクラスの定義を行い、中身の関数を記載する。
呼び出しがわのコードはかきにする。

import test1 = require('./test_class_file');
    var test2 = new test1.Mymodule();
    test2.test();

これで呼び出せるはずです。

今回は「require」を使いましたが、他の呼び出し方法もあります。では他のやり方も記載していきましょう。

どちらを使うのがいいのか正直わかりませんがおそらく上の「interface」を用いる方が一般的なのではないかと思います。
もっと勉強します。。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました