TypeScript-クイックガイド

クライアント側の言語としてJavaScriptが導入されました。Node.jsの開発により、JavaScriptも新しいサーバーサイドテクノロジーとしてマークされました。ただし、JavaScriptコードが大きくなると、混乱する傾向があり、コードの保守と再利用が困難になります。さらに、オブジェクト指向、強力な型チェック、およびコンパイル時のエラーチェックの機能を採用できないため、JavaScriptは本格的なサーバーサイドテクノロジーとしてエンタープライズレベルで成功することができません。TypeScript このギャップを埋めるために提示されました。

TypeScriptとは何ですか？

定義上、「TypeScriptはアプリケーション規模の開発用のJavaScriptです。」

TypeScriptは、強く型付けされたオブジェクト指向のコンパイル型言語です。それはによって設計されましたAnders Hejlsberg（C＃の設計者）Microsoftで。TypeScriptは、言語であると同時にツールのセットでもあります。TypeScriptは、JavaScriptにコンパイルされたJavaScriptの型付きスーパーセットです。言い換えれば、TypeScriptはJavaScriptといくつかの追加機能です。

TypeScriptの機能

TypeScript is just JavaScript。TypeScriptはJavaScriptで始まり、JavaScriptで終わります。Typescriptは、JavaScriptからプログラムの基本的な構成要素を採用しています。したがって、TypeScriptを使用するにはJavaScriptを知っているだけで済みます。すべてのTypeScriptコードは、実行のために同等のJavaScriptに変換されます。

TypeScript supports other JS libraries。コンパイルされたTypeScriptは、任意のJavaScriptコードから使用できます。TypeScriptで生成されたJavaScriptは、既存のJavaScriptフレームワーク、ツール、およびライブラリをすべて再利用できます。

JavaScript is TypeScript。これは、有効な.js ファイルの名前をに変更できます .ts 他のTypeScriptファイルでコンパイルされます。

TypeScript is portable。TypeScriptは、ブラウザ、デバイス、およびオペレーティングシステム間で移植可能です。JavaScriptが実行されている任意の環境で実行できます。対応するものとは異なり、TypeScriptは実行するために専用のVMや特定のランタイム環境を必要としません。

TypeScriptとECMAScript

ECMAScript仕様は、スクリプト言語の標準化された仕様です。ECMA-262には6つのエディションが公開されています。標準のバージョン6は、コードネーム「Harmony」です。TypeScriptはECMAScript6仕様に準拠しています。

TypeScriptは、ECMAScript5仕様、つまりJavaScriptの公式仕様の基本的な言語機能を採用しています。モジュールやクラスベースのオリエンテーションなどのTypeScript言語機能は、EcmaScript6仕様に準拠しています。さらに、TypeScriptには、EcmaScript6仕様の一部ではないジェネリックスや型注釈などの機能も含まれています。

TypeScriptを使用する理由

TypeScriptは、JavaScriptが拡張されているという点で、CoffeeScriptやDartプログラミング言語などの他の言語よりも優れています。対照的に、Dart、CoffeeScriptなどの言語はそれ自体が新しい言語であり、言語固有の実行環境が必要です。

TypeScriptの利点は次のとおりです。

• Compilation−JavaScriptはインタープリター言語です。したがって、それが有効であることをテストするために実行する必要があります。これは、エラーが発生した場合に備えて、出力が見つからないようにするためだけにすべてのコードを記述することを意味します。したがって、コード内のバグを見つけるために何時間も費やす必要があります。TypeScriptトランスパイラーはエラーチェック機能を提供します。TypeScriptは、ある種の構文エラーを検出すると、コードをコンパイルしてコンパイルエラーを生成します。これは、スクリプトを実行する前にエラーを強調するのに役立ちます。

• Strong Static Typing−JavaScriptは強く型付けされていません。TypeScriptには、TLS（TypeScript Language Service）を介したオプションの静的型付けおよび型推論システムが付属しています。型なしで宣言された変数の型は、その値に基づいてTLSによって推測される場合があります。

• TypeScript supports type definitions既存のJavaScriptライブラリ用。TypeScript定義ファイル（.d.ts拡張）は、外部JavaScriptライブラリの定義を提供します。したがって、TypeScriptコードにはこれらのライブラリを含めることができます。

• TypeScript supports Object Oriented Programming クラス、インターフェース、継承などの概念。

TypeScriptのコンポーネント

TypeScriptには、基本的に次の3つのコンポーネントがあります。

• Language −構文、キーワード、および型注釈で構成されます。

• The TypeScript Compiler − TypeScriptコンパイラ（tsc）は、TypeScriptで記述された命令を同等のJavaScriptに変換します。

• The TypeScript Language Service−「LanguageService」は、エディターのようなアプリケーションであるコアコンパイラパイプラインの周りに追加のレイヤーを公開します。言語サービスは、ステートメントの補完、署名のヘルプ、コードのフォーマットとアウトライン、色付けなど、一般的なエディター操作の一般的なセットをサポートします。

宣言ファイル

TypeScriptスクリプトがコンパイルされると、生成するオプションがあります declaration file （拡張子付き .d.ts）コンパイルされたJavaScriptのコンポーネントへのインターフェースとして機能します。宣言ファイルの概念は、C / C ++にあるヘッダーファイルの概念に類似しています。宣言ファイル（.d.ts 拡張機能）タイプのインテリセンス、関数呼び出し、jQuery、MooToolsなどのJavaScriptライブラリの変数サポートを提供します。

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

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プラグインが含まれています。

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

構文は、プログラムを作成するための一連のルールを定義します。すべての言語仕様は、独自の構文を定義しています。TypeScriptプログラムは-で構成されています

• Modules
• Functions
• Variables
• ステートメントと式
• Comments

あなたの最初のTypeScriptコード

従来の「HelloWorld」の例から始めましょう-

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

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

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

• 1行目は、名前メッセージで変数を宣言しています。変数は、プログラムに値を格納するためのメカニズムです。

• 2行目は、変数の値をプロンプトに出力します。ここで、コンソールはターミナルウィンドウを指します。関数ログ（）は、画面にテキストを表示するために使用されます。

TypeScriptプログラムをコンパイルして実行する

Visual StudioCodeを使用してTypeScriptプログラムをコンパイルして実行する方法を見てみましょう。以下の手順に従ってください-

Step 1−ファイルを.ts拡張子で保存します。ファイルをTest.tsとして保存します。コードエディタは、コードを保存しているときに、コードにエラーがある場合はマークを付けます。

Step 2−VSCodeのエクスプローラペインの[作業ファイル]オプションの下にあるTypeScriptファイルを右クリックします。[コマンドプロンプトで開く]オプションを選択します。

Step 3 −ファイルをコンパイルするには、ターミナルウィンドウで次のコマンドを使用します。

tsc Test.ts

Step 4−ファイルはTest.jsにコンパイルされます。作成したプログラムを実行するには、ターミナルに次のように入力します。

node Test.js

コンパイラフラグ

コンパイラフラグを使用すると、コンパイル中のコンパイラの動作を変更できます。各コンパイラフラグは、コンパイラの動作を変更できる設定を公開します。

次の表に、TSCコンパイラに関連するいくつかの一般的なフラグを示します。一般的なコマンドラインの使用法では、一部またはすべてのスイッチを使用します。

S.No.	コンパイラフラグと説明
1.1。	--help ヘルプマニュアルを表示します
2.2。	--module 外部モジュールをロードする
3.3。	--target 目標ECMAバージョンを設定する
4.4。	--declaration 追加の.d.tsファイルを生成します
5.5。	--removeComments 出力ファイルからすべてのコメントを削除します
6.6。	--out 複数のファイルを単一の出力ファイルにコンパイルします
7。	--sourcemap ソースマップ（.map）ファイルを生成する
8.8。	--module noImplicitAny コンパイラが任意の型を推測できないようにします
9.9。	--watch ファイルの変更を監視し、その場で再コンパイルします

Note −複数のファイルを一度にコンパイルできます。

tsc file1.ts, file2.ts, file3.ts

TypeScriptの識別子

識別子は、変数や関数などのプログラムの要素に付けられた名前です。識別子の規則は次のとおりです。

• 識別子には、文字と数字の両方を含めることができます。ただし、識別子を数字で始めることはできません。

• 識別子には、アンダースコア（_）またはドル記号（$）以外の特別な記号を含めることはできません。

• 識別子をキーワードにすることはできません。

• それらは一意である必要があります。

• 識別子では大文字と小文字が区別されます。

• 識別子にスペースを含めることはできません。

次の表に、有効な識別子と無効な識別子の例をいくつか示します。

有効な識別子	無効な識別子
ファーストネーム	Var
ファーストネーム	ファーストネーム
num1	ファーストネーム
$ result	1番号

TypeScript─キーワード

キーワードは、言語の文脈では特別な意味を持っています。次の表に、TypeScriptのいくつかのキーワードを示します。

ブレーク	なので	どれか	スイッチ
場合	もし	スロー	そうしないと
var	数	ストリング	取得する
モジュール	タイプ	instanceof	typeof
公衆	民間	列挙型	書き出す
最終的に	にとって	一方	ボイド
ヌル	素晴らしい	この	新着
に	戻る	true	false
どれか	拡張します	静的	しましょう
パッケージ	実装	インターフェース	関数
新着	試してみてください	産出	const
継続する	行う	キャッチ

空白と改行

TypeScriptは、プログラムに表示されるスペース、タブ、および改行を無視します。プログラムではスペース、タブ、改行を自由に使用でき、コードを読みやすく理解しやすいように、プログラムをきちんと一貫した方法で自由にフォーマットおよびインデントできます。

TypeScriptでは大文字と小文字が区別されます

TypeScriptでは大文字と小文字が区別されます。これは、TypeScriptが大文字と小文字を区別することを意味します。

セミコロンはオプションです

命令の各行は、 statement。TypeScriptではセミコロンはオプションです。

Example

console.log("hello world")
console.log("We are learning TypeScript")

1行に複数のステートメントを含めることができます。ただし、これらのステートメントはセミコロンで区切る必要があります。

TypeScriptのコメント

コメントは、プログラムの読みやすさを向上させる方法です。コメントを使用して、コードの作成者、関数/構成に関するヒントなど、プログラムに関する追加情報を含めることができます。コメントはコンパイラーによって無視されます。

TypeScriptは次のタイプのコメントをサポートします-

