flowのようにtypescriptをオプションで使うことはできますか？

Question

私は新しいreactxプロジェクトを開始していて、再びタイプスクリプトを使うことを考えていました。私が試した最後のバージョンは1.6でしたが、それ以来タイプスクリプトは本当に進化しました。

私は小さなPoCを作成しましたが、私はjavascriptで静的な型指定のアイデアが好きですが、実際にはタイプ定義が紛失したり壊れたりしていることに常に気をつけています。最新の例は、material-uiの壊れた型定義です。コンパイラと戦わなければならないような気がします。

私の考えは、es6をbabelで、typescriptをフローのように任意の方法で追加することでした。私はtypescript 2.3が@ ts-checkのコメントでこれを実現できることを読んでいます。

これはどのように連携しますか？私の.jsファイルの型定義を取り除くためにいくつかのbabelプラグインが必要ですか？.ts .tsx拡張子を使用する必要がありますか？

これは完全なナンセンスなのですが、私は「完全なタイスクリプト」モードにして、それに慣れなければなりませんか？

私はちょっと正直ではありません。

更新

バベルは、次のバージョン7.0でtypescriptですがサポートされます。 ベータ版はすでにテストされています。 私が理解する限り、今すぐあなたはトランスバーラーとしてバベルを使用し、バベルプリセットタイプスクリプトを追加することができます。 その後、ウォッチモードでタイスクリプトを使用するか、VSコードエラーレポートのみを使用することができます。 これは近い将来私のお気に入りのスタックになると思います。

Answer 1

material-ui @ nextをインストールした場合は、独自の入力があり、@ types/material-uiをインストールする必要はありません。もしあなたがそうするなら、彼らは多量のエラーを与えるのに矛盾します。しかし、現在ベータ版9はもちろん開発中であり、多くのタイピング問題が発生します。私自身や他の人は、プロジェクトごとにタイピングが堅牢であることを確認するために、各リリースですぐに問題を作り出しています。

現在、ベータ版を使用している場合は、入力に関する問題は発生していません。また、typescriptを使用している場合、あなたはバベルを必要としません。 Typescriptコンパイラはあなたが望む仕様にプロジェクトをビルドします。

Typescriptは、どのようにビルドされているかを理解すると簡単になります。そのハードルの後に残りはシンプルです。

私の場合は、ローカルにインストールされたTypescriptとともに.ts/.tsx拡張子を使用します。ここに私のTSconfigの例は

{ 
    "extends": "./config/base.json", 
    "compilerOptions": { 
     "experimentalDecorators": true, 
     "lib": [ 
      "es6", 
      "dom", 
      "es2015", 
      "es2017" 
     ], 
     "typeRoots": [ 
      "node_modules/@types", 
      "node_modules" 
     ], 
     "types": [ 
      "node", "jest", "lodash", "react", 
      "react-dom", "react-redux", "redux-logger", "material-ui", 
      "react-router-dom", "react-router-redux", "react-autosuggest", 
      "redux", "binary-type-tree", "redux-form", 
      "tedb", "react-tap-event-plugin", "redux-thunk", 
      "react-hot-loader", "history", "material-ui-icons" 
     ], 
     "outDir": "dist" 
    }, 
    "include": [ 
     "src", 
     "node_modules/**/*.d.ts", 
     "node_modules/@types/**/*.d.ts" 
    ], 
    "exclude": [ 
     "node_modules", 
     "dist", 
     "spec", 
     "webpack" 
    ] 
} 

であり、これはまだケースですが、リストに要件行う場合ベース

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "experimentalDecorators": true, 
    "allowSyntheticDefaultImports": true, 
    "target": "es2015", 
    "module": "es2015", 
    "moduleResolution": "node", 
    "strict": true, 
    "pretty": true, 
    "jsx": "react", 
    "sourceMap": true, 
    "importHelpers": true, 
    "removeComments": false, 
    "noImplicitThis": true, 
    "noImplicitAny": true, 
    "noEmitOnError": true, 
    "strictNullChecks": true 
    } 
} 

は私のタイプのいくつかは、私がわからないどの"types"に記載されていることが必要このようなあなたのすべてのタイプ。私はこれがいくつかの助けの元に来てほしい。 package.json "main"これはちょうど私の設定です"dist/index.js""build": "rm -rf ./dist/* && tsc"の ビルドと"types": "dist/index.d.ts"

を指します。しかし、私はそれがいくつかの問題を理解するのに役立つことを願っています。