TypeScript-環境設定

オプションオンラインでお試しください

TypeScriptプログラミングはすでにオンラインで設定されているため、理論の作業を行うときに、利用可能なすべての例をオンラインで同時に実行できます。これにより、読んでいる内容に自信が持てるようになり、さまざまなオプションで結果を確認できます。例を自由に変更して、オンラインで実行してください。

CodingGroundで入手可能なオンラインコンパイラオプションを使用して、次の例を試してください

var message:string = "Hello World" 
console.log(message)

コンパイル時に、次のJavaScriptコードが生成されます。

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

このチュートリアルに記載されているほとんどの例では、 Try it右上隅にある当社のWebサイトコードセクションのオプション。オンラインコンパイラに移動します。だから、それを利用して、あなたの学習を楽しんでください。

この章では、WindowsプラットフォームにTypeScriptをインストールする方法について説明します。また、BracketsIDEのインストール方法についても説明します。

TypeScript─オンラインでお試しください

www.typescriptlang.org/PlaygroundのTypeScriptを使用して、オンラインでスクリプトをテストできます。オンラインエディタには、コンパイラによって発行された対応するJavaScriptが表示されます。

次の例を使用して試すことができます Playground

var num:number = 12 
console.log(num)

コンパイル時に、次のJavaScriptコードが生成されます。

//Generated by typescript 1.8.10
var num = 12;
console.log(num);

上記のプログラムの出力を以下に示します-

12

ローカル環境のセットアップ

Typescriptはオープンソーステクノロジーです。任意のブラウザ、任意のホスト、および任意のOSで実行できます。Typescriptプログラムを作成してテストするには、次のツールが必要です。

テキストエディタ

テキストエディタは、ソースコードを書くのに役立ちます。いくつかのエディターの例には、Windows Notepad、Notepad ++、Emacs、vim、viなどがあります。使用されるエディターはオペレーティングシステムによって異なる場合があります。

ソースファイルには通常、拡張子が付いた名前が付けられます .ts

TypeScriptコンパイラ

TypeScriptコンパイラはそれ自体が .tsJavaScript(.js)ファイルにコンパイルされたファイル。TSC(TypeScriptコンパイラ)は、ソースツーソースコンパイラ(トランスコンパイラ/トランスパイラ)です。

TSCは、JavaScriptバージョンの .ts渡されたファイル。言い換えると、TSCは、入力として指定されたTypescriptファイルから同等のJavaScriptソースコードを生成します。このプロセスは、トランスパイルと呼ばれます。

ただし、コンパイラーは、渡された生のJavaScriptファイルを拒否します。コンパイラは.ts または .d.ts ファイル。

Node.jsのインストール

Node.jsは、サーバーサイドJavaScript用のオープンソースのクロスプラットフォームランタイム環境です。ブラウザをサポートせずにJavaScriptを実行するには、Node.jsが必要です。Google V8JavaScriptエンジンを使用してコードを実行します。Node.jsソースコードまたはプラットフォーム用のビルド済みインストーラーをダウンロードできます。ノードはここから入手できます-https://nodejs.org/en/download

Windowsへのインストール

以下の手順に従って、Windows環境にNode.jsをインストールします。

Step 1 −ノードの.msiインストーラーをダウンロードして実行します。

Step 2 −インストールが成功したかどうかを確認するには、コマンドを入力します node –v ターミナルウィンドウで。

Step 3 − TypeScriptをインストールするには、ターミナルウィンドウに次のコマンドを入力します。

npm install -g typescript

Mac OSXへのインストール

Mac OS Xにnode.jsをインストールするには、コンパイル済みのバイナリパッケージをダウンロードして、インストールを簡単に行うことができます。に向かいますhttp://nodejs.org/ インストールボタンをクリックして、最新のパッケージをダウンロードします。

からパッケージをインストールします .dmg ノードとの両方をインストールするインストールウィザードに従うことによって npm。npmは、node.jsの追加パッケージのインストールを容易にするノードパッケージマネージャーです。

Linuxへのインストール

Node.jsとNPMをインストールする前に、いくつかの依存関係をインストールする必要があります。

  • Ruby そして GCC。Ruby1.8.6以降とGCC4.2以降が必要です。

  • Homebrew。Homebrewは元々Mac用に設計されたパッケージマネージャーですが、LinuxbrewとしてLinuxに移植されています。あなたはHomebrewについてもっと学ぶことができますhttp://brew.sh/ およびLinuxbrewat http://brew.sh/linuxbrew

これらの依存関係がインストールされたら、ターミナルで次のコマンドを使用してNode.jsをインストールできます-

brew install node.

IDEサポート

Typescriptは、Visual Studio、Sublime Text 2、WebStorm / PHPStorm、Eclipse、Bracketsなどの多数の開発環境で構築できます。VisualStudioCodeとBracketsIDEについてはここで説明します。ここで使用する開発環境は、Visual Studio Code(Windowsプラットフォーム)です。

VisualStudioコード

これは、VisualStudioのオープンソースIDEです。Mac OS X、Linux、およびWindowsプラットフォームで使用できます。VScodeは-で入手できます。https://code.visualstudio.com/

Windowsへのインストール

Step 1− Windows用のVisualStudioCodeをダウンロードします。

Step 2− VSCodeSetup.exe

をダブルクリックして、セットアッププロセスを起動します。これには1分しかかかりません。

Step 3 −IDEのスクリーンショットを以下に示します。

Step 4−ファイルを右クリックして、コマンドプロンプトで開くことにより、ファイルのパスに直接移動できます。同様に、[エクスプローラーで表示]オプションは、ファイルエクスプローラーにファイルを表示します。

Mac OSXへのインストール

Visual StudioCodeのMacOSX固有のインストールガイドは次の場所にあります。

https://code.visualstudio.com/Docs/editor/setup

Linuxへのインストール

Visual Studio CodeのLinux固有のインストールガイドは、次の場所にあります。

https://code.visualstudio.com/Docs/editor/setup

ブラケット

Bracketsは、AdobeSystemsによって作成されたWeb開発用の無料のオープンソースエディタです。Linux、Windows、Mac OSXで利用できます。ブラケットは次のURLで入手できます。http://brackets.io/

ブラケット用のTypeScript拡張機能

Bracketsは、ExtensionManagerを介して機能を追加するための拡張機能をサポートしています。次の手順では、同じものを使用してTypeScript拡張機能をインストールする方法について説明します。

  • インストール後

    、エディターの右側にある拡張機能マネージャーのアイコンをクリックします。検索ボックスにtypescriptを入力します。

  • BracketsTSLintおよびBracketsTypeScriptプラグインをインストールします。

Brackets Shellの拡張機能をもう1つ追加することで、Brackets自体の中でDOSプロンプト/シェルを実行できます。

インストールすると、エディターの右側にシェルのアイコンが表示されます

。アイコンをクリックすると、以下のようなシェルウィンドウが表示されます-

Note− Typescriptは、Visual Studio 2012および2013環境(https://www.typescriptlang.org/#Download)のプラグインとしても使用できます。VS2015以降には、デフォルトでTypescriptプラグインが含まれています。

これで、すべて設定されました!!!