• Single-line comments ( // ) − //と行末の間のテキストはコメントとして扱われます

• Multi-line comments (/* */) −これらのコメントは複数行にまたがることがあります。

Example

//this is single line comment 
 
/* This is a  
   Multi-line comment 
*/

TypeScriptとオブジェクト指向

TypeScriptはオブジェクト指向のJavaScriptです。オブジェクト指向は、実際のモデリングに従うソフトウェア開発パラダイムです。オブジェクト指向は、プログラムを、メソッドと呼ばれるメカニズムを介して相互に通信するオブジェクトのコレクションと見なします。TypeScriptは、これらのオブジェクト指向コンポーネントもサポートしています。

• Object−オブジェクトは、任意のエンティティのリアルタイム表現です。Grady Broochによると、すべてのオブジェクトには3つの機能が必要です。

  • State −オブジェクトの属性によって記述されます

  • Behavior −オブジェクトがどのように動作するかを説明します

  • Identity −オブジェクトをそのような類似のオブジェクトのセットから区別する一意の値。

• Class− OOPに関するクラスは、オブジェクトを作成するための青写真です。クラスは、オブジェクトのデータをカプセル化します。

• Method −メソッドはオブジェクト間の通信を容易にします。

Example: TypeScript and Object Orientation

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

上記の例では、クラスGreetingを定義しています。このクラスには、メソッドgreet（）があります。このメソッドは、文字列「HelloWorld」を端末に出力します。ザ・newキーワードはクラス（obj）のオブジェクトを作成します。オブジェクトはメソッドgreet（）を呼び出します。

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

//Generated by typescript 1.8.10
var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

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

Hello World!!!

型システムは、言語でサポートされているさまざまなタイプの値を表します。型システムは、プログラムによって保存または操作される前に、指定された値の有効性をチェックします。これにより、コードが期待どおりに動作することが保証されます。型システムはさらに、より豊富なコードヒントと自動化されたドキュメントを可能にします。

TypeScriptは、オプションの型システムの一部としてデータ型を提供します。データ型の分類は以下のとおりです。

任意のタイプ

ザ・ anyデータ型は、TypeScriptのすべての型のスーパー型です。動的型を示します。を使用してany typeは、変数の型チェックをオプトアウトすることと同じです。

ビルトインタイプ

次の表は、TypeScriptのすべての組み込み型を示しています。

データ・タイプ	キーワード	説明
数	数	倍精度64ビット浮動小数点値。整数と分数の両方を表すために使用できます。
ストリング	ストリング	Unicode文字のシーケンスを表します
ブール値	ブール値	trueとfalseの論理値を表します
無効	ボイド	関数の戻り値の型で使用され、戻り値のない関数を表します
ヌル	ヌル	オブジェクト値が意図的に存在しないことを表します。
未定義	未定義	初期化されていないすべての変数に与えられた値を示します

Note −TypeScriptとJavaScriptには整数型はありません。

ヌルと未定義─それらは同じですか？

ザ・ null そしてその undefined多くの場合、データ型は混乱の原因になります。nullおよびundefinedを使用して、変数のデータ型を参照することはできません。これらは、変数に値としてのみ割り当てることができます。

ただし、nullとundefinedは同じではありません。undefinedで初期化された変数は、変数に値またはオブジェクトが割り当てられていないことを意味し、nullは、変数が値が未定義のオブジェクトに設定されていることを意味します。

ユーザー定義タイプ

ユーザー定義型には、列挙型（列挙型）、クラス、インターフェイス、配列、およびタプルが含まれます。これらについては、後の章で詳しく説明します。

変数は、定義上、値を格納する「メモリ内の名前付きスペース」です。つまり、プログラム内の値のコンテナとして機能します。TypeScript変数はJavaScriptの命名規則に従う必要があります-

• 変数名には、アルファベットと数字を含めることができます。

• アンダースコア（_）とドル（$）記号を除いて、スペースと特殊文字を含めることはできません。

• 変数名を数字で始めることはできません。

変数は、使用する前に宣言する必要があります。使用var 変数を宣言するキーワード。

TypeScriptでの変数宣言

TypeScriptで変数を宣言するための型構文は、変数名の後にコロン（:)を含め、その後にその型を含めることです。JavaScriptの場合と同様に、var 変数を宣言するキーワード。

変数を宣言するとき、4つのオプションがあります-

• そのタイプと値を1つのステートメントで宣言します。

• タイプを宣言しますが、値は宣言しません。この場合、変数は未定義に設定されます。

• その値を宣言しますが、タイプは宣言しません。変数タイプは、割り当てられた値のデータタイプに設定されます。

• どちらの値もタイプではないと宣言します。この場合、変数のデータ型はanyになり、undefinedに初期化されます。

次の表は、上記で説明した変数宣言の有効な構文を示しています。

S.No.	変数宣言の構文と説明
1.1。	var name:string = ”mary” 変数は文字列型の値を格納します
2.2。	var name:string; 変数は文字列変数です。変数の値はデフォルトで未定義に設定されています
3.3。	var name = ”mary” 変数の型は、値のデータ型から推測されます。ここで、変数は文字列型です
4.4。	var name; 変数のデータ型は任意です。その値はデフォルトで未定義に設定されています。

例：TypeScriptの変数

var name:string = "John"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)

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

//Generated by typescript 1.8.10
var name = "John";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("name" + name);
console.log("first score: " + score1);
console.log("second score : " + score2);
console.log("sum of the scores: " + sum);

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

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

同じタイプではない変数に値を割り当てようとすると、TypeScriptコンパイラはエラーを生成します。したがって、TypeScriptは強い型付けに従います。強い型付け構文は、代入演算子（=）のいずれかの側で指定された型が同じであることを保証します。これが、次のコードでコンパイルエラーが発生する理由です-

var num:number = "hello"     // will result in a compilation error

TypeScriptでの型アサーション

TypeScriptを使用すると、変数をあるタイプから別のタイプに変更できます。TypeScriptは、このプロセスをタイプアサーションと呼びます。構文は、ターゲットタイプを<>シンボルの間に置き、変数または式の前に配置することです。次の例は、この概念を説明しています-

例

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(typeof(str2))

Visual Studio Codeの型アサーションステートメントにマウスポインターを合わせると、変数のデータ型の変更が表示されます。基本的に、SがTのサブタイプであるか、TがSのサブタイプである場合、タイプSからTへのアサーションを成功させることができます。

「型キャスト」と呼ばれない理由は、キャストは一般にある種のランタイムサポートを意味するのに対し、「型アサーション」は純粋にコンパイル時の構造であり、コードの作成方法に関するヒントをコンパイラに提供する方法であるためです。分析されます。

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

"use strict";
var str = '1';
var str2 = str; //str is now of type number 
console.log(typeof (str2));

次の出力が生成されます-

string

TypeScriptでの推定入力

Typescriptは強く型付けされているという事実を考えると、この機能はオプションです。TypeScriptは、変数の動的型付けも推奨します。つまり、TypeScriptは、型なしで変数を宣言することを推奨します。このような場合、コンパイラーは、割り当てられた値に基づいて変数のタイプを判別します。TypeScriptは、コード内で変数の最初の使用法を見つけ、最初に設定されたタイプを判別してから、コードブロックの残りの部分でこの変数に同じタイプを想定します。

同じことが次のコードスニペットで説明されています-

例：推測される入力

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

上記のコードスニペットでは-

• コードは変数を宣言し、その値を2に設定します。変数宣言はデータ型を指定しないことに注意してください。したがって、プログラムは推定型を使用して変数のデータ型を決定します。つまり、変数が設定されている最初の値の型を割り当てます。この場合、num タイプ番号に設定されます。

• コードが変数の値を文字列に設定しようとしたとき。変数の型がすでに数値に設定されているため、コンパイラはエラーをスローします。

次の出力が生成されます-

error TS2011: Cannot convert 'string' to 'number'.

TypeScript変数スコープ

変数のスコープは、変数が定義される場所を指定します。プログラム内の変数の可用性は、そのスコープによって決定されます。TypeScript変数のスコープは次のとおりです-

• Global Scope−グローバル変数はプログラミング構造の外部で宣言されます。これらの変数には、コード内のどこからでもアクセスできます。

• Class Scope −これらの変数は fields。フィールドまたはクラス変数は、クラス内であるがメソッド外で宣言されています。これらの変数には、クラスのオブジェクトを使用してアクセスできます。フィールドは静的にすることもできます。静的フィールドには、クラス名を使用してアクセスできます。

• Local Scope −ローカル変数は、その名前が示すように、メソッド、ループなどの構成内で宣言されます。ローカル変数は、宣言された構成内でのみアクセスできます。

次の例は、TypeScriptの変数スコープを示しています。

例：可変スコープ

var global_num = 12          //global variable 
class Numbers { 
   num_val = 13;             //class variable 
   static sval = 10;         //static field 
   
   storeNum():void { 
      var local_num = 14;    //local variable 
   } 
} 
console.log("Global num: "+global_num)  
console.log(Numbers.sval)   //static variable  
var obj = new Numbers(); 
console.log("Global num: "+obj.num_val)

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

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

次の出力が生成されます-

Global num: 12
10
Global num: 13

メソッドの外部でローカル変数にアクセスしようとすると、コンパイルエラーが発生します。

error TS2095: Could not find symbol 'local_num'.

演算子とは何ですか？

オペレーターは、データに対して実行される関数を定義します。演算子が機能するデータは、オペランドと呼ばれます。次の式を考えてみましょう-

7 + 5 = 12

ここで、値7、5、および12は次のとおりです。 operands、+と=は operators。

TypeScriptの主要な演算子は次のように分類できます-

• 算術演算子
• 論理演算子
• 関係演算子
• ビット演算子
• 代入演算子
• 三項/条件演算​​子
• 文字列演算子
• タイプ演算子

算術演算子

変数aとbの値がそれぞれ10と5であると仮定します。

例を表示

オペレーター	説明	例
+（追加）	オペランドの合計を返します	a + bは15です
-（減算）	値の差を返します	a-bは5です
*（乗算）	値の積を返します	a * bは50です
/（除算）	除算演算を実行し、商を返します	a / bは2です
％ （係数）	除算演算を実行し、余りを返します	a％bは0です
++（インクリメント）	変数の値を1つインクリメントします	a ++は11です
-（デクリメント）	変数の値を1つ減らします	a--は9です

関係演算子

関係演算子は、2つのエンティティ間の関係の種類をテストまたは定義します。関係演算子はブール値、つまりtrue / falseを返します。

Aの値が10で、Bの値が20であると仮定します。

例を表示

オペレーター	説明	例
>>	大なり記号	（A> B）はFalseです
<	未満	（A <B）は真です
> =	以上	（A> = B）はFalseです
<=	以下	（A <= B）はTrueです
==	平等	（A == B）は偽です
！=	等しくない	（A！= B）はTrueです

論理演算子

論理演算子は、2つ以上の条件を組み合わせるために使用されます。論理演算子もブール値を返します。変数Aの値が10で、Bが20であると仮定します。

例を表示

オペレーター	説明	例
&&（および）	指定されたすべての式がtrueを返す場合にのみ、演算子はtrueを返します	（A> 10 && B> 10）はFalseです
|| （または）	指定された式の少なくとも1つがtrueを返す場合、演算子はtrueを返します	（A> 10 || B> 10）は真です
！（NOT）	演算子は、式の結果の逆数を返します。例：！（> 5）はfalseを返します	！（A> 10）はTrueです

