TypeScript
をインストールしてTypeScriptツールを取得するには、主に2つの方法があります。
npm（Node.jsパッケージマネージャー）を介し
てVisual Studio によってインストールされるTypeScriptプラグイン
Visual Studio 2017およびVisual Studio 2015 Update 3には、デフォルトでTypeScriptが含まれています。Visual StudioにTypeScriptがインストールされていない場合は、ダウンロードできます。
npmを使用しているユーザーの場合：
> npm install -g typescriptを
使用
して、エディターで最初のTypeScriptファイルをビルドし、次のコードをgreeter.tsファイルに入力します。
function greeter（person）{
return "Hello、" + person;
}
user = "Jane User";
document.body.innerHTML = greeter （user）;
コンパイルされたコード
には.ts拡張子を使用しましたが、このコードは単なるJavaScriptです。このコードを既存のJavaScriptアプリケーションから直接コピー/貼り付けできます。
コマンドラインでTypeScriptコンパイラを実行します。
tsc greeter.tsの
出力は、入力ファイルと同じJavsScriptコードを含むgreeter.jsファイルです。すべて準備ができたら、TypeScriptで記述されたこのJavaScriptアプリケーションを実行できます。
次に、TypeScriptツールによって提供される高度な機能を見てみましょう。追加：次のように、文字列型注釈をperson関数のパラメーターに追加します。
function greeter（person：string）{
return "Hello、" + person;
}
user = "Jane User";
document.body.innerHTML = greeter（user）;
Type注釈
TypeScriptのType注釈は、関数または変数に制約を追加する軽量な方法です。この例では、greeter関数に文字列パラメーターを受け取ります。次に、greeterの呼び出しを配列に変更してみます。
function greeter（person：string）{
return "Hello、" + person;
}
ユーザー= [0、1、2];
document.body.innerHTML = greeter（user）;
再コンパイルすると、エラーが表示されます。
エラーTS2345：タイプ 'number []'の引数は、タイプ 'string'のパラメーターに割り当てることができません。
同様に、greeter によって呼び出されたすべてのパラメーターを削除してみてください。TypeScriptは、この関数が予期しない数のパラメーターで呼び出されたことを通知します。どちらの場合も、TypeScriptは静的コード分析を提供します。これにより、提供されたコード構造と型注釈を分析できます。
エラーにもかかわらず、greeter.jsファイルが作成されたことに注意してください。コードにエラーがある場合でも、TypeScriptを使用できます。ただし、この場合、TypeScriptはコードが期待どおりに実行されない可能性があることを警告します。
インターフェイスを
使用して、このサンプルアプリケーションを開発できます。ここでは、インターフェイスを使用して、firstNameおよびlastNameフィールドを持つオブジェクトを記述します。TypeScriptでは、2つのタイプ内の構造のみが互換性があり、2つのタイプは互換性があります。これにより、インターフェイスに必要な構造が含まれている限り、implementsステートメントを明示的に使用せずにインターフェイスを実装できます。
インターフェースPerson {
firstName：string;
lastName：文字列;
}
function greeter（person：Person）{
return "Hello、" + person.firstName + "" + person.lastName;
}
let user = {firstName： "Jane"、lastName： "User"};
document.body.innerHTML = greeter（user）;
class
最後に、クラスを使用してこの例を書き換えましょう。TypeScriptは、クラスベースのオブジェクト指向プログラミングなどの新しいJavaScript機能をサポートしています。
コンストラクタといくつかのパブリックフィールドを持つStudentクラスを作成してみましょう。クラスとインターフェースは連携して機能し、プログラマーは抽象化のレベルを決定できることに注意してください。
コンストラクターのパラメーターでpublicを使用することは、同じ名前のメンバー変数を作成することと同じであることにも注意してください。
クラスStudent {
fullName：string;
コンストラクター（public firstName：string、public middleInitial：string、public lastName：string）{
this.fullName = firstName + "" + middleInitial + "" + lastName;
}
}
インターフェースPerson {
firstName：string;
lastName：文字列;
}
function greeter（person：Person）{
return "Hello、" + person.firstName + "" + person.lastName;
}
user = new Student（ "Jane"、 "M."、 "User"）;を許可します。
document.body.innerHTML =
greeter （user）; tsc greeter.tsを再実行すると、生成されたJavaScriptコードが元のJavaScriptコードと同じであることがわかります。TypeScriptのクラスは、JavaScriptで一般的に使用されるプロトタイプベースのオブジェクト指向プログラミングの省略形にすぎません。
TypeScript Webアプリケーション
を実行し、greeter.htmlに次のように入力します。
<！DOCTYPE HTML>
<HTML>
<HEAD> <TITLE>グリーターtypescriptです</ TITLE> </ HEAD>
<BODY>
<SCRIPT SRC = "greeter.js"> </ SCRIPT>
</ BODY>
</ HTML>
でこのアプリケーションを実行するには、ブラウザーでgreeter.htmlを開いてください！
オプション：Visual Studioでgreeter.tsを開くか、コードをTypeScriptプレイグラウンドにコピーします。識別子にカーソルを合わせると、そのタイプが表示されます。場合によっては、それらのタイプが自動的に推論できることに注意してください。コードの最後の行を再入力し、オートコンプリートリストとパラメーターリストを確認してください。これらはDOM要素のタイプに応じて変化します。greeter関数にカーソルを合わせ、F12をクリックしてその定義を追跡します。また、ロゴを右クリックして、リファクタリング機能を使用して名前を変更することもできます。