今日は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
エラー原因
調べた結果classをinterfaceにしたのが問題でした。
解決方法
それで既存のソースである
export default interface UiGraph
を
export default class UiGraph
のように変えたら

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

上記のように治りました。
結論
classのところとinterfaceのところは区分しましょう!