ビット演算子

変数A = 2およびB = 3と仮定します

例を表示

オペレーター	説明	例
＆（ビットごとのAND）	整数引数の各ビットに対してブールAND演算を実行します。	（A＆B）は2です
| （BitWise OR）	整数引数の各ビットに対してブールOR演算を実行します。	（A | B）は3です
^（ビット単位のXOR）	整数引数の各ビットに対してブール排他的論理和演算を実行します。排他的論理和は、オペランド1が真であるかオペランド2が真であるが、両方ではないことを意味します。	（A ^ B）は1です
〜（ビット単位ではありません）	これは単項演算子であり、オペランドのすべてのビットを逆にすることによって動作します。	（〜B）は-4です
<<（左シフト）	第1オペランドのすべてのビットを、第2オペランドで指定された桁数だけ左に移動します。新しいビットはゼロで埋められます。値を1つ左にシフトすることは、その値に2を掛けることと同じです。2つの位置をシフトすることは、4を掛けることと同じです。	（A << 1）は4です
>>（右シフト）	バイナリ右シフト演算子。左のオペランドの値は、右のオペランドで指定されたビット数だけ右に移動します。	（A >> 1）は1です
>>>（ゼロで右シフト）	この演算子は>>演算子と同じですが、左側にシフトインされたビットが常にゼロである点が異なります。	（A >>> 1）は1です

代入演算子

例を表示

オペレーター	説明	例
=（単純な割り当て）	右側のオペランドから左側のオペランドに値を割り当てます	C = A + Bは、A + Bの値をCに割り当てます
+ =（追加と割り当て）	右のオペランドを左のオペランドに追加し、結果を左のオペランドに割り当てます。	C + = AはC = C + Aと同等です
-=（減算と割り当て）	左のオペランドから右のオペランドを減算し、その結果を左のオペランドに割り当てます。	C- = AはC = C-Aと同等です
* =（乗算と割り当て）	右のオペランドと左のオペランドを乗算し、その結果を左のオペランドに割り当てます。	C * = AはC = C * Aと同等です
/ =（分割と割り当て）	左のオペランドを右のオペランドで除算し、その結果を左のオペランドに割り当てます。

Note −同じ論理がビット演算子にも適用されるため、<< =、>> =、>> =、＆=、| =、および^ =になります。

その他の演算子

否定演算子（-）

値の符号を変更します。例を見てみましょう。

var x:number = 4 
var y = -x; 
console.log("value of x: ",x);   //outputs 4 
console.log("value of y: ",y);   //outputs -4

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

//Generated by typescript 1.8.10
var x = 4;
var y = -x;
console.log("value of x: ", x);   //outputs 4
console.log("value of y: ", y);   //outputs -4

次の出力が生成されます-

value of x:  4 
value of y:  -4

文字列演算子：連結演算子（+）

+演算子を文字列に適用すると、2番目の文字列が最初の文字列に追加されます。次の例は、この概念を理解するのに役立ちます。

var msg:string = "hello"+"world" 
console.log(msg)

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

//Generated by typescript 1.8.10
var msg = "hello" + "world";
console.log(msg);

次の出力が生成されます-

helloworld

連結操作では、文字列間にスペースは追加されません。1つのステートメントで複数の文字列を連結できます。

条件演算子（？）

この演算子は、条件式を表すために使用されます。条件演算子は、三項演算子と呼ばれることもあります。構文は次のとおりです-

Test ? expr1 : expr2

• Test −条件式を参照します

• expr1 −条件が真の場合に返される値

• expr2 −条件がfalseの場合に返される値

次のコードを見てみましょう-

var num:number = -2 
var result = num > 0 ?"positive":"non-positive" 
console.log(result)

2行目は、変数の値が numゼロより大きい。場合num がゼロより大きい値に設定されている場合は、文字列「positive」が返されます。それ以外の場合は、文字列「non-positive」が返されます。

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

//Generated by typescript 1.8.10
var num = -2;
var result = num > 0 ? "positive" : "non-positive";
console.log(result);

上記のコードスニペットは、次の出力を生成します-

non-positive

タイプ演算子

typeof演算子

単項演算子です。この演算子は、オペランドのデータ型を返します。次の例を見てください-

var num = 12 
console.log(typeof num);   //output: number

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

//Generated by typescript 1.8.10
var num = 12;
console.log(typeof num);   //output: number

次の出力が生成されます-

number

instanceof

この演算子は、オブジェクトが指定されたタイプであるかどうかをテストするために使用できます。の用法instanceof 演算子については、この章で説明します classes。

意思決定構造では、プログラマーが、プログラムによって評価またはテストされる1つ以上の条件と、条件が真であると判断された場合に実行される1つまたは複数のステートメント、およびオプションで、条件はfalseと判断されます。

以下に示すのは、ほとんどのプログラミング言語に見られる典型的な意思決定構造の一般的な形式です。

意思決定構造は、命令が実行される前に条件を評価します。TypeScriptの意思決定構造は次のように分類されます-

S.No.	ステートメントと説明
1.1。	ifステートメント 'if'ステートメントは、ブール式とそれに続く1つ以上のステートメントで構成されます。
2.2。	if ... elseステートメント 'if'ステートメントの後にオプションの 'else'ステートメントを続けることができます。これは、ブール式がfalseの場合に実行されます。
3.3。	else…ifおよびネストされたifステートメント 1つの 'if'または 'elseif'ステートメントを別の 'if'または 'elseif'ステートメント内で使用できます。
4.4。	switchステートメント 'switch'ステートメントを使用すると、変数を値のリストに対してテストできます。

コードのブロックを数回実行する必要がある場合があります。一般に、ステートメントは順番に実行されます。関数の最初のステートメントが最初に実行され、次に2番目のステートメントが実行されます。

プログラミング言語は、より複雑な実行パスを可能にするさまざまな制御構造を提供します。

ループステートメントを使用すると、ステートメントまたはステートメントのグループを複数回実行できます。以下に示すのは、ほとんどのプログラミング言語でのループステートメントの一般的な形式です。

TypeScriptは、ループ要件を処理するためにさまざまなタイプのループを提供します。次の図は、ループの分類を示しています-

明確なループ

反復回数が明確/固定されているループは、 definite loop。ループのためには、明確なループの実装です。

S.No.	ループと説明
1.1。	forループ forループは、明確なループの実装です。

不定ループ

不定ループは、ループ内の反復回数が不確定または不明な場合に使用されます。

不定ループは、−を使用して実装できます。

S.No	ループと説明
1.1。	whileループ whileループは、指定された条件がtrueと評価されるたびに命令を実行します。
2.2。	一方を行います do ... whileループは、do ... whileループがループの最初の実行時に条件を評価しないことを除いて、whileループに似ています。

例：whileとdo..while

var n:number = 5 
while(n > 5) { 
   console.log("Entered while") 
} 
do { 
   console.log("Entered do…while") 
} 
while(n>5)

この例では、最初にwhileループを宣言しています。whileに渡された式がtrueと評価された場合にのみ、ループに入ります。この例では、nの値がゼロ以下であるため、式はfalseを返し、ループはスキップされます。

一方、do…whileループはステートメントを1回実行します。これは、最初の反復でブール式が考慮されていないためです。ただし、後続の反復では、whileが条件をチェックし、制御をループから外します。

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

//Generated by typescript 1.8.10
var n = 5;
while (n > 5) {
   console.log("Entered while");
}

do {
   console.log("Entered do…while");
} while (n > 5);

上記のコードは次の出力を生成します-

Entered do…while

ブレークステートメント

ザ・ breakステートメントは、構成から制御を取り除くために使用されます。使用するbreakループ内では、プログラムはループを終了します。その構文は次のとおりです-

構文

break

フロー図

例

ここで、次のサンプルコードを見てください-

var i:number = 1 
while(i<=10) { 
   if (i % 5 == 0) {   
      console.log ("The first multiple of 5  between 1 and 10 is : "+i) 
      break     //exit the loop if the first multiple is found 
   } 
   i++ 
}  //outputs 5 and exits the loop

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

//Generated by typescript 1.8.10
var i = 1;

while (i <= 10) {
   if (i % 5 == 0) {
      console.log("The first multiple of 5  between 1 and 10 is : " + i);
      break; //exit the loop if the first multiple is found
   }
   i++;
} //outputs 5 and exits the loop

次の出力が生成されます-

The first multiple of 5  between 1 and 10 is : 5

継続ステートメント

ザ・ continueステートメントは、現在の反復で後続のステートメントをスキップし、制御をループの最初に戻します。breakステートメントとは異なり、continueはループを終了しません。現在の反復を終了し、次の反復を開始します。

構文

continue

フローチャート

例

継続ステートメントの例を以下に示します-

var num:number = 0
var count:number = 0;

for(num=0;num<=20;num++) {
   if (num % 2==0) {
      continue
   }
   count++
}
console.log (" The count of odd values between 0 and 20 is: "+count)    //outputs 10

上記の例は、0から20までの偶数値の数を表示します。数が偶数の場合、ループは現在の反復を終了します。これは、continue ステートメント。

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

//Generated by typescript 1.8.10
var num = 0;
var count = 0;

for (num = 0; num <= 20; num++) {
   if (num % 2 == 0) {
      continue;
   }
   count++;
}
console.log(" The count of odd values between 0 and 20 is: " + count);     //outputs 10

出力

The count of odd values between 0 and 20 is: 10

無限ループ

無限ループは、無限に実行されるループです。ザ・for ループと while ループを使用して、無限ループを作成できます。

構文：forループを使用した無限ループ

for(;;) { 
   //statements 
}

例：forループを使用した無限ループ

for(;;) { 
   console.log(“This is an endless loop”) 
}

構文：whileループを使用した無限ループ

while(true) { 
   //statements 
}

例：whileループを使用した無限ループ

while(true) { 
   console.log(“This is an endless loop”) 
}

関数は、読み取り可能、保守可能、および再利用可能なコードの構成要素です。関数は、特定のタスクを実行するための一連のステートメントです。関数は、プログラムをコードの論理ブロックに編成します。定義すると、関数を呼び出してコードにアクセスできます。これにより、コードが再利用可能になります。さらに、関数を使用すると、プログラムのコードを簡単に読み取って保守できます。

関数宣言は、関数の名前、戻り値の型、およびパラメーターについてコンパイラーに通知します。関数定義は、関数の実際の本体を提供します。

シニア番号	機能と説明
1.1。	関数の定義 関数定義は、特定のタスクが実行される内容と方法を指定します。
2.2。	関数の呼び出し 関数を実行するには、関数を呼び出す必要があります。
3.3。	関数を返す 関数は、制御とともに値を呼び出し元に返すこともできます。
4.4。	パラメータ化された関数 パラメータは、関数に値を渡すメカニズムです。

オプションのパラメータ

