あなたのプロジェクトにTsを使わせましょう.

ここで読むことをお勧めします
9012年も半ば過ぎたのにtsは使えないからアウトだ
why ?

三大フレームワークangular 2以降のバージョンは完全にtsで開発され、

vueのtsに対するサポートもますます良くなり、

ReactにもTSXコンポーネントがありますが、フレームワークのcliがts環境を構築してくれたので、フレームワークの内容にかかわらないことをためらっています.の本文はただあなたに1つのdemoの中でTs環境を構築する方法を教えて、よし、第1歩を始めましょう、グローバルインストールtypescript

をインストールします

npm install typescript -g

インストールが完了したら、あなたのプロジェクトでtscコマンドを使用できます.

tsc [ts   ] 

上のコマンドを使用すると、あるtsファイルをjsファイルにコンパイルできます.

tsc  

これはすべてのtsファイルをコンパイルします
ステップ2、プロファイル
おめでとうございます.最初の一歩を踏み出したら、あなたはもう半分成功しました.jsonタイプのプロファイルを新規作成します.ファイル名はtsconfigです.json.

{
  "compilerOptions": { //     
    "target": "es2016",  //              
    "module": "commonjs",  //               
    "lib": ["es2016"]  
  }
}

最も簡単な構成は、必要に応じて必要な構成を追加できます.::tip注意!!!プロファイルを追加する後、tscコマンドを使用してあるtsファイルをコンパイルする際に持参する必要はありません.tsファイル接尾辞、そうでない場合、プロファイルは無視されます::
重要な内容を挿入する
私たちのtsプロジェクトがlodash、mock、jqueryなどのサードパーティライブラリを使用している場合、これらのサードパーティライブラリはtsで書かれていません.jsで書かれています.tsのタイプチェックはありません.どうすればいいですか.方法があります.公式には@typesのタイプライブラリがあります.jsコードのタイプの説明がたくさん含まれています.例えば、jqueryを使いたい場合は、@types/jqueryをインストールすることができます.
tsとjsは分離する
開発中は必ずソースコードとコンパイル後のコードを分けて、以下の2つの構成オプションincludeを追加します:コンパイルが必要なファイルディレクトリoutDir:コンパイル後のファイルディレクトリ

{
  "compilerOptions": { //     
    "target": "es2016",  //              
    "module": "commonjs",  //               
    "lib": ["es2016","dom"], //     
    "outDir": "./dist"
  },
  "include": ["./src"]
}

第3歩開発プロセスの簡素化
tsでhello worldを書きたいだけなら、helloがあると仮定することができます.tsファイル、ファイル内容はconsole.log('hello world'); コマンド・ラインは、次の順に実行されます.

tsc

node ./dist/hello.js 

コマンドラインでは、hello worldの2番目のステップまで印刷できます.ファイルを変更するたびに2つのステップを実行します.

コンパイルファイルtsc

実行ファイルnode./dist/ファイル名サードパーティ製ライブラリを使用して、このプロセスts-nodeインストールnpm install ts-node-Dコマンドライン実行

を簡略化できます.

ts-node /src/hello.ts

メモリ内でtsを直接コンパイルしてコンパイルしたファイル(distディレクトリは生成されません)を実行するのは十分ではありません.コンパイルして実行するのに役立ちますが、コードの変化を検出することはできません.
nodemon
インストールnpm install nodemon-Dコマンドライン実行

nodemon --exec --watch src -e ts ts-node /src/hello.ts

--watch srcはsrcフォルダの下のファイルだけを監視することを示しています-e tsはtsファイルの変更だけを監視することを示しています.このようにhelloを勝手に変更します.tsの内容は自動的にコンパイルされ、実行されます.最後にこのコマンドをpackageに書きます.jsonのscriptで、完璧に終わる!
締めくくり
これであなたはtsに対してもうそんなによく知らないと信じて、次の編はみんなと一緒にReactとTsを結びつけて小さなdemoを開発して、あなたにプロジェクトの実戦を熟知するように手伝います.