typescriptのpublic関数がUndefinedになってしまいます

Question

内容

electronのアプリを作成中なのですが、あるユーティリティクラスを作成して別のコンポーネントからそのクラス内のpublicな関数を実行しようとしています。
下記のコードを実行すると、

Cannot read property 'hogeHoge' of undefined

というエラーが発生します。

webで見つかるサンプルコードを参考にコーディングしているのですが、基本的な書き方をまだよく理解できていないのか、なぜエラーが発生するのか分かりません。
（コーディングにはVS Codeを使用しており、エディタ内では参照解決できているのですが。。。）
どなたかご教授いただけるとありがたいです。

コード抜粋

export class Hoge {
  constructor () {}

  // public関数
  hogeHoge (): string {
    let a: string;
    a = "test code";
    return a;
  }
}

import { Hoge } from './hoge' //hoge.tsファイルは同一階層に配置しています
export class Test {
  private _hoge = new Hoge();

  constructor () {}

  testFunc () {
    let a: string;
    a = this._hoge.hogeHoge(); //呼び出し箇所
    console.log(a);
  }
}

Comments

[HayatoKamono]

掲載コード自体はエラー出ずに動くのではないですか？
ちなみにエラー文を読む限り、undefinedなのは、this._hoge.hogeHogeではなく、this._hogeの方ですね。

[7713tim]

ありがとうございます。なるほど、"private _hoge = new Hoge();"これが上手く動いてないということですね。元のクラスの方を調べてみます。

Answer 1

HayatoKamonoのコメントを元にデバッグしたところ、呼び出し先の関数で使用している変数(オブジェクト)が初期化されていないことが原因でした。
おかげで、Javascriptのエラーメッセージをやっと理解できました。

Answer 2

import { Hoge } from './Hoge' //hoge.tsファイルは同一階層に配置しています

ファイル名が hoge.ts なのに対して ./Hoge という風に大文字にしてしまっていますが、モジュール名の大文字小文字が区別されるかどうかは実行環境によります。

TypeScriptでは大文字小文字を間違えた時にエラーを出すオプションもありますので、それを使用されるとよいかと思います。

参考: https://qiita.com/IganinTea/items/f88bea469bff56cfbda6#--forceconsistentcasinginfilenames

Comments

[7713tim]

申し訳ありません。
```./Hoge```は記述ミスでした。実際のコードの方では```./hoge```となっています。
大文字小文字を間違えた時のエラー良いですね。試してみます。