関数の実行のために引数を強制的に渡す必要がない場合は、オプションのパラメーターを使用できます。パラメータの名前に疑問符を追加することで、パラメータをオプションとしてマークできます。オプションのパラメータは、関数の最後の引数として設定する必要があります。オプションのパラメータで関数を宣言する構文は次のとおりです。

function function_name (param1[:type], param2[:type], param3[:type])

例：オプションのパラメーター

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","[email protected]");

• 上記の例では、パラメーター化された関数を宣言しています。ここで、3番目のパラメーター、つまりmail_idはオプションのパラメーターです。

• 関数呼び出し中にオプションのパラメーターに値が渡されない場合、パラメーターの値はundefinedに設定されます。

• この関数は、引数に値が渡された場合にのみmail_idの値を出力します。

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

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "[email protected]");

上記のコードは次の出力を生成します-

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

残りのパラメーター

残りのパラメーターは、Javaの変数引数に似ています。RESTパラメーターは、関数に渡すことができる値の数を制限しません。ただし、渡される値はすべて同じタイプである必要があります。つまり、restパラメーターは、同じタイプの複数の引数のプレースホルダーとして機能します。

残りのパラメーターを宣言するには、パラメーター名の前に3つのピリオドを付けます。非restパラメーターは、restパラメーターの前に配置する必要があります。

例：RESTパラメーター

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

• 関数addNumbers（）宣言は、残りのパラメータの受け入れNUMSを。残りのパラメータのデータ型は配列に設定する必要があります。さらに、関数は最大で1つのrestパラメーターを持つことができます。

• この関数は、それぞれ3つと6つの値を渡すことにより、2回呼び出されます。

• forループは引数リストを反復処理し、関数に渡してそれらの合計を計算します。

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

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

上記のコードの出力は次のとおりです-

sum of numbers 6 
sum of numbers 50

デフォルトパラメータ

関数パラメーターには、デフォルトで値を割り当てることもできます。ただし、このようなパラメーターには、明示的に値を渡すこともできます。

構文

function function_name(param1[:type],param2[:type] = default_value) { 
}

Note −パラメータをオプションとして宣言すると同時にデフォルトとして宣言することはできません。

例：デフォルトパラメータ

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

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

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

その出力は次のとおりです-

Discount amount : 500 
Discount amount : 300

• この例では、関数calculate_discountを宣言しています。この関数には、価格とレートの2つのパラメーターがあります。

• パラメータレートの値は、デフォルトで0.50に設定されています。

• プログラムは関数を呼び出し、パラメーターpriceの値のみを関数に渡します。ここで、rateの値は0.50（デフォルト）です。

• 同じ関数が呼び出されますが、2つの引数があります。レートのデフォルト値は上書きされ、明示的に渡された値に設定されます。

匿名関数

識別子（関数名）にバインドされていない関数は、次のように呼び出されます。 anonymous functions。これらの関数は、実行時に動的に宣言されます。匿名関数は、標準関数と同じように、入力を受け入れて出力を返すことができます。通常、匿名関数は最初の作成後にアクセスできません。

変数には無名関数を割り当てることができます。このような式は関数式と呼ばれます。

構文

var res = function( [arguments] ) { ... }

例─単純な無名関数

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

コンパイル時に、JavaScriptで同じコードが生成されます。

次の出力が生成されます-

hello world

例─パラメーターを使用した無名関数

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

匿名関数は、渡された値の積を返します。

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

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

上記のコードの出力は次のとおりです-

24

関数式と関数宣言─それらは同義ですか？

関数式と関数宣言は同義ではありません。関数式とは異なり、関数宣言は関数名によってバインドされます。

2つの基本的な違いは、関数宣言は実行前に解析されることです。一方、関数式は、スクリプトエンジンが実行中に検出した場合にのみ解析されます。

JavaScriptパーサーは、メインコードフローで関数を検出すると、関数宣言を想定します。関数がステートメントの一部として提供される場合、それは関数式です。

関数コンストラクター

TypeScriptは、Function（）と呼ばれる組み込みのJavaScriptコンストラクターを使用した関数の定義もサポートしています。

構文

var res = new Function( [arguments] ) { ... }.

例

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

新しいFunction（）はコンストラクターの呼び出しであり、コンストラクターは関数参照を作成して返します。

コンパイル時に、JavaScriptで同じコードが生成されます。

上記のサンプルコードの出力は次のとおりです。

12

再帰関数とTypeScript関数

再帰は、結果に到達するまで関数呼び出しを繰り返し実行することにより、操作を反復処理する手法です。再帰は、ループ内から異なるパラメーターを使用して同じ関数を繰り返し呼び出す必要がある場合に最適です。

例–再帰

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

コンパイル時に、JavaScriptで同じコードが生成されます。

これがその出力です-

720

例：匿名再帰関数

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

コンパイル時に、JavaScriptで同じコードが生成されます。

その出力は次のとおりです-

Hello!!

ラムダ関数

Lambdaは、プログラミングにおける無名関数を指します。ラムダ関数は、無名関数を表す簡潔なメカニズムです。これらの関数は、Arrow functions。

ラムダ関数-解剖学

ラムダ関数には3つの部分があります-

• Parameters −関数はオプションでパラメータを持つことができます

• The fat arrow notation/lambda notation (=>) −これはgoesto演算子とも呼ばれます

• Statements −関数の命令セットを表します

Tip −慣例により、コンパクトで正確な関数宣言のために、1文字のパラメーターの使用が推奨されます。

ラムダ式

これは、1行のコードを指す無名関数式です。その構文は次のとおりです-

( [param1, parma2,…param n] )=>statement;

例：ラムダ式

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

プログラムはラムダ式関数を宣言します。この関数は、渡された引数と10の合計を返します。

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

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

上記のコードの出力は次のとおりです-

110

ラムダステートメント

Lambdaステートメントは、コードのブロックを指す無名関数宣言です。この構文は、関数本体が複数行にまたがる場合に使用されます。その構文は次のとおりです-

( [param1, parma2,…param n] )=> {
 
   //code block
}

例：Lambdaステートメント

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

関数の参照が返され、変数に格納されます foo。

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

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

上記のプログラムの出力は次のとおりです。

110

構文のバリエーション

パラメータタイプ推論

パラメータのデータ型を指定する必要はありません。このような場合、パラメータのデータ型は任意です。次のコードスニペットを見てみましょう-

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

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

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

その出力は次のとおりです-

12 is numeric 
Tom is a string

単一パラメーターのオプションの括弧

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

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

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

その出力は次のとおりです-

The function got 12

単一ステートメントの場合はオプションの中括弧、パラメーターなしの場合は空の括弧

次の例は、これら2つの構文上のバリエーションを示しています。

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

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

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

その出力は次のとおりです-

Function invoked

関数の過負荷

関数には、提供された入力に基づいて異なる動作をする機能があります。言い換えると、プログラムは、実装が異なる同じ名前の複数のメソッドを持つことができます。このメカニズムは、関数のオーバーロードと呼ばれます。TypeScriptは、関数のオーバーロードをサポートします。

TypeScriptで関数をオーバーロードするには、以下の手順に従う必要があります-

Step 1−名前は同じで、関数のシグネチャが異なる複数の関数を宣言します。関数シグネチャには次のものが含まれます。

• The data type of the parameter

function disp(string):void; 
function disp(number):void;

• The number of parameters

function disp(n1:number):void; 
function disp(x:number,y:number):void;

• The sequence of parameters

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Note −関数のシグネチャには、関数の戻り値の型が含まれていません。

Step 2−宣言の後に関数定義を続ける必要があります。パラメータタイプは次のように設定する必要がありますany過負荷時にパラメータタイプが異なる場合。さらに、case b 上で説明したように、関数定義中に1つ以上のパラメーターをオプションとしてマークすることを検討できます。

Step 3 −最後に、関数を呼び出して機能させる必要があります。

例

次のサンプルコードを見てみましょう-

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

• 最初の2行は、関数のオーバーロード宣言を示しています。関数には2つのオーバーロードがあります-

  • 単一の文字列パラメータを受け入れる関数。

  • タイプnumberとstringの2つの値をそれぞれ受け入れる関数。

• 3行目は関数を定義します。パラメータのデータ型は次のように設定されますany。さらに、2番目のパラメーターはここではオプションです。

• オーバーロードされた関数は、最後の2つのステートメントによって呼び出されます。

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

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

上記のコードは次の出力を生成します-

abc 
1 
xyz

JavaScriptのようなTypeScriptは、数値オブジェクトとして数値をサポートします。数値オブジェクトは、数値リテラルを数値クラスのインスタンスに変換します。Numberクラスはラッパーとして機能し、数値リテラルをオブジェクトとして操作できるようにします。

構文

var var_name = new Number(value)

数値以外の引数が引数としてNumberのコンストラクターに渡された場合、NaN（Not–a–Number）が返されます。

次の表に、Numberオブジェクトの一連のプロパティを示します。

S.No.	プロパティと説明
1.1。	MAX_VALUE JavaScriptの数値で可能な最大値は、1.7976931348623157E +308です。
2.2。	MIN_VALUE JavaScriptの数値で可能な最小値は5E-324です。
3.3。	NaN 数値ではない値に等しい。
4.4。	NEGATIVE_INFINITY MIN_VALUE未満の値。
5.5。	POSITIVE_INFINITY MAX_VALUEより大きい値。
6.6。	prototype Numberオブジェクトの静的プロパティ。プロトタイププロパティを使用して、現在のドキュメントのNumberオブジェクトに新しいプロパティとメソッドを割り当てます。
7。	constructor このオブジェクトのインスタンスを作成した関数を返します。デフォルトでは、これはNumberオブジェクトです。

例

console.log("TypeScript Number Properties: "); 
console.log("Maximum value that a number variable can hold: " + Number.MAX_VALUE); 
console.log("The least value that a number variable can hold: " + Number.MIN_VALUE); 
console.log("Value of Negative Infinity: " + Number.NEGATIVE_INFINITY); 
console.log("Value of Negative Infinity:" + Number.POSITIVE_INFINITY);

コンパイル時に、JavaScriptで同じコードが生成されます。

その出力は次のとおりです-

TypeScript Number Properties:  
Maximum value that a number variable can hold: 1.7976931348623157e+308 
The least value that a number variable can hold: 5e-324 
Value of Negative Infinity: -Infinity 
Value of Negative Infinity:Infinity

例：NaN

var month = 0 
if( month<=0 || month >12) { 
   month = Number.NaN 
   console.log("Month is "+ month) 
} else { 
   console.log("Value Accepted..") 
}

コンパイル時に、JavaScriptで同じコードが生成されます。

その出力は次のとおりです-

Month is NaN

例：prototye

function employee(id:number,name:string) { 
   this.id = id 
   this.name = name 
} 

var emp = new employee(123,"Smith") 
employee.prototype.email = "[email protected]" 

console.log("Employee 's Id: "+emp.id) 
console.log("Employee's name: "+emp.name) 
console.log("Employee's Email ID: "+emp.email)

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

