TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介

前回の記事ではTypeScriptのインストール、使い方、自動コンパイルについて紹介しました。必要な方はクリックしてご覧ください。

TypeScript 入門

TypeScript は、Microsoft が開発したオープンソースのクロスプラットフォーム プログラミング言語です。これは JavaScript のスーパーセットであり、最終的には JavaScript コードにコンパイルされます。

2012 年 10 月、Microsoft は TypeScript の最初のパブリック バージョンをリリースしました。2013 年 6 月 19 日、プレビュー バージョンの後、Microsoft は TypeScript の正式バージョンを正式にリリースしました。

TypeScript の作者は、C# のチーフ アーキテクトである Anders Hejlsberg です。これはオープンソースでクロスプラットフォームのプログラミング言語です。

TypeScript は JavaScript の構文を拡張するため、既存の JavaScript プログラムを TypeScript 環境で実行できます。

TypeScript は大規模なアプリケーション開発向けに設計されており、JavaScript にコンパイルできます。

TypeScript は JavaScript のスーパーセットであり、主に型システムと ES6+ のサポートを提供します。Microsoft によって開発され、コードは GitHub でオープンソース化されています。

TypeScript は JavaScript のスーパーセットで、型システムと ES6+ のサポートを提供します。Microsoft によって開発され、コードは GitHub でオープンソース化されています (新しいウィンドウが開きます)

TypeScriptの特徴

TypeScript には主に 3 つの機能があります。

JavaScriptからJavaScriptへ
TypeScript は純粋で簡潔な JavaScript コードにコンパイルでき、任意のブラウザ、Node.js 環境、および ECMAScript 3 (またはそれ以降) をサポートする任意の JavaScript エンジンで実行できます。

強力な型システム
型システムにより、JavaScript 開発者は、JavaScript アプリケーションを開発する際に、効率的な開発ツールや、静的チェックやコード リファクタリングなどの一般的な操作を使用できます。

高度なJavaScript
TypeScript は、ECMAScript 2015 の機能や、非同期関数やデコレータなどの将来の提案を含む、最新の進化する JavaScript 機能を提供し、堅牢なコンポーネントの構築に役立ちます。

要約する

TypeScript はコミュニティでますます人気が高まっています。大規模なプロジェクトや基本的なライブラリに非常に適しており、開発の効率とエクスペリエンスを大幅に向上させます。

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

TypeScript をグローバルにインストールするには、コマンド ラインで次のコマンドを実行します。

npm インストール -g タイプスクリプト

インストールが完了したら、コンソールで次のコマンドを実行して、インストールが成功したかどうかを確認します (3.x)。

tsc -V

3. 最初のTypeScriptプログラム

TS プログラムの作成

helloworld.ts をアップロード

//パラメータstrは文字列型です。function aa(str: string){
        "Hello" + str を返す
    }
    テキストを「かわいい子」にします
    console.log(aa(テキスト))

src/index.html

//tsファイルを直接インポートすると、ブラウザはエラーを報告します（tsファイルに単語のjs構文のみが含まれている場合は、正常にインポートして使用できます）
  <script src="./helloworld.ts"></script>

コードを手動でコンパイルする

.ts 拡張子を使用しましたが、このコードは単なる JavaScript です。

ターミナルで TypeScript コンパイラを実行します。

tsc helloworld.ts

出力は、入力ファイルと同じ JavaScript コードを含む helloworld.js ファイルです。

ターミナルで、Node.js を通じて次のコードを実行します。

ノード helloworld.js

src/index.html を変更する

<script src="./helloworld.js"></script>

コンソール出力:

こんにちは、イー

helloworld.jsのコードを見てみましょう

 関数 aa(str) {
        "Hello" + str を返します。
    }
    var text = '小さなかわいい子';
    console.log(aa(テキスト));

要約する

• ts ファイルに js 構文コードを直接記述すると、ts ファイルを html ファイルに直接インポートして、Google のブラウザで直接使用できます。
• ts ファイルに ts 構文コードがある場合は、ts ファイルを js ファイルにコンパイルし、html ファイルで js ファイルを参照して使用する必要があります。
• ts ファイル内の関数のパラメータが特定の型に変更された場合、コンパイルされた js ファイルにはそのような型は存在しません。
• ts ファイル内の変数は let によって変更され、コンパイルされた js ファイル内の変更された変数は var に変更されます。

vscode 自動コンパイル

1). 設定ファイルtsconfig.jsonを生成する

ステップ：
新しいフォルダーを作成し、ターミナルを開いてコマンドを入力すると、tsconfig.json 構成が自動的に生成されます。

tsc --init

2). ファイルを開いてtsconfig.jsonの設定を変更します。

 "outDir": "./js",
    「厳密」：偽、 

3). 監視タスクを開始します。

ターミナル -> タスクを実行 -> すべてのタスクを表示 -> tsconfig.json を監視

再度修正して保存すると、対応する js ファイルが自動的に生成されます。

以上がTypeScriptのインストール、使用、自動コンパイルの方法についてのチュートリアルの詳細な内容です。TypeScriptの自動コンパイルのインストールと使用の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。