2016-11-17 17 views
1

存在しない設定と有効化「noImplicitAny」と(反応しない)保存:活字体2 TSXは維持し、noimplicitanyエラーTS2602は:グローバル型「JSX.Elementは、」私は活字体2とTSXを使用してい

"noImplicitAny": true, 
"jsx": "preserve" 

問題がある、私はシンプルなTSXファイルをビルドしようとすると、このエラーを取得しておいてください。

error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist. 

ここに私のTSXファイルの例です:

'use strict'; 

import m from './m'; 

export default { 
    view() { 
    return (
     <h1>Hello Mithril!</h1> 
    ); 
    } 
}; 

私はTSXが非リアクションスタック(Mithril)で動作するようにしようとしています。前もって感謝します!元の質問へ

答えて

1

回答:(TS2602エラーを解決する方法)

これはexplained hereとして、非常に簡単です:

エラーが言うように:「なぜならグローバル型「JSX。

declare namespace JSX { 
    interface Element { } 
    interface IntrinsicElements { div: any; } 
} 
0:要素は」

は、あなたがそれらのタイプを定義することができます」は存在しません。私はあなたは、あなたがIntrinsicElements内のすべてのサブ要素の定義をする必要があります(より完全なタイピングのためのソースとしてthis fileを使用することができますDefinitelyTyped

から反応-jsx.d.tsファイルを取得をお勧めします

すなわちなどdivpa、)

TSXとミスリル遠い行き方:

あなたがしたらタイピングの問題を解決した場合、あなたはそれほどたくさんあるとは思わないでしょう。 "jsx": "preserve"設定を使用すると、HTMLコードは、翻訳されずに、生成されたjsファイルに直接書き込まれます。もちろんこれはWebブラウザでは読み込めません(HTMLファイルではなくjavascriptファイルなので)。

私はそれを動作させるには、2つの方法があると思います:頭に浮かぶ

まずソリューションは"jsx":"react"を使用して、このように、ミスリルへの呼び出しを転送する小さなラッパーを書くことです:

class React { 
    public static createElement(selector: string, attributes: object, ...children: Mithril.Child[]): Mithril.Child { 
    return m(selector, attributes, children); 
    } 
} 

これは、私が現在使っている解決策です。これは、追加のツールが含まれていないためです。

他のソリューションは、"jsx":"preserve"を維持し、有効なjsファイルに(tsxファイルからtypescriptですによって生成された)jsxファイルを変換するためにバベル、as described in mithril documentationを、使用することです。

最終的には動作させることに成功しましたが、JSXタイプがミスリルタイプを拡張するためにtypescript/npmモジュールシステムを導入しているので、プロセスがかなり乱雑であることがわかりました(ミスリル互換性のあるタイプ)など私はミスリルタイピングを修正しなければならなかった(そして、npm @types/mithrilを落とす)、私のいくつかのモジュールを追加しなければならなかった。

誰かがこの問題をエレガントかつ簡単に解決したかどうかを知りたいと思っています。

0

評判が足りないため、私は上記の答えにコメントすることはできませんので、これを自分の答えに含めます。

まず、this gistをプロジェクトの先頭に追加し、mithril-jsx.d.tsのような名前を付けて、typescriptがタイプ定義として認識してコンパイルしないようにすることができます。リンク先はJSX.elementm.Vnode<any, any>と宣言し、JSX.IntrinsicElementsのすべてのHTML要素をanyとリストします。大したことではなく時間を節約します。

第二に、その理由は私もこれを掲示しています:あなたはを飲み込む必要がない行うか、他のツールはミスリル-使用する.jsものを.tsxファイルをコンパイルします。 http://www.typescriptlang.org/docs/handbook/compiler-options.html

+0

はちょっと素敵な先端が、私は「jsxFactory」オプションについては知りませんでした:あなたがしなければならないのは、ここでは、コンパイラオプションについてのあなたのtsconfig.json

{ "compilerOptions": { //...your other stuff here "jsx": "react", "jsxFactory": "m" } } 

詳細にこれらを指定しています。私は '' jsx ''を使っていました: ''反応する ''を実行し、実行時に代わりに 'm'を呼び出すためのラッパーを作りました。しかし、実際のミスリルと互換性のある構文を出力しますか?なぜなら、ミスリルは配列である単一のパラメータを取るのに対して、反応は子供のためのパラメータのリストを取ると思うからです。 – youen