//Generated by typescript 1.8.10
function employee(id, name) {
   this.id = id;
   this.name = name;
}

var emp = new employee(123, "Smith");
employee.prototype.email = "[email protected]";

console.log("Employee 's Id: " + emp.id);
console.log("Employee's name: " + emp.name);
console.log("Employee's Email ID: " + emp.email);

その出力は次のとおりです-

Employee’s Id: 123 
Emaployee’s name: Smith 
Employee’s Email ID: [email protected]

数値メソッド

Numberオブジェクトには、すべてのオブジェクトの定義の一部であるデフォルトのメソッドのみが含まれています。一般的に使用される方法のいくつかを以下に示します-

S.No.	方法と説明
1.1。	toExponential（） JavaScriptが通常標準表記を使用する範囲内にある場合でも、数値を指数表記で表示するように強制します。
2.2。	toFixed（） 小数点の右側に特定の桁数で数値をフォーマットします。
3.3。	toLocaleString（） ブラウザのローカル設定によって異なる可能性のある形式で、現在の数値の文字列値バージョンを返します。
4.4。	toPrecision（） 数値を表示する合計桁数（小数点以下の桁数を含む）を定義します。負の精度はエラーをスローします。
5.5。	toString（） 数値の値の文字列表現を返します。関数には、数値を表すために使用する基数を指定する2〜36の整数である基数が渡されます。
6.6。	valueOf（） 数値のプリミティブ値を返します。

Stringオブジェクトを使用すると、一連の文字を操作できます。文字列プリミティブデータ型をいくつかのヘルパーメソッドでラップします。

構文

var var_name = new String(string);

Stringオブジェクトで使用可能なメソッドのリストとその説明を以下に示します-

S.No.	プロパティと説明
1.1。	コンストラクタ オブジェクトを作成したString関数への参照を返します。
2.2。	長さ 文字列の長さを返します。
3.3。	プロトタイプ プロトタイププロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

文字列メソッド

Stringオブジェクトで使用可能なメソッドのリストとその説明を以下に示します-

S.No.	方法と説明
1.1。	charAt（） 指定されたインデックスの文字を返します。
2.2。	charCodeAt（） 指定されたインデックスの文字のUnicode値を示す数値を返します。
3.3。	concat（） 2つの文字列のテキストを結合し、新しい文字列を返します。
4.4。	の指標（） 指定された値が最初に出現した呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。
5.5。	lastIndexOf（） 指定された値が最後に出現した呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。
6.6。	localeCompare（） 参照文字列がソート順で指定された文字列の前か後か、または同じかどうかを示す数値を返します。
7。	match() 正規表現を文字列と照合するために使用されます。
8.8。	replace（） 正規表現と文字列の間の一致を検索し、一致した部分文字列を新しい部分文字列に置き換えるために使用されます。
9.9。	探す（） 正規表現と指定された文字列の間の一致の検索を実行します。
10.10。	スライス（） 文字列のセクションを抽出し、新しい文字列を返します。
11.11。	スプリット（） 文字列を部分文字列に分割することにより、Stringオブジェクトを文字列の配列に分割します。
12.12。	substr（） 指定された場所から指定された文字数までの文字列内の文字を返します。
13.13。	substring（） 2つのインデックス間の文字列内の文字を文字列に返します。
14.14。	toLocaleLowerCase（） 文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。
15.15。	toLocaleUpperCase（） 文字列内の文字は、現在のロケールを尊重しながら大文字に変換されます。
16.16。	toLowerCase（） 小文字に変換された呼び出し文字列値を返します。
17.17。	toString（） 指定されたオブジェクトを表す文字列を返します。
18.18。	toUpperCase（） 大文字に変換された呼び出し文字列値を返します。
19。	valueOf（） 指定されたオブジェクトのプリミティブ値を返します。

変数を使用して値を格納すると、次の制限が発生します-

• 変数は本質的にスカラーです。つまり、変数宣言には一度に1つしか含めることができません。これは、プログラムにn個の値を格納するには、n個の変数宣言が必要になることを意味します。したがって、より多くの値のコレクションを格納する必要がある場合、変数の使用は実行できません。

• プログラム内の変数にはランダムな順序でメモリが割り当てられるため、宣言された順序で値を取得/読み取ることが困難になります。

TypeScriptは、同じことに取り組むために配列の概念を導入します。配列は、値の同種のコレクションです。簡単にするために、配列は同じデータ型の値のコレクションです。これはユーザー定義型です。

アレイの機能

これがアレイの機能のリストです-

• 配列宣言は、シーケンシャルメモリブロックを割り当てます。

• 配列は静的です。これは、一度初期化された配列のサイズを変更できないことを意味します。

• 各メモリブロックは配列要素を表します。

• 配列要素は、要素の添え字/インデックスと呼ばれる一意の整数によって識別されます。

• 変数と同様に、配列も使用する前に宣言する必要があります。varキーワードを使用して、配列を宣言します。

• 配列の初期化とは、配列要素にデータを入力することです。

• 配列要素の値は更新または変更できますが、削除することはできません。

配列の宣言と初期化

Typescriptで配列の初期化を宣言するには、次の構文を使用します-

構文

var array_name[:datatype];        //declaration 
array_name = [val1,val2,valn..]   //initialization

データ型のない配列宣言は、any型と見なされます。このような配列の型は、初期化中に配列の最初の要素のデータ型から推測されます。

たとえば、-のような宣言 var numlist:number[] = [2,4,6,8] 以下のような配列を作成します-

配列ポインタは、デフォルトで最初の要素を参照します。

Arrays may be declared and initialized in a single statement。同じ構文は次のとおりです。

var array_name[:data type] = [val1,val2…valn]

Note − []のペアは、配列の次元と呼ばれます。

配列要素へのアクセス

配列名の後に添え字が続くのは、配列要素を参照するために使用されます。その構文は次のとおりです-

array_name[subscript] = value

例：単純な配列

var alphas:string[]; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

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

//Generated by typescript 1.8.10
var alphas;
alphas = ["1", "2", "3", "4"];
console.log(alphas[0]);
console.log(alphas[1]);

上記のコードの出力は次のとおりです-

1 
2

例：単一ステートメントの宣言と初期化

var nums:number[] = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

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

//Generated by typescript 1.8.10
var nums = [1, 2, 3, 3];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

その出力は次のとおりです-

1 
2 
3 
3

配列オブジェクト

配列は、Arrayオブジェクトを使用して作成することもできます。配列コンストラクターを渡すことができます。

• 配列のサイズを表す数値または

• カンマ区切り値のリスト。

次の例は、このメソッドを使用して配列を作成する方法を示しています。

例

var arr_names:number[] = new Array(4)  

for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

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

//Generated by typescript 1.8.10
var arr_names = new Array(4);

for (var i = 0; i < arr_names.length; i++) {
   arr_names[i] = i * 2;
   console.log(arr_names[i]);
}

その出力は次のとおりです-

0 
2 
4 
6

例：配列コンストラクターはコンマ区切りの値を受け入れます

var names:string[] = new Array("Mary","Tom","Jack","Jill") 

for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

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

//Generated by typescript 1.8.10
var names = new Array("Mary", "Tom", "Jack", "Jill");
for (var i = 0; i < names.length; i++) {
   console.log(names[i]);
}

その出力は次のとおりです-

Mary 
Tom 
Jack 
Jill

配列メソッド

Arrayオブジェクトのメソッドのリストとその説明を以下に示します。

S.No.	方法と説明
1.1。	concat（） 他の配列や値と結合されたこの配列で構成される新しい配列を返します。
2.2。	every（） この配列のすべての要素が提供されたテスト関数を満たしている場合、trueを返します。
3.3。	フィルタ（） 提供されたフィルタリング関数がtrueを返す、この配列のすべての要素を使用して新しい配列を作成します。
4.4。	forEach（） 配列内の要素ごとに関数を呼び出します。
5.5。	の指標（） 指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。何も見つからない場合は-1を返します。
6.6。	join（） 配列のすべての要素を文字列に結合します。
7。	lastIndexOf（） 指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。何も見つからない場合は-1を返します。
8.8。	地図（） この配列のすべての要素で提供された関数を呼び出した結果を使用して、新しい配列を作成します。
9.9。	ポップ（） 配列から最後の要素を削除し、その要素を返します。
10.10。	押す（） 配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。
11.11。	reduce（） 配列の2つの値（左から右）に対して同時に関数を適用して、配列を1つの値に減らします。
12.12。	reduceRight（） 配列の2つの値（右から左）に対して同時に関数を適用して、配列を1つの値に減らします。
13.13。	逆行する（） 配列の要素の順序を逆にします。最初が最後になり、最後が最初になります。
14.14。	シフト（） 配列から最初の要素を削除し、その要素を返します。
15.15。	スライス（） 配列のセクションを抽出し、新しい配列を返します。
16.16。	いくつか（） この配列の少なくとも1つの要素が、提供されたテスト関数を満たしている場合、trueを返します。
17.17。	ソート（） 配列の要素を並べ替えます。
18.18。	スプライス（） 配列に要素を追加または削除します。
19。	toString（） 配列とその要素を表す文字列を返します。
20。	unshift（） 配列の前に1つ以上の要素を追加し、配列の新しい長さを返します。

アレイの破壊

エンティティの構造を分割することを指します。TypeScriptは、配列のコンテキストで使用される場合、破棄をサポートします。

例

var arr:number[] = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

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

//Generated by typescript 1.8.10
var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);

その出力は次のとおりです-

12 
13

for…inループを使用した配列トラバーサル

1つを使用することができます for…in 配列をトラバースするためのループ。

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 

for(j in nums) { 
   console.log(nums[j]) 
}

ループは、インデックスベースの配列トラバーサルを実行します。

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

//Generated by typescript 1.8.10
var j;
var nums = [1001, 1002, 1003, 1004];

for (j in nums) {
   console.log(nums[j]);
}

上記のコードの出力を以下に示します-

1001 
1002 
1003 
1004

TypeScriptの配列

TypeScriptは、配列で次の概念をサポートします-

S.No.	コンセプトと説明
1.1。	多次元配列 TypeScriptは多次元配列をサポートしています。多次元配列の最も単純な形式は、2次元配列です。
2.2。	関数に配列を渡す インデックスなしで配列の名前を指定することにより、配列へのポインタを関数に渡すことができます。
3.3。	関数から配列を返す 関数が配列を返すことを許可します

場合によっては、さまざまなタイプの値のコレクションを保存する必要があります。アレイはこの目的には役立ちません。TypeScriptは、そのような目的を達成するのに役立つタプルと呼ばれるデータ型を提供します。

これは、異種の値のコレクションを表します。言い換えると、タプルを使用すると、異なるタイプの複数のフィールドを格納できます。タプルは、パラメーターとして関数に渡すこともできます。

構文

var tuple_name = [value1,value2,value3,…value n]

例えば

var mytuple = [10,"Hello"];

