Typescript-environment-setup

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);

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

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

TypeScript─オンラインで試すオプション

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

TypeScriptオンラインテスト

*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＆plus;＆plus;、Emacs、vimまたはviなどが含まれます。 使用されるエディターは、オペレーティングシステムによって異なる場合があります。

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

TypeScriptコンパイラー

TypeScriptコンパイラー自体は、JavaScript（.js）ファイルにコンパイルされる .ts ファイルです。 TSC（TypeScript Compiler）は、ソースからソースへのコンパイラー（トランスコンパイラー/トランスパイラー）です。

TypeScriptコンパイラ

TSCは、渡された .ts ファイルのJavaScriptバージョンを生成します。 つまり、TSCは、入力として与えられたTypescriptファイルから同等のJavaScriptソースコードを生成します。 このプロセスは、トランスピレーションと呼ばれます。

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

Node.jsのインストール

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

Windowsへのインストール

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

• ステップ1 *-Nodeの.msiインストーラーをダウンロードして実行します。

インストーラーのダウンロードと実行

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

インストールの確認

• ステップ3 *-ターミナルウィンドウで次のコマンドを入力して、TypeScriptをインストールします。

npm install -g typescript

TypeScriptのインストール

Mac OS Xでのインストール

Mac OS Xにnode.jsをインストールするには、プリコンパイルされたバイナリパッケージをダウンロードして、簡単にインストールできます。 http://nodejs.org/に移動し、インストールボタンをクリックして最新のパッケージをダウンロードします。

最新のパッケージをダウンロード

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

ノードのインストール

Linuxへのインストール

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

• Ruby および GCC 。 Ruby 1.8.6以降とGCC 4.2以降が必要です。
• Homebrew 。 HomebrewはもともとMac用に設計されたパッケージマネージャーですが、LinuxbrewとしてLinuxに移植されています。 Homebrewの詳細はhttp://brew.sh/で、Linuxbrewはhttp://linuxbrew.sh/[http://brew.sh/linuxbrew]で学ぶことができます。

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

brew install node.

IDEサポート

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

Visual Studioコード

これは、Visual StudioのオープンソースIDEです。 Mac OS X、Linux、およびWindowsプラットフォームで使用できます。 VScodeは、https://code.visualstudio.com/？utm_expid = 101350005-25.TcgI322oRoCwQD7KJ5t8zQ.0 [https://code.visualstudio.com/]で入手できます。

Windowsへのインストール

• ステップ1 *-Windows用https://code.visualstudio.com/docs?dv=win[Visual Studio Codeのダウンロード]。

Visual Studioコードのダウンロード

• ステップ2 *-VSCodeSetup.exe セットアッププロセスの起動をダブルクリックして、セットアッププロセスを起動します。 これには数分しかかかりません。

セットアップウィザード

• ステップ3 *-IDEのスクリーンショットを以下に示します。

IDE

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

トラバースファイルパス

Mac OS Xでのインストール

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

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

Linuxへのインストール

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

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

ブラケット

Bracketsは、Adobe Systemsが作成したWeb開発用の無料のオープンソースエディターです。 Linux、Windows、Mac OS Xで利用可能です。 ブラケットはhttp://brackets.io/で入手できます。

ブラケット

ブラケット用のTypeScript拡張

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

• インストール後、エディターの右側にある拡張マネージャーアイコン拡張マネージャーをクリックします。 検索ボックスにtypescriptを入力します。
• Brackets TSLintおよびBrackets TypeScriptプラグインをインストールします。

TypeScript拡張機能

1つ以上の拡張Brackets Shellを追加することにより、Brackets内でDOSプロンプト/シェルを実行できます。

ブラケットシェル

インストールすると、エディターの右側にシェルのアイコンが表示されますShell。 アイコンをクリックすると、以下に示すようにシェルウィンドウが表示されます-

シェルウィンドウ

注-Typescriptは、Visual Studio 2012および2013環境のプラグインとしても利用できますhttps://www.typescriptlang.org/#Download[(https://www.typescriptlang.org/#Download).VS] 2015および上記には、デフォルトでTypescriptプラグインが含まれています。

これで設定は完了です!!!