AngularJSとTypescriptとES6で倒したエラー集まとめ(2015/10/10更新

AngularJSとTypescriptとES6倒したエラー集まとめ（Error出たら更新します）(2015/10/10更新)

AngularJSをTypescirptとES6で記述しているとよく怒られます。
わたしは怒られてもへこたれないのでたまに同じことを怒られます。
なので怒られたらメモろうと思って記述しました。
AngularJSとTypescirptとES6のそれが書いてあります。
誰かの助けになれば幸いです。
※自分のエラー解決方法が間違っていたりずれていたらおせーてね

##　使い方

最初にエラーのインデックスとしてそれらを列挙します。
本文もこの順番で登場します
※typescriptでError対象のクラス,プロパティ,インターフェイスは[ClassName][propName][InterfaceName] として記述します(一部)
※こちらは日々更新されていきます。ご了承ください。
※同じエラーが書いてあるかもしれませんが頭の中でmergeしてください
※Atomのlint系プラグインやブラウザのconsoleで怒られた記述です
※くどい箇所ありますし、「Errorエラー」などはtypoじゃありません。SEOを意図してです。

Angular Error Index

• Error: [$injector:modulerr]
• Error: [$injector:unpr] Unknown provider
• Error: [$compile:nonassign] Expression 'undefined' used with directive 'serchbarInput' is non-assignable!
• Uncaught ReferenceError: moritaController is not defined
• Uncaught Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
• Error: [$compile:multidir] Multiple directives
• Error: [ng:areq] Argument ‘[controllerName]' is not a function, got undefined
• Error: [$injector:unpr] Unknown provider: nameProvider <- [prop] <- [controlerName]

TypeScript Error Index

• Value of type 'typeof [ClassName]' is not callable.Did you mean to include 'new'?
• [ClassName] incorrectly implements interface
  '[InterfaceName]'. Property '[propName]' is missing in type [ClassName]
• can not find [propName]
• Supplied parameter do not match any of signature
• protocol Error: Invalid type of argument 'identifier' for method 'Page.removeScriptToEvaluateOnLoad' call. It must be 'string' but it is 'number'.
• property ** is private and only accessible within class~~
• Class ** incorrectly imprements interface 'fafa' property name is ** missing
• constructor impremention is missing. A prametar property is only allowde in a constructor
• Trailing is comma not allow
• Function implementation is missing or not immediately following the declaration.
• Property 'MyController' does not exist on type 'typeof' moritaController;
• declaration or statement expected.
• Cannot invoke an expression whose type lacks a call signature.
• Property 'setValue' does not exist on type 'string'.
• Property ‘[propertyName]’ does not exist on type ‘ClassName'
• 'super' can only be referenced in a derived class;

ES6

・'const' declarations must be initialized

---

AngularのErrorエラー

※「AngularJS v1.3.13」、chrome(44.0.2403.130 (64-bit))

Error: [$injector:unpr] Unknown provider:

• serviceの注入の仕方、
• 定義されていない
• クラス記述していたらコンストラクタに渡す引数みてみて
• classがコンパイルされていない。試しに

controller('fafafa',function(){
     console.log('eee');
})

としたら動いた。
serviceとして定義していない物をconstructor内にインスタンス変数として記述していることが原因。
メンバ変数として定義するようにしましょう
メンバ変数なのにconstructor内にserviceに定義してある物として登録されていませんか？

Error: [$compile:nonassign] Expression 'undefined' used with directive 'serchbarInput' is non-assignable!

directive内で独自scopeとして{}した変数と、returnオブジェクト内のscopeの変数が被っている

Uncaught ReferenceError: moritaController is not defined

それが(moritaController)記述されているJSファイル(箇所)が参照されていない

Uncaught Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

訳：不明なエラー：[$インジェクタ：nomod]モジュール「て、myApp」は使用できません！あなたは、どちらかのモジュール名のスペルを間違えたり、それをロードするのを忘れました。モジュールを登録する場合は、2番目の引数としての依存関係を指定してください。

module kenjimorita {
     import controllerInternal = moritaController;
     controllerInternal.initRouting;//×実行されてなかった
     controllerInternal.initRouting();//○
     controllerInternal.MyController;
     controllerInternal.Child;
     controllerInternal.Mago;
}

Error: [$compile:multidir] Multiple directives

directiveが2回呼ばれているからscopeが変な感じになっているよ

Error: [ng:areq] Argument ‘[controllerName]' is not a function, got undefined

controllerNameが関数として呼ばれていないよ。何かmoduleの構文みたいにDIしてないかい？
main.controller('name'[name, Morita]);
↓
main.controller('Morita', Morita);

Error: [$injector:unpr] Unknown provider: nameProvider <- [prop] <- [controlerName]

constructorはserviceをほしがっているのにDIされていない
↓
[prop]の箇所にserviceを渡す

Typescript側のErrorエラー

環境

• AtomエディタのTypescriptのプラグインやPlaygroundが吐いたメッセージです
• tsconfig.json　→version": "1.5.0-alpha

Value of type 'typeof [ClassName]' is not callable.Did you mean to include 'new'?

実際のエラーコード
typeof のところ [typeof] MoritaAに型注釈してね？もしくはnewするってこと？
解決したコード

[ClassName] incorrectly implements interface'[InterfaceName]'. Property '[propName]' is missing in type [ClassName]

訳 そのClassにそのプロパティはない。

module A{
	export interface ImoritaA{
		name:string;
	}
	export class Aclass implements ImoritaA{
		constructor(){
			this.name = "fafa"
		}
	}
}

ImoritaAが今回の対象Errorですが、Interfaceはただの型注釈をしているだけなので実体としてのプロパティを設定する。
これで解決(引数を取らない場合)

can not find [引数]

this.の付け忘れ、参照してるプロパティへのアクセスが通っていない

Supplied parameter do not match any of signature

これ結構出る。。
シグネチャがマッチしないことが原因。
シグネチャとは、要求される「引数の型」、「引数の数」、「返り値の型」です。
そこらへん確認するといいかもです。

エラーの読み方

Type of property 'hogehoge' of types A and B are incompatible 

Aが渡した値の型、Bが要求されている型、
これがマッチしないと言われている。

//供給されたパラメーターはどのシグネチャともマッチしない
//渡す引数と受ける引数の数が合わない
//[引き数名?:型]としてif文で初期化、もしくはパラメーターに初期化を代入

自分はこういうコードででました
エラーコード

エラーコードの解決コード

protocol Error: Invalid type of argument 'identifier' for method 'Page.removeScriptToEvaluateOnLoad' call. It must be 'string' but it is 'number'.

//コンストラクタにpublic name:stringとして実行コンテキストに何も書かない場合にでた
//public削除、実行コンテキストの方にthis.name = nameとするとなくなった

property ** is private and only accessible within class~~

//privateのプロパティに外のスコープからアクセスしようとしている
//classのメンバ変数のアクセス修飾子を確認して

Class ** incorrectly imprements interface 'fafa' property name is ** missing

//interfaceのプロパティがclassにありませんよ

constructor impremention is missing. A prametar property is only allowde in a constructor

//引数にinterfaceのとっっているけどconstructor内で使ってね
//constructorの閉じたタグを閉じてね

Trailing is comma not allow

//コンマはそこにつけちゃだめだよ

Function implementation is missing or not immediately following the declaration.

訳:(関数の実装が存在しないか、すぐに宣言を次のされていません。)
定義はされているかもだけど関数の実装がされていない、

Property 'MyController' does not exist on type 'typeof' moritaController;

importした内部モジュール内のclass(object)がexport記述されていない

declaration or statement expected.

export fafa = angular.module('',[])
↓
var fafa = angular.module()

Cannot invoke an expression whose type lacks a call signature.

あなたはプロパティ呼び出しでセットしてあるメンバをメソッド呼び出ししているはず。。

Property 'setValue' does not exist on type 'string'.

setValueの型注釈がstringで設定されていますが、あなたの渡そうとしている引数で初期化するとstringで返りません。

Property ‘[propertyName]’ does not exist on type ‘ClassName'

[ClassName]のメンバとして[propertyName]のプロパティは存在しません。

上と一緒だけど、まあいいや
・コンストラクタの引数にしていたらpublicにして見えるようにしてください、もしくは
・そのプロパティorメソッドはインスタンス呼び出しで使用してください(Class内でそのプロパティはthisに向いています。)

aa.get()//Error
↓
new aa().get()
 or 
var bb = new aa();bb.get()

'super' can only be referenced in a derived class;

親クラスのコンストラクタにsuper()記述してませんか
子クラスにsuper()は使ってね

ES6のErrorエラー

環境

• AtomエディタのTypescriptのプラグイン

'const' declarations must be initialized

constは何か初期値代入しないとだよ

やること

const fafafa = 'このように何か代入してね'

File'/Users/[your]/Desktop/Git/tabibito/src/scripts/service/[importObj[file]]' is not a module.

import dddd from './fafa';

importするファイルの参照がまちがっているよ

Cannot find name '[exportObj]'

export default test;

としてexportしたい箇所で現れたエラーの場合。

やること
class名をexportしてね(TODO)

最後に

※あくまでわたしの実行環境でのエラーだったので、「そこら辺をもう一度みてみる」ぐらいの参考でお願いします。