Typescriptで空のタプルを宣言し、後で初期化することもできます。

var mytuple = []; 
mytuple[0] = 120 
mytuple[1] = 234

タプルの値へのアクセス

タプル値は個別にアイテムと呼ばれます。タプルはインデックスベースです。これは、タプル内のアイテムに、対応する数値インデックスを使用してアクセスできることを意味します。タプルアイテムのインデックスはゼロから始まり、n-1まで拡張されます（nはタプルのサイズです）。

構文

tuple_name[index]

例：単純なタプル

var mytuple = [10,"Hello"]; //create a  tuple 
console.log(mytuple[0]) 
console.log(mytuple[1])

上記の例では、タプル、 mytuple、が宣言されています。タプルには、それぞれ数値タイプと文字列タイプの値が含まれています。

コンパイル時に、JavaScriptで同じコードが生成されます。

その出力は次のとおりです-

10 
Hello

例：空のタプル

var tup = [] 
tup[0] = 12 
tup[1] = 23 

console.log(tup[0]) 
console.log(tup[1])

コンパイル時に、JavaScriptで同じコードが生成されます。

その出力は次のとおりです-

12 
23

タプル操作

TypeScriptのタプルは、新しいアイテムのプッシュ、タプルからのアイテムの削除など、さまざまな操作をサポートしています。

例

var mytuple = [10,"Hello","World","typeScript"]; 
console.log("Items before push "+mytuple.length)    // returns the tuple size 

mytuple.push(12)                                    // append value to the tuple 
console.log("Items after push "+mytuple.length) 
console.log("Items before pop "+mytuple.length) 
console.log(mytuple.pop()+" popped from the tuple") // removes and returns the last item
  
console.log("Items after pop "+mytuple.length)

• push（）はタプルにアイテムを追加します

• pop（）は、タプルの最後の値を削除して返します

コンパイル時に、JavaScriptで同じコードが生成されます。

上記のコードの出力は次のとおりです-

Items before push 4 
Items after push 5 
Items before pop 5 
12 popped from the tuple 
Items after pop 4

タプルの更新

タプルは変更可能です。つまり、タプル要素の値を更新または変更できます。

例

var mytuple = [10,"Hello","World","typeScript"]; //create a  tuple 
console.log("Tuple value at index 0 "+mytuple[0]) 

//update a tuple element 
mytuple[0] = 121     
console.log("Tuple value at index 0 changed to   "+mytuple[0])

コンパイル時に、JavaScriptで同じコードが生成されます。

上記のコードの出力は次のとおりです-

Tuple value at index 0 10 
Tuple value at index 0 changed to 121

タプルの破壊

破壊とは、エンティティの構造を破壊することです。TypeScriptは、タプルのコンテキストで使用される場合の破棄をサポートします。

例

var a =[10,"hello"] 
var [b,c] = a 
console.log( b )    
console.log( c )

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

//Generated by typescript 1.8.10
var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

その出力は次のとおりです-

10 
hello

TypeScript 1.4は、プログラムに1つまたは2つのタイプを組み合わせる機能を提供します。共用体型は、いくつかの型の1つになり得る値を表現するための強力な方法です。2つ以上のデータ型は、パイプ記号（|）を使用して結合され、共用体型を示します。つまり、共用体型は、縦棒で区切られた一連の型として記述されます。

構文：ユニオンリテラル

Type1|Type2|Type3

例：共用体型変数

var val:string|number 
val = 12 
console.log("numeric value of val "+val) 
val = "This is a string" 
console.log("string value of val "+val)

上記の例では、変数の型は共用体です。これは、変数に値として数値または文字列を含めることができることを意味します。

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

//Generated by typescript 1.8.10
var val;
val = 12;
console.log("numeric value of val " + val);
val = "This is a string";
console.log("string value of val " + val);

その出力は次のとおりです-

numeric value of val  12 
string value of val this is a string

例：共用体タイプと関数パラメーター

function disp(name:string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      
      for(i = 0;i<name.length;i++) { 
         console.log(name[i])
      } 
   } 
} 
disp("mark") 
console.log("Printing names array....") 
disp(["Mark","Tom","Mary","John"])

関数disp（）は、文字列型または文字列配列のいずれかの引数を受け入れることができます。

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

//Generated by typescript 1.8.10
function disp(name) {
   if (typeof name == "string") {
      console.log(name);
   } else {
      var i;
      for (i = 0; i < name.length; i++) {
         console.log(name[i]);
      }
   }
}

disp("mark");
console.log("Printing names array....");
disp(["Mark", "Tom", "Mary", "John"]);

出力は次のとおりです-

Mark 
Printing names array…. 
Mark 
Tom
Mary
John

共用体の型と配列

共用体タイプは、配列、プロパティ、およびインターフェイスにも適用できます。以下は、配列での共用体型の使用を示しています。

例：共用体の型と配列

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**numeric array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  

arr = ["Mumbai","Pune","Delhi"] 
console.log("**string array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

プログラムは配列を宣言します。配列は、数値コレクションまたは文字列コレクションのいずれかを表すことができます。

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

//Generated by typescript 1.8.10
var arr;
var i;
arr = [1, 2, 4];
console.log("**numeric array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
arr = ["Mumbai", "Pune", "Delhi"];
console.log("**string array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

その出力は次のとおりです-

**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi

インターフェイスは、エンティティが準拠する必要のある構文上のコントラクトです。言い換えると、インターフェースは、エンティティが従わなければならない構文を定義します。

インターフェイスは、インターフェイスのメンバーであるプロパティ、メソッド、およびイベントを定義します。インターフェイスには、メンバーの宣言のみが含まれます。メンバーを定義するのは、派生クラスの責任です。多くの場合、派生クラスが従う標準構造を提供するのに役立ちます。

オブジェクトを考えてみましょう-

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

オブジェクトの署名を考慮すると、次のようになります。

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

オブジェクト間で署名を再利用するために、それをインターフェースとして定義できます。

インターフェイスの宣言

interfaceキーワードは、インターフェイスを宣言するために使用されます。インターフェイスを宣言するための構文は次のとおりです-

構文

interface interface_name { 
}

例：インターフェースとオブジェクト

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

この例では、インターフェースを定義しています。得意先オブジェクトのタイプはIPersonです。したがって、インターフェイスで指定されたすべてのプロパティを定義するために、オブジェクトにバインドされます。

次の署名を持つ別のオブジェクトは、そのオブジェクトがそのサイズまたは署名によって処理されるため、引き続きIPersonと見なされます。

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

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

上記のサンプルコードの出力は次のとおりです。

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

インターフェースはJavaScriptに変換されません。これはTypeScriptの一部にすぎません。TS Playgroundツールのスクリーンショットを見ると、クラスとは異なり、インターフェイスを宣言するときにJavaスクリプトが発行されていません。したがって、インターフェースは実行時のJavaScriptへの影響はありません。

共用体のタイプとインターフェース

次の例は、UnionTypeとInterfaceの使用法を示しています-

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

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

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

その出力は次のとおりです-

Hello 
Hello 
World 
**Hello World**

インターフェースと配列

インターフェイスは、配列が使用するキーの種類と、配列に含まれるエントリの種類の両方を定義できます。インデックスは、文字列型または数値型にすることができます。

例

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

インターフェースと継承

インターフェイスは、他のインターフェイスによって拡張できます。つまり、インターフェイスは他のインターフェイスから継承できます。Typescriptを使用すると、インターフェイスを複数のインターフェイスから継承できます。

extendsキーワードを使用して、インターフェース間の継承を実装します。

構文：単一インターフェースの継承

Child_interface_name extends super_interface_name

構文：複数のインターフェースの継承

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

例：単純なインターフェースの継承

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

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

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

その出力は次のとおりです-

Age: 27 
Instrument: Drums

例：複数のインターフェースの継承

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+this.v1+" value 2: "+this.v2)

オブジェクトIobjは、タイプインタフェースリーフです。継承によるインターフェイスリーフには、それぞれv1とv2の2つの属性があります。したがって、オブジェクトIobjにはこれらの属性が含まれている必要があります。

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

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

上記のコードの出力は次のとおりです-

value 1: 12   value 2: 23

TypeScriptはオブジェクト指向のJavaScriptです。TypeScriptは、クラス、インターフェイスなどのオブジェクト指向プログラミング機能をサポートします。OOPに関するクラスは、オブジェクトを作成するための青写真です。クラスは、オブジェクトのデータをカプセル化します。Typescriptは、クラスと呼ばれるこの概念の組み込みサポートを提供します。JavaScriptES5以前はクラスをサポートしていませんでした。TypescriptはES6からこの機能を取得します。

クラスの作成

classキーワードを使用して、TypeScriptでクラスを宣言します。同じ構文を以下に示します-

構文

class class_name { 
   //class scope 
}

classキーワードの後に​​クラス名が続きます。クラスに名前を付けるときは、識別子の規則を考慮する必要があります。

クラス定義には、次のものを含めることができます。

• Fields−フィールドは、クラスで宣言された任意の変数です。フィールドは、オブジェクトに関連するデータを表します

• Constructors −クラスのオブジェクトにメモリを割り当てる責任があります

• Functions−関数は、オブジェクトが実行できるアクションを表します。それらは、メソッドと呼ばれることもあります

これらのコンポーネントをまとめて、クラスのデータメンバーと呼びます。

typescriptのクラスPersonについて考えてみます。

class Person {
}

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

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

例：クラスの宣言

class Car { 
   //field 
   engine:string; 
 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  

   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

この例では、クラスCarを宣言しています。このクラスには、engineという名前のフィールドがあります。ザ・varフィールドの宣言中にキーワードは使用されません。上記の例では、クラスのコンストラクターを宣言しています。

コンストラクターは、クラスの変数の初期化を担当するクラスの特別な関数です。TypeScriptは、constructorキーワードを使用してコンストラクターを定義します。コンストラクターは関数であるため、パラメーター化できます。

ザ・ thisキーワードは、クラスの現在のインスタンスを参照します。ここで、パラメータ名とクラスのフィールドの名前は同じです。したがって、あいまいさを避けるために、クラスのフィールドの前にはthis キーワード。

disp（）は単純な関数定義です。ここではfunctionキーワードは使用されていないことに注意してください。

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

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Engine is  :   " + this.engine);
   };
   return Car;
}());

インスタンスオブジェクトの作成

クラスのインスタンスを作成するには、 newキーワードの後に​​クラス名が続きます。同じ構文を以下に示します-

構文

var object_name = new class_name([ arguments ])

• ザ・ new キーワードはインスタンス化を担当します。

• 式の右辺はコンストラクターを呼び出します。パラメータ化されている場合、コンストラクタには値を渡す必要があります。

例：クラスのインスタンス化

var obj = new Car("Engine 1")

属性と関数へのアクセス

クラスの属性と関数には、オブジェクトを介してアクセスできます。使用 ' 。'クラスのデータメンバーにアクセスするためのドット表記（ピリオドと呼ばれる）。

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

