今日はTypeScriptの勉強兼ねてTypeScriptのコーディングをしてたら以下の様なエラーが発生しました。

‘UiGraph’ only refers to a type, but is being used as a value here. 
any

何ででしょう。。。今日はこのエラーの原因と解決策を探ってみました。

参考にしたページ

発生タイミング

https://github.com/teamoo24/Pixi_towerのUiGraphを編集中

エラー発生したソース

import UiNodeFactory from 'example/factory/UiNodeFactory';
import TextFactory from 'example/factory/TextFactory';
import SpriteFactory from 'example/factory/SpriteFactory';

/**
 * UI を静的に定義しランタイムでロードするためのモジュール
 * 指定されたノードのファクトリを生成して保持する
 */
export default interface UiGraph {
  	
  	/**
	* ファクトリのキャッシュ
   	*/
   	private static cachedFactory: {[key: string]: UiNodeFactory;} = {};
   	
   	/**
   	* ファクトリを取得
   	* なければキャッシュを作る
   	*/
   	static getFactory(type: string): UiNodeFactory | null {
   		if (!UiGraph.cachedFactory[type]) {
   			let Factory;

   			switch (type) {
   				case "text": Factory = TextFactory;
   					break;
   				case "sprite": Factory = SpriteFactory;
   					// code...
   					break;
   			}

            if (!Factory) return null;

            UiGraph.cachedFactory[type] = new Factory();
   		}

   		return UiGraph.cachedFactory[type];
   	}
}

エラー全文

‘UiGraph’ only refers to a type, but is being used as a value here. 
any

エラー原因

調べた結果classinterfaceにしたのが問題でした。

解決方法

それで既存のソースである

export default interface UiGraph 

export default class UiGraph

のように変えたら

このようにエラーまみれのコードは

上記のように治りました。

結論

classのところとinterfaceのところは区分しましょう!

プログラミングメイン