TypeScript はどのように機能しますか? TypeScript環境構築チュートリアル

TypeScript はどのように機能しますか? TypeScript環境構築チュートリアル

TypeScipt は、Microsoft が開発したオープンソース言語です。これは JScipt のスーパーセットであり、開発した JScipt スキルを引き続き使用できるだけでなく、以前は利用できなかった特定の機能が追加されます。では、TypeScipt をインストールして実行するにはどうすればよいでしょうか?このチュートリアルでは、主に TypeScipt 環境を構築する手順を紹介します。

1. TypeScriptをインストールする

プロジェクトで使用可能な TypeScipt を取得するには、次の 2 つの一般的な方法を使用できます。

  • TypeSciptのVisual Studioプラグインをインストールすることで
  • NPM (node.js パッケージ マネージャー) 経由

現在、Visul Studio 209 は JScipt 開発に対して豊富なサポートを提供しています。JScipt を直接使用することも、TypeScipt プログラミング言語を使用することもできます。したがって、TypeScipt を入手するには、最新バージョンの Visul Studio をダウンロードしてインストールできます。

2. JScipt 開発者の場合は、コンピューターに npm がインストールされている可能性があります。 コマンドプロンプトウィンドウを開き、npm 実行と入力して確認します。 npm がインストールされている場合は、バージョンとコンパイラ コマンドのリストが表示され、npm を使用できるようになります。

npm がインストールされていない場合は、コマンドが認識されないというメッセージが表示されます。 まず Node.js をインストールする必要があります。

  • Node.js のダウンロード ページに移動します。
  • 利用可能な Node.js のバージョンを選択し、ダウンロードしてインストールします。
  • npmがインストールされていることを確認するには、コマンドプロンプトウィンドウを開いて、次のように入力します。 npm実行

TypeScipt は、npm レジストリで typescipt パッケージとして利用できます。 TypeScipt の最新バージョンをインストールします。

  • コマンドプロンプトウィンドウで、次のように入力します。 npm インストール -g タイプスクリプト
  • 入力tsc TypeScipt がインストールされていることを確認します。 正常にインストールされた場合、このコマンドはコンパイラ コマンドとオプションのリストを表示します。

2. Visual Studio CodeでTypeSciptプロジェクトを設定する

この手順では、Visual Studio Code でプロジェクト ワークスペースを作成し、ワークスペースを初期化します。

、Visual Studio Code を開きます。

2. 「ようこそ」ウィンドウで、「ワークスペース フォルダーの追加」を選択します。

3. 新しいプロジェクト フォルダーを作成し、「追加」を選択します。

4. 左側のペインで、「エクスプローラー」ボタンを選択します。

5. エクスプローラー ペインで、[新しいファイル] アイコンを選択します。

6. 「モジュール 0 演習」の下にファイル名「module0.ts」を入力し、Enter キーを押します。 TypeScipt ファイルが新しいコード エディターに表示されます。

3. tsconfig.jsonファイルを生成する

TypeScipt ソース コードをコンパイルする場合、TypeScipt コンパイラはデフォルトの動作を適用します。 ただし、TypeScipt プロジェクト フォルダーのルートに tsconfig.json ファイルを追加することで、TypeScipt コンパイラ オプションを変更できます。 このファイルは、コンパイラ オプションや含める必要のあるファイルなどの TypeScipt プロジェクト設定を定義します。 TypeSciptコンパイラを使用することができます初期化デフォルトのオプションで tsconfig.json ファイルを生成するオプション。

Visual Studio Code で、[ターミナル] > [新しいターミナル] を選択して、新しいターミナル ウィンドウを開きます。

2. コマンドプロンプトで次のように入力します。 tsc リニット。新しい tsconfig.json ファイルがエクスプローラー ペインに追加されていることに注意してください。 ファイルを表示するには、エクスプローラー ペインを更新する必要がある場合があります。

3. コード エディターで tsconfig.json ファイルを開きます。 多くのオプションがあり、そのほとんどはコメントアウトされていることがわかります。有効になっている各オプションの説明を参照してください。

4. tsconfig.json ファイルで、ターゲット オプションを見つけて、それを"ES205"に変更します。

5. tsconfig.json ファイルを更新して、コンパイラがすべての JScipt ファイルを新しいフォルダーに保存するようにします。

  • エクスプローラー ペインで、プロジェクト内に build という新しいフォルダーを作成します。
  • tsconfig.json ファイルで、 outDiオプションを見つけてコメントを削除し、パラメータを「build」に設定します。

6. tsconfig.json ファイルを保存します。

7. コマンドプロンプトで次のように入力します。 tsc 。 これにより、tsconfig.json ファイルが読み取られ、プロジェクトのオプションがリセットされます。

4. TypeSciptをJSciptにコンパイルする

ここで、TypeScipt ファイルにいくつかの JScipt コードを追加してコンパイルすることができます。たとえば、次の JScipt コードをコピーして module0.ts エディターに貼り付けます。

スクリプト

関数ddNumbers(x, y) { etun x + y; }

console.log(ddNumbers(3, 6));

コードをコンパイルする前であっても、Visual Studio Code は組み込みの TypeScipt サポートを使用して型チェックをすでに実行しています。 以前と同様に、ddNumbes 関数には引数に対して 2 つの型エラーがあります。

TypeScipt コードを更新して、各パラメータの型を指定します。 xx: numbeに、 yy: numbeに置き換えます。

2. TypeScipt ファイルを保存します。 TypeScipt コンパイラは、保存されたバージョンのファイルでのみ動作します。

3. ターミナルのコマンドプロンプトで「tsc module0.ts」と入力します。 コンパイラは正常に実行されるはずです。