例：それらをまとめる

class Car { 
   //field 
   engine:string; 
   
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   //function 
   disp():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 

//create an object 
var obj = new Car("XXSY1")

//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  

//access the function
obj.disp()

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

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Function displays Engine is  :   " + this.engine);
   };
   return Car;
}());

//create an object
var obj = new Car("XXSY1");

//access the field
console.log("Reading attribute value Engine as :  " + obj.engine);

//access the function
obj.disp();

上記のコードの出力は次のとおりです-

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

クラスの継承

TypeScriptは、継承の概念をサポートしています。継承とは、既存のクラスから新しいクラスを作成するプログラムの機能です。新しいクラスを作成するために拡張されたクラスは、親クラス/スーパークラスと呼ばれます。新しく作成されたクラスは、子/サブクラスと呼ばれます。

クラスは、「extends」キーワードを使用して別のクラスから継承します。子クラスは、親クラスからプライベートメンバーとコンストラクターを除くすべてのプロパティとメソッドを継承します。

構文

class child_class_name extends parent_class_name

ただし、TypeScriptは多重継承をサポートしていません。

例：クラスの継承

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 

class Circle extends Shape { 
   disp():void { 
      console.log("Area of the circle:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

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

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shape = (function () {
   function Shape(a) {
      this.Area = a;
   }
   return Shape;
}());

var Circle = (function (_super) {
   __extends(Circle, _super);
   function Circle() {
      _super.apply(this, arguments);
   }
	
   Circle.prototype.disp = function () { 
      console.log("Area of the circle:  " + this.Area); 
   };
   return Circle;
}(Shape));

var obj = new Circle(223);
obj.disp();

上記のコードの出力は次のとおりです-

Area of the Circle: 223

上記の例では、クラスShapeを宣言しています。このクラスは、Circleクラスによって拡張されます。クラス間には継承関係があるため、子クラス、つまりクラスCarは、その親クラス属性、つまりエリアへの暗黙的なアクセスを取得します。

継承は次のように分類できます-

• Single −すべてのクラスは最大で1つの親クラスから拡張できます

• Multiple−クラスは複数のクラスから継承できます。TypeScriptは多重継承をサポートしていません。

• Multi-level −次の例は、マルチレベル継承がどのように機能するかを示しています。

例

class Root { 
   str:string; 
} 

class Child extends Root {} 
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  

var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

クラスLeafは、マルチレベルの継承により、RootクラスとChildクラスから属性を派生させます。

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

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var Root = (function () {
   function Root() {
   }
   return Root;
}());

var Child = (function (_super) {
   __extends(Child, _super);
   function Child() {
      _super.apply(this, arguments);
   }
   return Child;
}(Root));

var Leaf = (function (_super) {
   __extends(Leaf, _super);
   function Leaf() {
      _super.apply(this, arguments);
   }
   return Leaf;
}(Child));

var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

その出力は次のとおりです-

出力

hello

TypeScript─クラスの継承とメソッドのオーバーライド

メソッドのオーバーライドは、子クラスがスーパークラスのメソッドを再定義するメカニズムです。次の例は同じ-を示しています

class PrinterClass { 
   doPrint():void {
      console.log("doPrint() from Parent called…") 
   } 
} 

class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() 
      console.log("doPrint() is printing a string…")
   } 
} 

var obj = new StringPrinter() 
obj.doPrint()

superキーワードは、クラスの直接の親を参照するために使用されます。キーワードは、変数、プロパティ、またはメソッドのスーパークラスバージョンを参照するために使用できます。13行目は、doWork（）関数のスーパークラスバージョンを呼び出します。

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

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var PrinterClass = (function () {
   function PrinterClass() {
   }
   PrinterClass.prototype.doPrint = function () { 
      console.log("doPrint() from Parent called…"); 
   };
   return PrinterClass;
}());

var StringPrinter = (function (_super) {
   __extends(StringPrinter, _super);
	
   function StringPrinter() {
      _super.apply(this, arguments);
   }
	
   StringPrinter.prototype.doPrint = function () {
      _super.prototype.doPrint.call(this);
      console.log("doPrint() is printing a string…");
   };
	
   return StringPrinter;
}(PrinterClass));

var obj = new StringPrinter();
obj.doPrint();

上記のコードの出力は次のとおりです-

doPrint() from Parent called… 
doPrint() is printing a string…

静的キーワード

staticキーワードは、クラスのデータメンバーに適用できます。静的変数は、プログラムが実行を終了するまでその値を保持します。静的メンバーはクラス名で参照されます。

例

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

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

//Generated by typescript 1.8.10
var StaticMem = (function () {
   function StaticMem() {
   }
	
   StaticMem.disp = function () {
      console.log("The value of num is" + StaticMem.num);
   };
	
   return StaticMem;
}());

StaticMem.num = 12;     // initialize the static variable
StaticMem.disp();      // invoke the static method

上記のコードの出力は次のとおりです-

The value of num is 12

instanceof演算子

ザ・ instanceof オブジェクトが指定されたタイプに属している場合、演算子はtrueを返します。

例

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

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

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

上記のコードの出力は次のとおりです-

obj is an instance of Person True

データの隠蔽

クラスは、他のクラスのメンバーに対するデータメンバーの可視性を制御できます。この機能は、データの隠蔽またはカプセル化と呼ばれます。

オブジェクト指向は、アクセス修飾子またはアクセス指定子の概念を使用して、カプセル化の概念を実装します。アクセス指定子/修飾子は、定義するクラスの外部にあるクラスのデータメンバーの可視性を定義します。

TypeScriptでサポートされているアクセス修飾子は次のとおりです。

S.No.	アクセス指定子と説明
1.1。	public パブリックデータメンバーは、ユニバーサルアクセシビリティを備えています。クラスのデータメンバーはデフォルトでパブリックです。
2.2。	private プライベートデータメンバーは、これらのメンバーを定義するクラス内でのみアクセスできます。外部クラスメンバーがプライベートメンバーにアクセスしようとすると、コンパイラはエラーをスローします。
3.3。	protected 保護されたデータメンバーは、前者と同じクラス内のメンバー、および子クラスのメンバーからアクセスできます。

例

データ隠蔽がどのように機能するかを確認するために例を見てみましょう-

class Encapsulate { 
   str:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str)     //accessible 
console.log(obj.str2)   //compilation Error as str2 is private

このクラスには、それぞれパブリックメンバーとプライベートメンバーであるstr1とstr2の2つの文字列属性があります。クラスがインスタンス化されます。この例では、プライベート属性str2がそれを宣言するクラスの外部でアクセスされるため、コンパイル時エラーが返されます。

クラスとインターフェース

クラスはインターフェイスを実装することもできます。

interface ILoan { 
   interest:number 
} 

class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 

var obj = new AgriLoan(10,1) 
console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

クラスAgriLoanは、インターフェースLoanを実装します。したがって、プロパティを含めるためにクラスにバインドされていますinterest そのメンバーとして。

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

//Generated by typescript 1.8.10
var AgriLoan = (function () {
   function AgriLoan(interest, rebate) {
      this.interest = interest;
      this.rebate = rebate;
   }
   return AgriLoan;
}());

var obj = new AgriLoan(10, 1);
console.log("Interest is : " + obj.interest + " Rebate is : " + obj.rebate);

上記のコードの出力は次のとおりです-

Interest is : 10 Rebate is : 1

アン objectキーと値のペアのセットを含むインスタンスです。値は、スカラー値または関数、あるいは他のオブジェクトの配列にすることができます。構文は以下のとおりです-

構文

var object_name = { 
   key1: “value1”, //scalar value 
   key2: “value”,  
   key3: function() {
      //functions 
   }, 
   key4:[“content1”, “content2”] //collection  
};

上に示したように、オブジェクトには、スカラー値、関数、および配列やタプルなどの構造体を含めることができます。

例：オブジェクトリテラル表記

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
//access the object values 
console.log(person.firstname) 
console.log(person.lastname)

コンパイル時に、JavaScriptで同じコードが生成されます。

上記のコードの出力は次のとおりです-

Tom 
Hanks

TypeScriptタイプテンプレート

JavaScriptでオブジェクトリテラルを-として作成したとしましょう。

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
};

オブジェクトに何らかの値を追加したい場合、JavaScriptを使用すると必要な変更を加えることができます。後でpersonオブジェクトに関数を追加する必要があると仮定します。これは、これを行う方法です。

person.sayHello = function(){ return "hello";}

Typescriptで同じコードを使用すると、コンパイラはエラーを出します。これは、Typescriptでは、具象オブジェクトに型テンプレートが必要なためです。Typescriptのオブジェクトは、特定のタイプのインスタンスである必要があります。

これは、宣言でメソッドテンプレートを使用することで解決できます。

例：Typescriptタイプテンプレート

var person = {
   firstName:"Tom", 
   lastName:"Hanks", 
   sayHello:function() {  }  //Type template 
} 
person.sayHello = function() {  
   console.log("hello "+person.firstName)
}  
person.sayHello()

コンパイル時に、JavaScriptで同じコードが生成されます。

上記のコードの出力は次のとおりです-

hello Tom

オブジェクトをパラメータとして関数に渡すこともできます。

例：関数パラメーターとしてのオブジェクト

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
var invokeperson = function(obj: { firstname:string, lastname :string }) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson(person)

この例では、オブジェクトリテラルを宣言しています。関数式は、personオブジェクトを渡して呼び出されます。

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

//Generated by typescript 1.8.10
var person = {
   firstname: "Tom",
   lastname: "Hanks"
};

var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson(person);

その出力は次のとおりです-

first name :Tom 
last name :Hanks

匿名オブジェクトをその場で作成して渡すことができます。

例：匿名オブジェクト

var invokeperson = function(obj:{ firstname:string, lastname :string}) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

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

//Generated by typescript 1.8.10
var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });
invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });

その出力は次のとおりです-

first name :Sachin 
last name :Tendulkar

ダックタイピング

ダックタイピングでは、両方が同じプロパティセットを共有している場合、2つのオブジェクトは同じタイプであると見なされます。ダックタイピングは、オブジェクトの適合性を確認するために、実際のタイプではなく、オブジェクト内の特定のプロパティの存在を確認します。概念は一般的に次のフレーズで説明されます-

「アヒルのように歩き、アヒルのように泳ぎ、アヒルのように鳴く鳥を見ると、その鳥をアヒルと呼びます。」

TypeScriptコンパイラは、型の安全性を維持しながらオブジェクトをその場で作成できるダックタイピングシステムを実装しています。次の例は、インターフェイスを明示的に実装していないが、必要なすべてのメンバーを含むオブジェクトを関数に渡す方法を示しています。

例

interface IPoint { 
   x:number 
   y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
   var x = p1.x + p2.x 
   var y = p1.y + p2.y 
   return {x:x,y:y} 
} 

//Valid 
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  

