Typescript-quick-guide
TypeScript-概要
JavaScriptは、クライアント側の言語として導入されました。 Node.jsの開発は、JavaScriptを新しいサーバーサイドテクノロジーとしてもマークしています。 ただし、JavaScriptコードが大きくなると、コードが乱雑になる傾向があり、コードの保守と再利用が難しくなります。 さらに、オブジェクト指向、強力な型チェック、およびコンパイル時エラーチェックの機能を採用していないため、JavaScriptがエンタープライズレベルで本格的なサーバーサイドテクノロジーとして成功するのを妨げています。 TypeScript は、このギャップを埋めるために提示されました。
TypeScriptとは何ですか？
定義では、「TypeScriptはアプリケーション規模の開発のためのJavaScriptです。」
TypeScriptは、強く型付けされたオブジェクト指向のコンパイル言語です。 Microsoftの Anders Hejlsberg （C＃の設計者）によって設計されました。 TypeScriptは言語であり、ツールのセットでもあります。 TypeScriptは、JavaScriptにコンパイルされたJavaScriptの型付きスーパーセットです。 つまり、TypeScriptはJavaScriptといくつかの追加機能です。
TypeScriptの機能
*TypeScriptは単なるJavaScript* です。 TypeScriptはJavaScriptで始まり、JavaScriptで終わります。 Typescriptは、JavaScriptのプログラムの基本的な構成要素を採用しています。 したがって、TypeScriptを使用するにはJavaScriptを知っているだけで済みます。 すべてのTypeScriptコードは、実行のためにJavaScriptに相当するものに変換されます。TypeScriptは他のJSライブラリをサポートしています*。 コンパイルされたTypeScriptは、任意のJavaScriptコードから使用できます。 TypeScriptで生成されたJavaScriptは、既存のJavaScriptフレームワーク、ツール、およびライブラリをすべて再利用できます。
*JavaScriptはTypeScript* です。 これは、有効な *.js* ファイルを *.ts* に名前変更して、他のTypeScriptファイルでコンパイルできることを意味します。TypeScriptはポータブルです*。 TypeScriptは、ブラウザー、デバイス、およびオペレーティングシステム間で移植可能です。 JavaScriptが実行される任意の環境で実行できます。 対応するものとは異なり、TypeScriptは専用のVMや特定のランタイム環境を実行する必要がありません。
TypeScriptおよびECMAScript
ECMAScript仕様は、スクリプト言語の標準化された仕様です。 ECMA-262には6つのエディションが公開されています。 標準のバージョン6のコードネームは「Harmony」です。 TypeScriptはECMAScript6仕様に準拠しています。
TypeScriptは、ECMAScript5仕様、つまりJavaScriptの公式仕様から基本的な言語機能を採用しています。 モジュールやクラスベースのオリエンテーションなどのTypeScript言語機能は、EcmaScript 6仕様に準拠しています。 さらに、TypeScriptは、EcmaScript6仕様の一部ではないジェネリックや型注釈などの機能も採用しています。
TypeScriptを使用する理由
TypeScriptは、CoffeeScriptやDartプログラミング言語などの他の言語よりも優れており、TypeScriptがJavaScriptに拡張されています。 対照的に、Dart、CoffeeScriptなどの言語はそれ自体が新しい言語であり、言語固有の実行環境が必要です。
TypeScriptの利点は次のとおりです-
- コンパイル-JavaScriptはインタープリター言語です。 したがって、有効であることをテストするために実行する必要があります。 エラーが発生した場合に備えて、出力を検出しないためにすべてのコードを記述することを意味します。 したがって、コード内のバグを見つけるために何時間も費やす必要があります。 TypeScriptトランスパイラーは、エラーチェック機能を提供します。 TypeScriptは、何らかの構文エラーを検出すると、コードをコンパイルし、コンパイルエラーを生成します。 これは、スクリプトが実行される前にエラーを強調するのに役立ちます。
- Strong Static Typing -JavaScriptは強く型付けされていません。 TypeScriptには、TLS（TypeScript Language Service）によるオプションの静的型付けと型推論システムが付属しています。 型なしで宣言された変数の型は、その値に基づいてTLSによって推測される場合があります。
- TypeScriptは、既存のJavaScriptライブラリの型定義をサポートします*。 TypeScript定義ファイル（拡張子 .d.ts ）は、外部JavaScriptライブラリの定義を提供します。 したがって、TypeScriptコードにはこれらのライブラリを含めることができます。
- TypeScriptは、クラス、インターフェース、継承などのオブジェクト指向プログラミング*の概念をサポートしています。
TypeScriptのコンポーネント
その中心には、TypeScriptには次の3つのコンポーネントがあります-
- 言語-構文、キーワード、およびタイプの注釈で構成されます。
- * TypeScriptコンパイラ*-TypeScriptコンパイラ（tsc）は、TypeScriptで記述された命令をJavaScriptに相当するものに変換します。
- The TypeScript Language Service -"Language Service"は、エディターのようなアプリケーションであるコアコンパイラパイプラインの周りに追加のレイヤーを公開します。 言語サービスは、ステートメント補完、署名ヘルプ、コードのフォーマットとアウトライン、色付けなどの一般的なエディター操作の共通セットをサポートします。
宣言ファイル
TypeScriptスクリプトがコンパイルされると、コンパイルされたJavaScriptのコンポーネントへのインターフェースとして機能する*宣言ファイル*（拡張子は .d.ts ）を生成するオプションがあります。 宣言ファイルの概念は、C/C ++にあるヘッダーファイルの概念に似ています。 宣言ファイル（ .d.ts 拡張子を持つファイル）は、jQuery、MooToolsなどのJavaScriptライブラリの型、関数呼び出し、および変数サポートにインテリセンスを提供します。
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が表示されます。
*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）は、ソースからソースへのコンパイラー（トランスコンパイラー/トランスパイラー）です。
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 typescriptMac 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のダウンロード]。
- ステップ2 *-VSCodeSetup.exe セットアッププロセスの起動をダブルクリックして、セットアッププロセスを起動します。 これには数分しかかかりません。
- ステップ3 *-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プラグインをインストールします。
1つ以上の拡張Brackets Shellを追加することにより、Brackets内でDOSプロンプト/シェルを実行できます。
インストールすると、エディターの右側にシェルのアイコンが表示されますShell。 アイコンをクリックすると、以下に示すようにシェルウィンドウが表示されます-
注-Typescriptは、Visual Studio 2012および2013環境のプラグインとしても利用できますhttps://www.typescriptlang.org/#Download[(https://www.typescriptlang.org/#Download).VS] 2015および上記には、デフォルトでTypescriptプラグインが含まれています。
これで設定は完了です!!! Typescript-basic-syntax
TypeScript-タイプ
型システムは、言語でサポートされているさまざまなタイプの値を表します。 型システムは、プログラムによって保存または操作される前に、指定された値の有効性をチェックします。 これにより、コードが期待どおりに動作することが保証されます。 タイプシステムはさらに、より豊富なコードヒントと自動化されたドキュメントも可能にします。
TypeScriptは、オプションの型システムの一部としてデータ型を提供します。 データ型の分類は以下のとおりです-
Anyタイプ
*any* データ型は、TypeScriptのすべての型のスーパー型です。 これは動的タイプを示します。 *any* 型を使用することは、変数の型チェックをオプトアウトすることと同等です。組み込み型
次の表は、TypeScriptのすべての組み込み型を示しています-
| Data type | Keyword | Description |
|---|---|---|
| Number | number | Double precision 64-bit floating point values. It can be used to represent both, integers and fractions. |
| String | string | Represents a sequence of Unicode characters |
| Boolean | boolean | Represents logical values, true and false |
| Void | void | Used on function return types to represent non-returning functions |
| Null | null | Represents an intentional absence of an object value. |
| Undefined | undefined | Denotes value given to all uninitialized variables |
注-TypeScriptおよびJavaScriptには整数型はありません。
ヌルで未定義─それらは同じですか？
*null* および *undefined* データ型はしばしば混乱の原因になります。 nullおよびundefinedを使用して、変数のデータ型を参照することはできません。 変数に値としてのみ割り当てることができます。ただし、nullとundefinedは同じではありません。 未定義で初期化された変数は、変数に値またはオブジェクトが割り当てられていないことを意味し、nullは、値が未定義のオブジェクトに変数が設定されていることを意味します。
ユーザー定義タイプ
ユーザー定義型には、列挙（列挙）、クラス、インターフェース、配列、およびタプルが含まれます。 これらについては、後の章で詳しく説明します。
TypeScript-変数
定義により、変数は値を格納する「メモリ内の名前付きスペース」です。 つまり、プログラムの値のコンテナとして機能します。 TypeScript変数はJavaScriptの命名規則に従う必要があります-
- 変数名にはアルファベットと数字を含めることができます。
- アンダースコア（_）とドル（＆dollar;）記号を除き、スペースと特殊文字を含めることはできません。 *変数名は数字で始めることはできません。
変数は、使用する前に宣言する必要があります。* var *キーワードを使用して変数を宣言します。
TypeScriptでの変数宣言
TypeScriptで変数を宣言するための型構文は、変数名の後にコロン（:)を含め、その後にその型を含めることです。 JavaScriptと同様に、 var キーワードを使用して変数を宣言します。
あなたが変数を宣言するとき、あなたは4つのオプションがあります-
- 1つのステートメントでそのタイプと値を宣言します。
- タイプを宣言しますが、値は宣言しません。 この場合、変数は未定義に設定されます。
- 値を宣言しますが、型は宣言しません。 変数の型は、割り当てられた値のデータ型に設定されます。
*タイプではなく値も宣言します。 この場合、変数のデータ型はanyになり、未定義に初期化されます。次の表は、前述の変数宣言の有効な構文を示しています-
| S.No. | Variable Declaration Syntax & Description |
|---|---|
| 1. |
変数には、string型の値が格納されます |
| 2. |
var name:string; 変数は文字列変数です。 変数の値はデフォルトで未定義に設定されています |
| 3. |
var name = ”mary” 変数の型は、値のデータ型から推測されます。 ここでは、変数は文字列型です |
| 4. |
var name; 変数のデータ型はanyです。 その値はデフォルトで未定義に設定されています。 |
例：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 errorTypeScriptでの型アサーション
TypeScriptでは、変数をある型から別の型に変更できます。 TypeScriptは、このプロセスを_Type Assertion_と呼びます。 構文は、ターゲットタイプを<>記号の間に配置し、変数または式の前に配置します。 次の例は、この概念を説明します-
例
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));それは次の出力を生成します-
stringTypeScriptでの推論された入力
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変数は、次のスコープにすることができます-
- グローバルスコープ-グローバル変数はプログラミング構造の外側で宣言されます。 これらの変数には、コード内のどこからでもアクセスできます。
- クラススコープ-これらの変数は*フィールド*とも呼ばれます。 フィールドまたはクラス変数は、クラス内でメソッドの外部で宣言されます。 これらの変数は、クラスのオブジェクトを使用してアクセスできます。 フィールドは静的にすることもできます。 静的フィールドには、クラス名を使用してアクセスできます。
- ローカルスコープ-ローカル変数は、名前が示すように、メソッド、ループなどの構造内で宣言されます。 ローカル変数は、宣言されている構造内でのみアクセス可能です。
次の例は、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'.TypeScript-演算子
オペレーターとは？
演算子は、データに対して実行される機能を定義します。 演算子が機能するデータはオペランドと呼ばれます。 次の式を考慮してください-
*7＆plus; 5 = 12*ここでは、値7、5、および12は*オペランド*ですが、＆plus;および=は*演算子*です。
TypeScriptの主要な演算子は次のように分類できます-
- 算術演算子
- 論理演算子
- 関係演算子
- ビットごとの演算子
- 割り当て演算子
- 三項/条件演算子
- 文字列演算子
- タイプ演算子
算術演算子
変数aおよびbの値がそれぞれ10および5であると仮定します。
リンク：/typescript/typescript_arithmetic_operators_examples [例を表示]
| Operator | Description | Example |
|---|---|---|
| PLUS (Addition) | returns the sum of the operands | a PLUS b is 15 |
| - (Subtraction) | returns the difference of the values | a - b is 5 |
| AST (Multiplication) | returns the product of the values | a AST b is 50 |
| /(Division) | performs division operation and returns the quotient | a/b is 2 |
| % (Modulus) | performs division operation and returns the remainder | a % b is 0 |
| PLUSPLUS (Increment) | Increments the value of the variable by one | aPLUSPLUS is 11 |
| — (Decrement) | Decrements the value of the variable by one | a-- is 9 |
関係演算子
関係演算子は、2つのエンティティ間の関係の種類をテストまたは定義します。 関係演算子はブール値、つまりtrue/falseを返します。
Aの値が10で、Bが20であると仮定します。
link：/typescript/typescript_relational_operators_examples [例を表示]
| Operator | Description | Example |
|---|---|---|
| > | Greater than | (A > B) is False |
| < | Lesser than | (A < B) is True |
| >= | Greater than or equal to | (A >= B) is False |
| ⇐ | Lesser than or equal to | (A ⇐ B) is True |
| == | Equality | (A == B) is false |
| != | Not equal | (A != B) is True |
論理演算子
論理演算子は、2つ以上の条件を結合するために使用されます。 論理演算子もブール値を返します。 変数Aの値が10で、Bが20であると仮定します。
link：/typescript/typescript_logical_operators_examples [例を表示]
| Operator | Description | Example |
|---|---|---|
| && (And) | The operator returns true only if all the expressions specified return true | (A > 10 && B > 10) is False |
| (OR) | ||
| The operator returns true if at least one of the expressions specified return true | (A > 10 | |
| B >10) is True | ! (NOT) | The operator returns the inverse of the expression’s result. For E.g.: !(>5) returns false |
ビット演算子
変数A = 2およびB = 3を想定
リンク：/typescript/typescript_bitwise_operators_examples [例を表示]
| Operator | Description | Example |
|---|---|---|
| & (Bitwise AND) | It performs a Boolean AND operation on each bit of its integer arguments. | (A & B) is 2 |
| (BitWise OR) | It performs a Boolean OR operation on each bit of its integer arguments. | |
| (A | B) is 3 | ^ (Bitwise XOR) |
| It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. | (A ^ B) is 1 | ~ (Bitwise Not) |
| It is a unary operator and operates by reversing all the bits in the operand. | (~B) is -4 | << (Left Shift) |
| It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on. | (A << 1) is 4 | >> (Right Shift) |
| Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand. | (A >> 1) is 1 | >>> (Right shift with Zero) |
割り当て演算子
link：/typescript/typescript_assignment_operators_examples [例を表示]
| Operator | Description | Example |
|---|---|---|
| = (Simple Assignment) | Assigns values from the right side operand to the left side operand | C = A PLUS B will assign the value of A PLUS B into C |
| PLUS= (Add and Assignment) | It adds the right operand to the left operand and assigns the result to the left operand. | C PLUS= A is equivalent to C = C PLUS A |
| -= (Subtract and Assignment) | It subtracts the right operand from the left operand and assigns the result to the left operand. | C -= A is equivalent to C = C - A |
| AST= (Multiply and Assignment) | It multiplies the right operand with the left operand and assigns the result to the left operand. | C AST= A is equivalent to C = C AST A |
| /= (Divide and Assignment) | It divides the left operand with the right operand and assigns the result to the left operand. |
注意-ビット単位演算子にも同じロジックが適用されるため、⇐=、>> =、>> =、＆=、| =、^ =になります。
その他の演算子
否定演算子（-）
値の符号を変更します。 例を見てみましょう。
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文字列演算子：連結演算子（＆plus;）
＆plus;演算子を文字列に適用すると、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- テスト-条件式を参照
- expr1 -条件が真の場合に返される値
- expr2 -条件が偽の場合に返される値
次のコードを見てみましょう-
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それは次の出力を生成します-
numberinstanceof
この演算子は、オブジェクトが指定されたタイプであるかどうかをテストするために使用できます。 instanceof 演算子の使用については、 classes の章で説明します。
TypeScript-意思決定
意思決定構造では、プログラマーが、プログラムによって評価またはテストされる1つ以上の条件、および条件が真であると判断された場合に実行されるステートメント、およびオプションで、条件は偽と判断されます。
以下に示すのは、ほとんどのプログラミング言語で見られる典型的な意思決定構造の一般的な形式です-
意思決定構造は、命令が実行される前に条件を評価します。 TypeScriptの意思決定構造は次のように分類されます-
| S.No. | Statement & Description |
|---|---|
| 1. |
「if」ステートメントは、ブール式とそれに続く1つ以上のステートメントで構成されます。 |
| 2. |
「if」ステートメントの後にオプションの「else」ステートメントを続けることができます。これは、ブール式が偽の場合に実行されます。 |
| 3. |
else…if and nested if statements 1つの「if」または「else if」ステートメントを別の「if」または「else if」ステートメント内で使用できます。 |
| 4. |
「switch」ステートメントを使用すると、変数を値のリストに対してテストできます。 |
TypeScript-ループ
コードのブロックを複数回実行する必要がある場合、状況が発生する可能性があります。 一般に、ステートメントは順番に実行されます。関数の最初のステートメントが最初に実行され、次に2番目のステートメントが実行されます。
プログラミング言語は、より複雑な実行パスを可能にするさまざまな制御構造を提供します。
ループステートメントを使用すると、ステートメントまたはステートメントのグループを複数回実行できます。 以下に示すのは、ほとんどのプログラミング言語でのループステートメントの一般的な形式です。
TypeScriptは、ループ要件を処理するためのさまざまなタイプのループを提供します。 次の図は、ループの分類を示しています-
確定ループ
反復回数が確定/固定されているループは、*確定ループ*と呼ばれます。 _forループ_は、確定ループの実装です。
| S.No. | Loops & Description |
|---|---|
| 1. |
forループは、確定ループの実装です。 |
不定ループ
不定ループは、ループ内の反復回数が不確定または不明な場合に使用されます。
を使用して無限ループを実装することができます-
| S.No | Loops & Description |
|---|---|
| 1. |
whileループは、指定された条件がtrueと評価されるたびに命令を実行します。 |
| 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…whilebreakステートメント
*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 : 5continueステートメント
*continue* ステートメントは、現在の反復で後続のステートメントをスキップし、制御をループの先頭に戻します。 breakステートメントとは異なり、continueはループを終了しません。 現在の反復を終了し、後続の反復を開始します。構文
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”)
}TypeScript-関数
関数は、読み取り可能、保守可能、および再利用可能なコードの構成要素です。 関数は、特定のタスクを実行するための一連のステートメントです。 関数は、プログラムをコードの論理ブロックに編成します。 定義すると、コードにアクセスするために関数を呼び出すことができます。 これにより、コードが再利用可能になります。 さらに、関数を使用すると、プログラムのコードの読み取りと保守が簡単になります。
関数宣言は、関数の名前、戻り値の型、およびパラメーターについてコンパイラーに通知します。 関数定義は、関数の実際の本体を提供します。
| Sr.No | Funtions & Description |
|---|---|
| 1. |
関数定義は、特定のタスクの実行内容と方法を指定します。 |
| 2. |
関数を実行するには、関数を呼び出す必要があります。 |
| 3. |
関数は、制御とともに値を呼び出し元に戻すこともできます。 |
| 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はオプションのパラメーターです。
- 関数呼び出し中にオプションのパラメーターに値が渡されない場合、パラメーターの値は未定義に設定されます。
- この関数は、引数に値が渡された場合にのみ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の変数引数に似ています。 残りのパラメーターは、関数に渡すことができる値の数を制限しません。 ただし、渡される値はすべて同じタイプでなければなりません。 つまり、残りのパラメーターは、同じ型の複数の引数のプレースホルダーとして機能します。
残りのパラメーターを宣言するには、パラメーター名の前に3つのピリオドを付けます。 残りのパラメータは、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つの残りのパラメーターを持つことができます。
- 関数は、それぞれ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) {
}注-パラメータをオプションとデフォルトで同時に宣言することはできません。
例：デフォルトのパラメーター
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つのパラメーターがあります。
- パラメーター_rate_の値は、デフォルトで_0.50_に設定されています。
- プログラムは関数を呼び出し、パラメーターpriceの値のみを渡します。 ここで、rate_の値は_0.50（デフォルト）です
- 同じ関数が呼び出されますが、2つの引数があります。 _rate_のデフォルト値は上書きされ、明示的に渡された値に設定されます。
無名関数
識別子（関数名）にバインドされていない関数は、*匿名関数*と呼ばれます。 これらの関数は、実行時に動的に宣言されます。 無名関数は、標準関数と同様に、入力を受け入れて出力を返すことができます。 通常、匿名関数は最初の作成後はアクセスできません。
変数には匿名関数を割り当てることができます。 このような式は関数式と呼ばれます。
構文
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は、プログラミングにおける匿名関数を指します。 Lambda関数は、匿名関数を表す簡潔なメカニズムです。 これらの関数は、*矢印関数*とも呼ばれます。
ラムダ関数-解剖学
ラムダ関数には3つの部分があります-
- パラメータ-関数はオプションでパラメータを持つことができます
- 太い矢印表記/ラムダ表記（⇒）-行き先演算子としても呼び出されます
- ステートメント-関数の命令セットを表します
ヒント-慣例により、コンパクトで正確な関数宣言のために、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構文のバリエーション
パラメータタイプ推論
パラメーターのデータ型を指定することは必須ではありません。 このような場合、パラメーターのデータ型はanyです。 私たちは次のコードスニペットを見てみましょう-
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の関数をオーバーロードするには、以下の手順に従う必要があります-
- ステップ1 *-同じ名前で異なる関数シグネチャを持つ複数の関数を宣言します。 関数のシグネチャには次のものが含まれます。
- パラメータのデータ型
function disp(string):void;
function disp(number):void;- パラメーターの数
function disp(n1:number):void;
function disp(x:number,y:number):void;- パラメータのシーケンス
function disp(n1:number,s1:string):void;
function disp(s:string,n:number):void;注-関数のシグネチャには、関数の戻り値の型は含まれません。
ステップ2 *-宣言の後に関数定義を続ける必要があります。 パラメータタイプは、オーバーロード中にパラメータタイプが異なる場合は、 *any に設定する必要があります。 さらに、上記で説明した case b の場合、関数定義中に1つ以上のパラメーターをオプションとしてマークすることを検討できます。
- ステップ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つのオーバーロードがあります-
- 単一の文字列パラメーターを受け入れる関数。
- 型番号と文字列の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
xyzTypeScript-数字
JavaScriptのようなTypeScriptは、数値をNumberオブジェクトとしてサポートします。 数値オブジェクトは、数値リテラルを数値クラスのインスタンスに変換します。 Numberクラスはラッパーとして機能し、数値リテラルをオブジェクトとして操作できます。
構文
var var_name = new Number(value)数値以外の引数が引数としてNumberのコンストラクターに渡される場合、NaN（Not–a–Number）を返します
次の表は、Numberオブジェクトのプロパティのセットを示しています-
| S.No. | Property & Description |
|---|---|
| 1. |
MAX_VALUE JavaScriptの数値で可能な最大値は1.7976931348623157E＆plus; 308です。 |
| 2. |
MIN_VALUE JavaScriptの数値の最小値は5E-324です。 |
| 3. |
NaN 数値ではない値と等しい。 |
| 4. |
NEGATIVE_INFINITY MIN_VALUEより小さい値。 |
| 5. |
POSITIVE_INFINITY MAX_VALUEより大きい値。 |
| 6. |
prototype Numberオブジェクトの静的プロパティ。 prototypeプロパティを使用して、新しいプロパティとメソッドを現在のドキュメントの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例：プロトタイプ
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. | Methods & Description |
|---|---|
| 1. |
JavaScriptが通常標準表記を使用する範囲内にある場合でも、指数表記で数字を表示します。 |
| 2. |
小数点の右側に特定の桁数の数値をフォーマットします。 |
| 3. |
現在の数値の文字列値バージョンを、ブラウザーのローカル設定に応じて異なる形式で返します。 |
| 4. |
数値を表示する合計桁数（小数の左右の桁を含む）を定義します。 負の精度はエラーをスローします。 |
| 5. |
数値の値の文字列表現を返します。 関数には、数値の表現に使用する基数を指定する2〜36の整数である基数が渡されます。 |
| 6. |
数値のプリミティブ値を返します。 |
TypeScript-文字列
Stringオブジェクトを使用すると、一連の文字を操作できます。 文字列プリミティブデータ型をいくつかのヘルパーメソッドでラップします。
構文
var var_name = new String(string);文字列オブジェクトで使用可能なメソッドのリストとその説明を以下に示します-
| S.No. | Property & Description |
|---|---|
| 1. |
オブジェクトを作成したString関数への参照を返します。 |
| 2. |
文字列の長さを返します。 |
| 3. |
prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。 |
文字列メソッド
文字列オブジェクトで使用可能なメソッドのリストとその説明を以下に示します-
| S.No. | Method & Description |
|---|---|
| 1. |
指定されたインデックスにある文字を返します。 |
| 2. |
指定されたインデックスにある文字のUnicode値を示す数値を返します。 |
| 3. |
2つの文字列のテキストを結合し、新しい文字列を返します。 |
| 4. |
指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。 |
| 5. |
指定した値が最後に出現する呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。 |
| 6. |
参照文字列がソート順で指定された文字列の前後にあるか、同じかを示す数値を返します。 |
| 7. |
match() 正規表現を文字列と照合するために使用されます。 |
| 8. |
正規表現と文字列の一致を検出し、一致した部分文字列を新しい部分文字列で置き換えるために使用されます。 |
| 9. |
正規表現と指定された文字列の一致の検索を実行します。 |
| 10. |
文字列のセクションを抽出し、新しい文字列を返します。 |
| 11. |
文字列を部分文字列に分離することにより、文字列オブジェクトを文字列の配列に分割します。 |
| 12. |
指定した位置から指定した文字数までの文字列内の文字を返します。 |
| 13. |
2つのインデックス間の文字列内の文字を文字列に返します。 |
| 14. |
文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。 |
| 15. |
文字列内の文字は、現在のロケールを考慮しながら大文字に変換されます。 |
| 16. |
呼び出し文字列値を小文字に変換して返します。 |
| 17. |
指定されたオブジェクトを表す文字列を返します。 |
| 18. |
呼び出し文字列値を大文字に変換して返します。 |
| 19. |
指定されたオブジェクトのプリミティブ値を返します。 |
TypeScript-配列
変数を使用して値を保存するには、次の制限があります-
- 変数は本質的にスカラーです。 つまり、変数宣言には一度に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] のような宣言は、次のように配列を作成します-
配列ポインタはデフォルトで最初の要素を参照します。
配列は、単一のステートメントで宣言および初期化できます。 同じための構文は-
var array_name[:data type] = [val1,val2…valn]注-[]のペアは、配列の次元と呼ばれます。
配列要素へのアクセス
添字が続く配列名は、配列要素を参照するために使用されます。 その構文は次のとおりです-
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.
リンク：/typescript/typescript_array_concat [concat（）]
この配列を他の配列や値と結合した新しい配列を返します。
2.
リンク：/typescript/typescript_array_every [every（）]
この配列のすべての要素が提供されたテスト関数を満たす場合、trueを返します。
3.
リンク：/typescript/typescript_array_filter [filter（）]
指定されたフィルタリング関数がtrueを返すこの配列のすべての要素を使用して、新しい配列を作成します。
4.
リンク：/typescript/typescript_array_foreach [forEach（）]
配列内の各要素に対して関数を呼び出します。
5.
リンク：/typescript/typescript_array_indexof [indexOf（）]
指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。見つからない場合は-1を返します。
6.
リンク：/typescript/typescript_array_join [join（）]
配列のすべての要素を文字列に結合します。
7.
リンク：/typescript/typescript_array_lastindexof [lastIndexOf（）]
指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。見つからない場合は-1を返します。
8.
リンク：/typescript/typescript_array_map [map（）]
この配列のすべての要素で提供された関数を呼び出した結果で新しい配列を作成します。
9.
リンク：/typescript/typescript_array_pop [pop（）]
配列から最後の要素を削除し、その要素を返します。
10.
リンク：/typescript/typescript_array_push [push（）]
配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。
11.
リンク：/typescript/typescript_array_reduce [reduce（）]
配列の2つの値（左から右へ）に対して関数を同時に適用して、単一の値に減らします。
12.
リンク：/typescript/typescript_array_reduceright [reduceRight（）]
配列の2つの値（右から左）に対して関数を同時に適用して、単一の値に減らします。
13.
リンク：/typescript/typescript_array_reverse [reverse（）]
配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。
14.
リンク：/typescript/typescript_array_shift [shift（）]
配列から最初の要素を削除し、その要素を返します。
15.
リンク：/typescript/typescript_array_slice [slice（）]
配列のセクションを抽出し、新しい配列を返します。
16.
リンク：/typescript/typescript_array_some [some（）]
この配列の少なくとも1つの要素が提供されたテスト関数を満たす場合、trueを返します。
17.
リンク：/typescript/typescript_array_sort [sort（）]
配列の要素を並べ替えます。
18.
リンク：/typescript/typescript_array_splice [splice（）]
配列に要素を追加または削除します。
19.
リンク：/typescript/typescript_array_tostring [toString（）]
配列とその要素を表す文字列を返します。
20.
リンク：/typescript/typescript_array_unshift [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
13for…inループを使用した配列トラバーサル
*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
1004TypeScriptの配列
TypeScriptは配列で次の概念をサポートしています-
| S.No. | Concept & Description |
|---|---|
| 1. |
TypeScriptは多次元配列をサポートしています。 多次元配列の最も単純な形式は、2次元配列です。 |
| 2. |
インデックスなしで配列の名前を指定することで、関数に配列へのポインタを渡すことができます。 |
| 3. |
関数が配列を返すことができます |
特定の型の配列に値を格納したい場合があります。 anyタイプを使用すると、もちろんこの問題を解決できますが、不要な特定のタイプも許可されます。 これはタプルが入ってくるところです。
userNameとuserIdのuser配列を作成するとします。
let user: any; let userId = 1; let userName = "Alf"; let randomBoolean = true; user = [userId, userName]; // valid user = [userId, randomBoolean]; // also valid
userをanyタイプに設定することで、任意のタイプを割り当てることができます。これにより、numberであるuserIdの目的が無効になります。 ]とstringタイプのuserName。 これを解決するには、タプルを使用できます。
let user: [number,string]; let userId = 1; let userName = "Alf"; let randomBoolean = true; user = [userId, userName]; // valid user = [userId, randomBoolean]; // error: Type 'true' is not assignable to type 'string'
タプルは、目的のタイプを角かっこで囲み、コンマで区切って定義します。この場合は、numberとstringです。 ここで、タプルで定義されていないタイプ、たとえばbooleanを渡すと、次のようなエラーメッセージが表示されます。
タイプ「true」はタイプ「string」に割り当てることができません。
これは、2番目の入力としてstringを受け入れるようにタプルを定義したが、booleanを渡したためです。
タプル内の要素へのアクセス
タプル内の要素にアクセスするには、配列の場合と同じようにそのインデックスを使用します。
console.log(user[0]) // 1 console.log(user[1]) // Alf
タプルは、辞書またはキーと値のペアを作成するときに非常に役立ちます。 上記の例を使用すると、後で問題を引き起こすために誤って別のタイプを渡すことなく、ユーザー名とそのIDの配列を取得できます。
let users: [number, string][] = [[1,"Alf"],[2,"Jane"],[3,"Nii"]];
タプルに値を割り当てる場合、最初の2つの値は、タプルで定義されているタイプと正確に一致する必要があります。
たとえば、上記の例では、最初の要素はnumberであり、2番目の要素はstringである必要があります。 値を交換すると、タプルでタイプが定義されていてもエラーが発生します。
let user: [number,string]; user = ["Alf", 1]; // invalid
上記のコードは無効です。userは最初の要素がnumberで、2番目の要素がstringであると想定していますが、その逆はありません。
タプル変数に追加する後続の値は、特定の順序で事前定義されたタプルタイプのいずれかになります。
user[2] = "John"; // valid user[3] = 4; // valid user[4] = true; // invalid.
上記のコードでは、タプルはnumberとstringで宣言されているため、stringまたはnumberのいずれかの要素を入力できます。それらが最初の2つの要素でない場合は順序付けます。 タプルがbooleanタイプで宣言されていないため、要素にboolean値を割り当てることはできません。
それでおしまい。 この投稿がお役に立てば幸いです。 ✨
TypeScript-ユニオン
TypeScript 1.4では、プログラムで1つまたは2つのタイプを組み合わせることができます。 ユニオン型は、いくつかの型のいずれかになりうる値を表現する強力な方法です。 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)上記の例では、変数の型はunionです。 これは、変数がその値として数値または文字列のいずれかを含むことができることを意味します。
コンパイル時に、次の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
DelhiTypeScriptは、値のきめ細かい型チェックを定義できるようにすることで、値との契約を維持するのに役立ちます。 インターフェイスは、それを実現するためのTypeScriptの主要なメカニズムです。
たとえば、2人のユーザーを定義する次のコードがあるとします。
const user1 = {
id: 1,
firstName: 'John',
lastName: 'Doe',
proUser: false,
email: '[email protected]'
}
const user2 = {
firstName: 'Jane',
lastName: 'Doe',
proUser: true,
email: '[email protected]'
}
ユーザーオブジェクトが指定された型定義を尊重するようにコントラクトを確立しましょう。
interface User {
id: number;
firstName: string;
lastName: string;
proUser: boolean;
email: string;
}
const user1: User = {
id: 1,
firstName: 'John',
lastName: 'Doe',
proUser: false,
email: '[email protected]'
}
const user2: User = {
id: 2,
firstName: 'Jane',
lastName: 'Doe',
proUser: true,
email: '[email protected]'
}
ここで、プロパティが欠落している、追加のプロパティがある、または間違ったタイプのプロパティを持つ User オブジェクトを定義しようとすると、TypeScriptコンパイラは文句を言い、ユーザー定義の何が問題なのかを正確に教えてくれます。
エルビス演算子（？）を使用して、インターフェイスにオプションのプロパティを定義できます。
interface User {
id: number;
firstName: string;
lastName: string;
proUser: boolean;
email: string;
avatar?: string;
}
const user1: User = {
id: 1,
firstName: 'John',
lastName: 'Doe',
proUser: false,
email: '[email protected]'
}
const user2: User = {
id: 2,
firstName: 'Jane',
lastName: 'Doe',
proUser: true,
email: '[email protected]',
avatar: 'https://something/my-face.jpg'
}
user1 にアバター値を指定する必要がなく、TypeScriptが文句を言わないことに注意してください。
インターフェイスは独自のファイルで定義してから、ES6モジュール構文でインポートできます。
import { User } from '../interfaces/user';
const user1: User = {
id: 1,
firstName: 'John',
lastName: 'Doe',
proUser: false,
email: '[email protected]'
}
// ...
TypeScript-クラス
TypeScriptはオブジェクト指向のJavaScriptです。 TypeScriptは、クラス、インターフェイスなどのオブジェクト指向プログラミング機能をサポートしています。 OOPに関するクラスは、オブジェクトを作成するための青写真です。 クラスは、オブジェクトのデータをカプセル化します。 Typescriptは、クラスと呼ばれるこの概念の組み込みサポートを提供します。 JavaScript ES5以前はクラスをサポートしていませんでした。 TypescriptはES6からこの機能を取得します。
クラスを作成する
classキーワードを使用して、TypeScriptでクラスを宣言します。 同じための構文は以下のとおりです-
構文
class class_name {
//class scope
}classキーワードの後にクラス名が続きます。 クラスに名前を付けるときは、識別子の規則を考慮する必要があります。
クラス定義には、次のものを含めることができます-
- フィールド-フィールドは、クラスで宣言された変数です。 フィールドはオブジェクトに関するデータを表します
- コンストラクタ-クラスのオブジェクトにメモリを割り当てる責任があります
- 関数-関数はオブジェクトが実行できるアクションを表します。 また、メソッドと呼ばれることもあります
これらのコンポーネントをまとめて、クラスのデータメンバーと呼びます。
タイプスクリプトのクラス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は、その親クラス属性への暗黙的なアクセスを取得します。 エリア。
継承は次のように分類できます-
- シングル-すべてのクラスは、最大で1つの親クラスから拡張できます。
- Multiple -クラスは複数のクラスから継承できます。 TypeScriptは多重継承をサポートしていません。
- マルチレベル-次の例は、マルチレベル継承の仕組みを示しています。
例
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);その出力は次のとおりです-
出力
helloTypeScript─クラスの継承とメソッドのオーバーライド
メソッドのオーバーライドは、子クラスがスーパークラスのメソッドを再定義するメカニズムです。 次の例は同じことを示しています-
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 12instanceof演算子
オブジェクトが指定されたタイプに属する場合、 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. | Access Specifier & Description |
|---|---|
| 1. |
public パブリックデータメンバーは、ユニバーサルアクセシビリティを備えています。 クラスのデータメンバーはデフォルトでパブリックです。 |
| 2. |
private プライベートデータメンバーは、これらのメンバーを定義するクラス内でのみアクセスできます。 外部クラスメンバーがプライベートメンバーにアクセスしようとすると、コンパイラはエラーをスローします。 |
| 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 : 1TypeScript-オブジェクト
- オブジェクト*は、キーと値のペアのセットを含むインスタンスです。 値は、スカラー値または関数、または他のオブジェクトの配列です。 構文は以下のとおりです-
構文
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
HanksTypeScriptタイプテンプレート
JavaScriptでオブジェクトリテラルを次のように作成したとします-
var person = {
firstname:"Tom",
lastname:"Hanks"
};オブジェクトに値を追加する場合、JavaScriptを使用して必要な変更を加えることができます。 後でpersonオブジェクトに関数を追加する必要があるとします。これがこれを行う方法です。
person.sayHello = function(){ return "hello";}Typescriptで同じコードを使用すると、コンパイラーはエラーを返します。 これは、Typescriptでは、具象オブジェクトに型テンプレートが必要だからです。 Typescriptのオブジェクトは、特定の型のインスタンスでなければなりません。
これは、宣言でメソッドテンプレートを使用することで解決できます。
例：Typescript Typeテンプレート
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つのオブジェクトが同じプロパティセットを共有している場合、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})TypeScript-名前空間
名前空間は、関連するコードを論理的にグループ化する方法です。 これは、変数宣言がグローバルスコープに入る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));上記のコードをコンパイルして実行すると、次の結果が生成されます-
200TypeScript-モジュール
モジュールは、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 = {}));外部モジュール
複数の外部 js ファイル間の依存関係を指定およびロードするために、TypeScriptの外部モジュールが存在します。 js ファイルが1つしか使用されていない場合、外部モジュールは関係ありません。 従来、JavaScriptファイル間の依存関係の管理は、ブラウザーのスクリプトタグ（<script> </script>）を使用して行われていました。 しかし、モジュールをロードしている間は非常に線形であるため、これは拡張できません。 これは、ファイルを次々にロードする代わりに、モジュールをロードする非同期オプションがないことを意味します。 たとえばNodeJなどのサーバー用にjsをプログラミングしている場合、スクリプトタグさえありません。
単一のメインJavaScriptファイルから依存 js ファイルをロードするには、2つのシナリオがあります。
- クライアント側-RequireJs
- サーバー側-NodeJ
モジュールローダーの選択
外部JavaScriptファイルのロードをサポートするには、モジュールローダーが必要です。 これは別の js ライブラリになります。 ブラウザーで使用される最も一般的なライブラリーはRequieJSです。 これは、AMD（非同期モジュール定義）仕様の実装です。 AMDは、ファイルを次々にロードする代わりに、相互に依存している場合でも、それらをすべて個別にロードできます。
外部モジュールの定義
CommonJSまたはAMDを対象とするTypeScriptで外部モジュールを定義する場合、各ファイルはモジュールと見なされます。 したがって、内部モジュールと外部モジュールを併用することはオプションです。
TypeScriptをAMDからCommonJsモジュールシステムに移行する場合、追加の作業は必要ありません。 変更する必要があるのはコンパイラフラグだけです。JavaScriptとは異なり、CommonJsから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());
});*Commonjs* システム用のメインTypeScriptファイルをコンパイルするコマンドはtsc --module commonjs TestShape.tsコンパイル時に、 Commonjs 用の次のJavaScriptコードが生成されます。
ファイル：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-アンビエント
アンビエント宣言は、実際のソースコードが他の場所に存在することをTypeScriptコンパイラに伝える方法です。 jquery/angularjs/nodejsのような多数のサードパーティ js ライブラリを使用している場合、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をプロジェクトに統合できます。