新しい JScipt ファイルが追加されましたが、エクスプローラーのビルド フォルダーには存在しないことに注意してください。 ファイルを表示するには、エクスプローラー ペインを更新する必要がある場合があります。 tscコマンドを単一のファイルに対して実行すると、コンパイラは tsconfig.json ファイルを無視します。

4. 構成ファイルを読み込み、フォルダー内のすべての .ts ファイルをコンパイルするには、ファイル名を指定せずにtscを実行します。 これにより、ビルド フォルダーに .js ファイルが追加されます。 ルート フォルダー内の余分な .js ファイルを忘れずに削除してください。

5. module0.js ファイルを開き、右上隅の「エディターを右に分割」ボタンを選択して、新しいエディター ビューを開きます。

これで、.ts ファイルと .js ファイルを並べて表示できるようになります。 .js ファイルに新しい型注釈が含まれていないことを除いて、これらは同一であることに注意してください。

6. ターミナルのコマンドプロンプトで、「node .\build\module0.js`」と入力します。 これにより、JScipt が実行され、結果がコンソール ログに表示されます。

5. HTMLファイルを追加する

最後に、プロジェクトに HTML ファイルを追加して、JScipt コードを実行してテストすることができます。次の手順に従います。

エクスプローラーで、[新しいファイル] ボタンを選択します。

2. ファイル名 module0.html を入力し、Enter キーを押します。 HTML ファイルが新しいコード エディターに表示されます。次に、次の HTML をコピーしてエディターに貼り付け、ファイルを保存します。

html

<!DOCTYPE html> <html lng=̶en̶ di=̶lt̶> <hed> <met chset=̶UTF-8″> <title>テスト JScipt</title> </hed> <body> <h>テスト JScipt</h> <p id=̶dte̶></p> <p>このページは scipt module0.js を呼び出し、テストに使用されます。</p> <scipt sc=̶./build/module0.js̶></scipt> </body> </html>

3. エクスプローラーで module0.html を右クリックし、「既定のブラウザーで開く」を選択します。

4. ブラウザの開発者ツールを有効にして、TypeScipt でコーディングを開始します。

<<:  WordPress 6.1が間もなくリリースされ、開発の主要分野は期待に値する

>>:  Tabby チュートリアル: ダウンロード、インストール、SSH 接続の追加

推薦する

Odoo チュートリアル: コマンドを使用して Odoo データベースをバックアップ/復元する方法

Odoo は、データベースのバックアップと復元を通じて動作します。postges コマンドラインを使...

酒類販売促進コピーライティング(酒類のWeChatマーケティングのやり方、WeChatモーメンツでの酒類販売促進の広告コピーライティング)

酒類のWeChatマーケティングのやり方、WeChatモーメンツでの酒類プロモーションの広告コピーラ...

店舗を宣伝する方法(必要な店舗マーケティングのヒントはすべてここにあります)

あなたが知りたい店舗マーケティングの秘密はすべてここにありますお店を開くのは簡単ですが、特にビジネス...

ネットユーザーの間で「ユニクロをボイコットする」べきかどうか議論が巻き起こっている…

今日最も人気のある検索は間違いなくユニクロです。 どうしたの?昨日(11月28日)、ユニクロ創業者の...

ブランド企画会社(分析ブランド数500ブランド)

500ブランド分析ブランド名: ムーディ設立: 2019年創設者: Ci Ranブランドコンセプト...

情報フロー広告業界(百度、微博、今日頭条は情報フロー広告戦争でどう戦うのか?)

情報流通広告戦争で、百度、微博、今日頭条はどう戦うのか?この問題は前のビデオで説明されました。時間は...

Ubuntu ネットワーク接続障害の問題を解決するにはどうすればよいですか?

Ubuntu は、高い安定性とセキュリティを備えた Linux カーネルをベースにした人気のオープン...

易陽千曦は、この世代の若者のユニークな自己治癒力を目覚めさせます

ソース |テックプラネットテキスト |レン・シュエユンモバイルインターネットの時代に生まれた 199...

新しい小売コンテンツ運用(新しい小売企業、トラフィック運用および開発についてどれくらい知っていますか?)

新しい小売企業、交通運営、開発についてどれくらいご存知ですか?インターネット技術の発展と消費者需要の...

ブランド企画はどこにありますか(西安)

西安プロジェクト名:中国周城観光風景区、ロゴデザイン、VIデザイン、ガイドシステムデザイン、風景区の...

聚光科技:主力事業への注力で業績回復、クロスボーダー半導体で第2の成長軌道を築く

12月以降、聚鑫科技の株式を保有する5社が入札で落札を発表した。快捷アプリによると、5社はそれぞれ異...

プライベートドメインとユーザー操作(収集する価値のあるプライベートドメイン操作のヒント 86 件)

収集する価値のあるプライベートドメイン操作のヒント 86 件 「Jianshi: プライベートドメ...

ブランドマーケティング(大量販売で大規模なプロモーションビジネスを活性化、これらのブランドはDouyin 618で優勝)

これらのブランドは、大量のボリュームを利用して売上を伸ばし、Douyinの618イベントで優勝しまし...

スーパーマーケットの販促コピーライティング(2024年のスーパーマーケット販促活動の参考資料8つ)

2024年のスーパーマーケットプロモーション活動の参考資料8つ2024年スーパーマーケット振興計画...

業務におけるデータ分析の進め方(業務を導くコア分析手法:5段階分析法)

業務を導くためのコア分析方法: 5段階分析法多くの成長事例を見て、目の前の仕事とパフォーマンスの目...