//Error 
var newPoint2 = addPoints({x:1},{x:4,y:3})

名前空間は、関連するコードを論理的にグループ化する方法です。これは、変数宣言がグローバルスコープに入るJavaScriptとは異なり、TypeScriptに組み込まれています。同じプロジェクト内で複数のJavaScriptファイルが使用されると、同じ変数を上書きまたは誤解する可能性があり、「グローバル名前付け汚染問題」が発生します。 JavaScript。

名前空間の定義

名前空間の定義はキーワードで始まります namespace 次のように名前空間名が続きます-

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

名前空間の外部でアクセスする必要があるクラスまたはインターフェイスは、キーワードでマークする必要があります export。

別の名前空間のクラスまたはインターフェースにアクセスするには、構文はnamespaceName.classNameになります。

SomeNameSpaceName.SomeClassName;

最初の名前空間が別のTypeScriptファイルにある場合は、トリプルスラッシュ参照構文を使用して参照する必要があります。

/// <reference path = "SomeFileName.ts" />

次のプログラムは、名前空間の使用法を示しています-

FileName :IShape.ts 
---------- 
namespace Drawing { 
   export interface IShape { 
      draw(); 
   }
}  

FileName :Circle.ts 
---------- 
/// <reference path = "IShape.ts" /> 
namespace Drawing { 
   export class Circle implements IShape { 
      public draw() { 
         console.log("Circle is drawn"); 
      }  
      
      FileName :Triangle.ts 
      ---------- 
      /// <reference path = "IShape.ts" /> 
      namespace Drawing { 
         export class Triangle implements IShape { 
            public draw() { 
               console.log("Triangle is drawn"); 
            } 
         } 
         
         FileName : TestShape.ts 
         /// <reference path = "IShape.ts" />   
         /// <reference path = "Circle.ts" /> 
         /// <reference path = "Triangle.ts" />  
         function drawAllShapes(shape:Drawing.IShape) { 
            shape.draw(); 
         } 
         drawAllShapes(new Drawing.Circle());
         drawAllShapes(new Drawing.Triangle());
      }
   }
}

上記のコードは、次のコマンドを使用してコンパイルおよび実行できます。

tsc --out app.js TestShape.ts  

node app.js

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

//Generated by typescript 1.8.10
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn");
      };
      return Circle;
   }());
	
   Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));

/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn");
      };
      return Triangle;
   }());
   Drawing.Triangle = Triangle;
})(Drawing || (Drawing = {}));

/// <reference path = "IShape.ts" />
/// <reference path = "Circle.ts" />
/// <reference path = "Triangle.ts" />
function drawAllShapes(shape) {
   shape.draw();
}

drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

上記のコードをコンパイルして実行すると、次の結果が得られます。

Circle is drawn 
Triangle is drawn

ネストされた名前空間

次のように、ある名前空間を別の名前空間内に定義できます。

namespace namespace_name1 { 
   export namespace namespace_name2 {
      export class class_name {    } 
   } 
}

次のようにドット（。）演算子を使用して、ネストされた名前空間のメンバーにアクセスできます。

FileName : Invoice.ts  
namespace tutorialPoint { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
} 
FileName: InvoiceTest.ts 

/// <reference path = "Invoice.ts" />
var invoice = new tutorialPoint.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

上記のコードは、次のコマンドを使用してコンパイルおよび実行できます。

tsc --out app.js InvoiceTest.ts 
node app.js

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

//Generated by typescript 1.8.10
var tutorialPoint;
(function (tutorialPoint) {
   var invoiceApp;
   (function (invoiceApp) {
      var Invoice = (function () {
         function Invoice() {
         }
         Invoice.prototype.calculateDiscount = function (price) {
            return price * .40;
         };
         return Invoice;
      }());
      invoiceApp.Invoice = Invoice;
   })(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {}));
	
})(tutorialPoint || (tutorialPoint = {}));
/// <reference path = "Invoice.ts" />

var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

上記のコードをコンパイルして実行すると、次の結果が得られます。

200

モジュールは、TypeScriptで記述されたコードを整理するという考えで設計されています。モジュールは大きく分けられます-

• 内部モジュール
• 外部モジュール

内部モジュール

内部モジュールは、Typescriptの以前のバージョンで提供されていました。これは、クラス、インターフェイス、関数を1つのユニットに論理的にグループ化するために使用され、別のモジュールにエクスポートできます。この論理グループは、TypeScriptの最新バージョンでは名前空間と呼ばれています。そのため、内部モジュールは廃止され、代わりに名前空間を使用できます。内部モジュールは引き続きサポートされますが、内部モジュールではなく名前空間を使用することをお勧めします。

内部モジュール構文（旧）

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

名前空間の構文（新規）

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

どちらの場合も生成されるJavaScriptは同じです

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

外部モジュール

TypeScriptの外部モジュールは、複数の外部間の依存関係を指定してロードするために存在します jsファイル。1つしかない場合jsファイルが使用されている場合、外部モジュールは関係ありません。従来、JavaScriptファイル間の依存関係の管理は、ブラウザーのスクリプトタグ（<script> </ script>）を使用して行われました。ただし、モジュールのロード中は非常に線形であるため、拡張可能ではありません。つまり、ファイルを次々にロードする代わりに、モジュールをロードする非同期オプションはありません。NodeJなどのサーバー用にjsをプログラミングしている場合、スクリプトタグすらありません。

扶養家族をロードするための2つのシナリオがあります js 単一のメインJavaScriptファイルからのファイル。

• クライアント側-RequireJs
• サーバーサイド-NodeJ

モジュールローダーの選択

外部JavaScriptファイルのロードをサポートするには、モジュールローダーが必要です。これは別のものになりますjs図書館。ブラウザの場合、使用される最も一般的なライブラリはRequieJSです。これは、AMD（非同期モジュール定義）仕様の実装です。AMDは、ファイルを次々にロードする代わりに、相互に依存している場合でも、すべてを個別にロードできます。

外部モジュールの定義

CommonJSまたはAMDを対象とするTypeScriptで外部モジュールを定義する場合、各ファイルはモジュールと見なされます。したがって、外部モジュールで内部モジュールを使用することはオプションです。

TypeScriptをAMDからCommonJsモジュールシステムに移行する場合、追加の作業は必要ありません。変更する必要があるのはコンパイラフラグだけです。JavaScriptとは異なり、CommonJからAMDへの移行、またはその逆の移行にはオーバーヘッドがあります。

外部モジュールを宣言するための構文は、キーワード「export」および「import」を使用しています。

構文

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

宣言されたモジュールを別のファイルで使用するには、以下に示すようにimportキーワードを使用します。ファイル名は指定されているだけで、拡張子は使用されていません。

import someInterfaceRef = require(“./SomeInterface”);

例

例を使ってこれを理解しましょう。

// IShape.ts 
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
} 

// Triangle.ts 
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
   
// TestShape.ts 
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  

function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 

drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

AMDシステムのメインTypeScriptファイルをコンパイルするコマンドは次のとおりです。

tsc --module amd TestShape.ts

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

ファイル：IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

ファイル：Circle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

ファイル：Triangle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});

ファイル：TestShape.js

//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

メインのTypeScriptファイルをコンパイルするコマンド Commonjs システムは

tsc --module commonjs TestShape.ts

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

ファイル：Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

ファイル：Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

ファイル：TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

出力

Cirlce is drawn (external module)
Triangle is drawn (external module)

アンビエント宣言は、実際のソースコードが他の場所に存在することをTypeScriptコンパイラに伝える方法です。あなたがたくさんの第三者を消費しているときjsjquery / angularjs / nodejsのようなライブラリでは、TypeScriptで書き直すことはできません。これらのライブラリを使用しながら型安全性とインテリセンスを確保することは、TypeScriptプログラマーにとって困難です。アンビエント宣言は、他の宣言をシームレスに統合するのに役立ちますjs TypeScriptへのライブラリ。

アンビエントの定義

アンビエント宣言は、慣例により、次の拡張子（d.ts）の型宣言ファイルに保持されます。

Sample.d.ts

上記のファイルはJavaScriptにトランスコンパイルされません。型安全性とインテリセンスに使用されます。

アンビエント変数またはモジュールを宣言するための構文は次のようになります-

構文

declare module Module_Name {
}

アンビエントファイルは、次のようにクライアントTypeScriptファイルで参照する必要があります-

/// <reference path = " Sample.d.ts" />

例

例を使ってこれを理解しましょう。これに似たコードを含むサードパーティのjavascriptライブラリが提供されていると仮定します。

FileName: CalcThirdPartyJsLib.js 
var TutorialPoint;  
(function (TutorialPoint) {  
   var Calc = (function () { 
      function Calc() { 
      } 
      Calc.prototype.doSum = function (limit) {
         var sum = 0; 
         
         for (var i = 0; i <= limit; i++) { 
            Calc.prototype.doSum = function (limit) {
               var sum = 0; 
               
               for (var i = 0; i <= limit; i++) { 
                  sum = sum + i; 
                  return sum; 
                  return Calc; 
                  TutorialPoint.Calc = Calc; 
               })(TutorialPoint || (TutorialPoint = {})); 
               var test = new TutorialPoint.Calc();
            }
         }
      }
   }
}

タイプスクリプトプログラマーとして、このライブラリをタイプスクリプトに書き直す時間はありません。ただし、型安全性を備えたdoSum（）メソッドを使用する必要があります。できることは、アンビエント宣言ファイルです。アンビエント宣言ファイルCalc.d.tsを作成しましょう

FileName: Calc.d.ts 
declare module TutorialPoint { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

アンビエントファイルには実装は含まれず、単なる型宣言です。次のように、宣言をtypescriptファイルに含める必要があります。

FileName : CalcTest.ts  
/// <reference path = "Calc.d.ts" /> 
var obj = new TutorialPoint.Calc(); 
obj.doSum("Hello"); // compiler error 
console.log(obj.doSum(10));

次のコード行は、コンパイラエラーを示しています。これは、宣言ファイルで入力パラメーターが数値になるように指定したためです。

obj.doSum("Hello");

上記の行をコメント化し、次の構文を使用してプログラムをコンパイルします-

tsc CalcTest.ts

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

//Generated by typescript 1.8.10
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");
console.log(obj.doSum(10));

コードを実行するために、以下に示すようにスクリプトタグを含むhtmlページを追加しましょう。コンパイルされたCalcTest.jsファイルとサードパーティのライブラリファイルCalcThirdPartyJsLib.jsを追加します。

<html> 
   <body style = "font-size:30px;"> 
      <h1>Ambient Test</h1> 
      <h2>Calc Test</h2> 
   </body> 
   
   <script src = "CalcThirdPartyJsLib.js"></script> 
   <script src = "CalcTest.js"></script> 
</html>

次のページが表示されます-

コンソールでは、次の出力を確認できます-

55

同様に、要件に基づいて、jquery.d.tsまたはangular.d.tsをプロジェクトに統合できます。