TypeScript チュートリアル: インターフェース、列挙型、配列とは何か、例付きで解説

何ですか TypeScript?

TypeScript のスーパーセットです Java脚本。 TypeScript クラス、インターフェースなどをサポートする純粋なオブジェクト指向プログラミング言語です。これは、によって開発されたオープンソース言語です。 Microsoft コードを静的にコンパイルして Javaスクリプト。ブラウザまたは Nodejs で簡単に実行できます。

ECMAScriptの最新機能はすべてサポートされています。 TypeScript そしてそれに加えて TypeScript インターフェース、アンビエント宣言、クラス継承などの独自のオブジェクト指向機能があり、他の方法では難しい大規模なアプリケーションの開発に役立ちます。 Javaスクリプト.

ダウンロードとインストールの方法 TypeScript

ダウンロードとインストールの手順は次のとおりです。 TypeScript:

ステップ 1) Nodejs をダウンロードしてインストールする

nodejs の公式サイトに移動します。 https://nodejs.org/en/download/ お使いのオペレーティングシステムに応じて、Node.js をダウンロードしてインストールします。Node.js のダウンロード方法の詳細な手順については、こちらをご覧ください。 https://www.guru99.com/download-install-node-js.html

ステップ 2) Nodejs と npm のバージョンを確認する

nodejs と npm がインストールされているかどうかを確認するには、コマンドプロンプトでバージョンを確認するだけです。

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

したがって、nodejs v10 と npm 6 がインストールされています。

ステップ3） TypeScript インストール

以下のコマンドに示すように、プロジェクトディレクトリ typeproject/ を作成し、npm init を実行します。

npm init

ステップ 4) インストールを開始する

次に、プロジェクトの依存関係を保存するパッケージ .json を作成します。

インストールが完了したら TypeScript 次のように：

npm -g install typescript

上記のコマンドでインストールが完了します TypeScriptnpm installに「-g」を追加すると、 TypeScript グローバルに使用できます。-gを使用する利点は、 TypeScript TSC グローバルにインストールされているため、どのディレクトリからでもコマンドを実行できます。インストールしたくない場合は、 TypeScript 以下のコマンドをグローバルに使用します。

npm --save install typescript

プロジェクトディレクトリにsrc/フォルダを作成し、src/フォルダ内に TypeScript test.ts ファイルを作成し、コードを記述します。

例 : test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

コンパイル TypeScript にコード Javascript

上記のコードをコンパイルするには、次のコマンドを使用します。

If TypeScript グローバルにインストールされている場合は、以下のコマンドを使用します。

tsc test.ts

If TypeScript プロジェクトのローカルにインストールされている場合は、次のパスを使用する必要があります。 TypeScript node_modules から次のように入力します:

node_modules/typescript/bin/tsc test.ts

上記のコマンドは test.js ファイルを作成し、JavaScript にコンパイルされたコードを持ちます。

例: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

実行する Javascript Nodejsを使用する

この中の TypeScript このチュートリアルでは、次のようにして nodejs で test.js を実行します。

D:\typeproject\src>node test.js
15

test.jsの実行時にコンソールに表示される値

実行する Javaブラウザ内のスクリプト

例：

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

コンパイル TypeScript にコード Javascript EcmaScriptバージョンを使用

TypeScript リリースされたすべての Ecmascript 機能をサポートしており、開発者はコーディング中に同じ機能を使用できます。ただし、古いブラウザーではすべての新機能がサポートされているわけではないため、JavaScript を古いバージョンの Ecmascript にコンパイルする必要があります。 TypeScript それを可能にするコンパイラオプションを提供します。

例 : test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

選択した ES バージョンにコンパイルするには、次のようにコマンドで target または t オプションを使用できます。

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

デフォルトでは、ターゲットは ES3 です。変更したい場合は、上記のコマンドを使用できます。

現時点では、ここではES6を使用します TypeScript チュートリアルをターゲットとして:

tsc --target ES6  test.ts

test.ts から test.js へ

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

使用したアロー関数は ES6 の機能であり、ES6 にコンパイルされた場合も変更されないため、コードはそのまま残ります。

デフォルトではターゲットは ES3 なので、ターゲットなしでは次のような test.js が得られます。

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

ここでは、太い矢印が通常の匿名関数に変更されています。

の変数 TypeScript

変数変数は値を格納するために使用され、値は文字列、数値、ブール値、または式になります。 TypeScript、それらは Javaスクリプトでは、変数を宣言して値を割り当てる方法を学びましょう。 TypeScript.

変数を定義せずにコード内で使用することはできません。変数を宣言するには、次のように使用できます

VAR キーワード、

うキーワード

定数キーワード

変数の操作 TypeScript はJavaScriptに似ており、JavaScriptに慣れているユーザーにとっては非常に簡単です。う　定数に比べてあまり使われていない VAR.

var を使用した変数の宣言

構文：

var firstname = "Roy";

いくつか見てみましょう TypeScript varキーワードの動作と、varを使用して宣言された変数のスコープを理解するための例 VAR キーワード。

例1：

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

例2：

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

例3：

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

let を使用した変数の宣言

当学校区の TypeScript let の構文は以下のとおりです。

構文：

let name="Roy";

の働きう変数はほぼ同じです VAR、しかし、小さな違いがあり、同じことを理解します TypeScript 例。

例：

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

上記の TypeScript 例ではエラーが発生しますが、 VAR キーワード。使用する変数う宣言されたブロックスコープ内で使用できます。たとえば、変数 t は if ブロック内でのみ使用でき、関数全体では使用できません。

また、関数内やforループ、whileループ内で変数を宣言した場合、 TypeScript switch ブロックでは、そのブロック内でのみ使用でき、ブロック外では参照できません。また、変数がブロック外で使用されるとエラーがスローされます。これが、var キーワードと let キーワードで宣言された変数の主な違いです。

constを使用した変数の宣言

const は定数変数を意味します。これらは let 変数に似ていますが、唯一の違いは、一度値が割り当てられると変更できないことです。

構文：

const name;

例：

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

したがって、ユーザーは、割り当てられた値を変更する必要がないことがわかっている場合にのみ const 変数を使用できます。

入力内容 TypeScript

TypeScript は強く型付けされた言語ですが、JavaScriptはそうではありません。文字列として定義された値を持つ変数は、問題なく数値に変換できます。 Javascript同じことは許されない TypeScript。に TypeScript変数の型は開始時にのみ定義され、実行中は同じ型を維持する必要があり、変更があると JavaScript へのコンパイル時にコンパイル時エラーが発生します。

種類は次のとおりです:

数
String
ブーリアン
任意
空間

数

整数、浮動小数点数、分数などのみを受け取ります。

構文：

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Number 型で使用できる重要なメソッドをいくつか示します。

toFixed（） – 数値を文字列に変換し、メソッドに指定された小数点以下の桁数を保持します。

toString（） – このメソッドは数値を文字列に変換します。

valueOf（） – このメソッドは数値のプリミティブ値を返します。

toPrecision() – このメソッドは、数値を指定された長さにフォーマットします。

例: すべての String メソッドの場合

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

String

文字列: 文字列値のみ

構文：

let str :string = "hello world";

String 型で使用できる重要なメソッドをいくつか示します。

split() – このメソッドは文字列を配列に分割します。
charat() – このメソッドは、指定されたインデックスの最初の文字を返します。
の指標() – このメソッドは、指定された値の最初の出現位置を示します。
交換する () – このメソッドは 2 つの文字列を受け取ります。最初は文字列内で検索する値で、存在する場合は 2 番目の値に置き換えられ、新しい文字列が返されます。
トリム () – このメソッドは文字列の両側から空白を削除します。
substr() – このメソッドは、開始と終了として指定された位置に応じて文字列の一部を取得します。
サブストリング() – このメソッドは、開始と終了として指定された位置に応じて文字列の一部を取得します。終了位置の文字は除外されます。
大文字へ() - 文字列を大文字に変換します
toLowerCase() – 文字列を小文字に変換します。

例：

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

ブーリアン

true、false、0、1 などの論理値を受け入れます。

構文：

let bflag :boolean = 1;
let status :boolean = true;

任意

構文：

let a :any = 123
a = "hello world"; // changing type will not give any error.

を使用して宣言された変数 どれか type は、変数を文字列、数値、配列、ブール値、または void として受け取ることができます。 TypeScript コンパイル時エラーは発生しません。これは、 Javaスクリプト。その変数に関連付けられる値の型が不明な場合にのみ、任意の型変数を使用します。

空間

Void 型は主に、返すものを持たない関数の戻り値の型として使用されます。

構文：

function testfunc():void{
 //code here
}

TypeScript 配列

An 配列 in TypeScript 複数の値を格納できるデータ型です。配列操作の宣言と値の割り当て方法を学びましょう。 TypeScript.

Since TypeScript は強く型付けされた言語なので、配列内の値のデータ型を指定する必要があります。そうでない場合は、any 型として扱われます。

配列の宣言と初期化

構文：

let nameofthearray : Array<typehere>

例:

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

配列の要素にアクセスするさまざまな方法

配列から要素を取得するには、値はインデックス 0 から配列の長さまで始まります。

例：

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

配列から要素を取得するには、次のようにします。 TypeScript のループ以下のように：

使い方 TypeScript forループ

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

for-in ループの使用

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

for-of ループの使用

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

foreach ループの使用

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript 配列メソッド

TypeScript 配列オブジェクトには、開発者が配列を簡単かつ効率的に処理するのに役立つ多くのプロパティとメソッドがあります。配列名.プロパティを指定してプロパティの値を取得でき、配列名.メソッド() を指定してメソッドの出力を取得できます。

長さプロパティ

=> 配列内の要素数を知りたい場合は、length プロパティを使用できます。

Reverseメソッド

=> reverse メソッドを使用して、配列内の項目の順序を逆にすることができます。

ソート方法

=> sort メソッドを使用して配列内の項目を並べ替えることができます。

ポップメソッド

=> Pop メソッドを使用して配列の最後の項目を削除できます。

Shift 方法

=> shift メソッドを使用して配列の最初の項目を削除できます。

プッシュ方式

=> 配列の最後の項目として値を追加できます。

concatメソッド

=> XNUMX つの配列を XNUMX つの配列要素に結合できます。

長さプロパティの例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

逆の方法の例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

ソート方法の例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Popメソッドの例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

シフト法の例

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

プッシュ方式の例

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

concat メソッドの例

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

クラス内 TypeScript

TypeScript のスーパーセットです Javaスクリプトなので、 Javaスクリプトは以下でも可能 TypeScriptクラスはES6以降に追加された新しい機能なので、 Javaプロトタイプ機能を持つ関数を使用してクラスタイプの機能をスクリプト化し、コードを再利用します。クラスを使用すると、コードを再利用できるJava、C＃、Pythonなどの言語にほぼ近づけることができます。 TypeScript/Javaスクリプトは言語を非常に強力にします。

クラスの定義 TypeScript

基本的なクラス構文は次のとおりです。 TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

例: クラスに関する実際の例

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

上の例では、Students というクラスがあります。これには、age、name、および roll_no のプロパティがあります。

コンストラクタ TypeScript CLASS

上記で定義したクラス Student の例には、以下に示すようなコンストラクターがあります。

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

コンストラクターメソッドには、パラメータ age、name、および roll_no があります。コンストラクターは、クラスが呼び出されたときにプロパティの初期化を処理します。プロパティには次を使用してアクセスします。このキーワード。たとえば、age プロパティにアクセスするには this.age、roll_no にアクセスするには this.roll_no などです。以下に示すように、デフォルトのコンストラクターを使用することもできます。

constructor () {}

メソッド内の TypeScript CLASS

Students クラスの例では、getRollNo()、getName()、getAge() などのメソッドが定義されており、これらはプロパティ roll_no、name、age の詳細を提供するために使用されます。

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

クラスのインスタンスを作成する TypeScript

例：

In TypeScript クラスのインスタンスを作成するには、new 演算子を使用する必要があります。new 演算子を使用してクラスのインスタンスを作成すると、次に示すように、クラスのプロパティとメソッドにアクセスできるオブジェクトが取得されます。

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

コンパイル TypeScript クラスへ Javaスクリプト

以下のようにtscコマンドを使用してコンパイルすることができます。 Javascript.

Command: tsc  Students.ts

の出力 Javascript コンパイル時のコードは以下のようになります。

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascriptクラスは自己呼び出し関数に変換されます。

クラス継承

クラスは次を使用して継承できます。 伸ばす のキーワード TypeScript.

クラス継承の構文:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

クラスB 共有できるようになります クラスA メソッドとプロパティ。

これは継承を使用したクラスの実例です。

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Person と Student という XNUMX つのクラスがあります。 Student クラスは Person を拡張し、Student で作成されたオブジェクトは、それが拡張したクラスだけでなく、独自のメソッドやプロパティにもアクセスできます。

次に、上記のクラスにさらに変更を加えてみましょう。

例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

前の例と比較して追加した変更は、クラス Student で定義されたコンストラクターがあることです。コンストラクターは、基本クラスと同じパラメーターを受け取り、独自のパラメーターがあればそれを追加する必要があります。

In TypeScript すべてのパラメータを基本パラメータとして super を呼び出す必要があります。これはコンストラクター内で最初に実行する必要があります。super は拡張クラスのコンストラクターを実行します。

アクセス修飾子 TypeScript

TypeScript メソッドとプロパティへの public、private、protected のアクセス修飾子をサポートします。デフォルトでは、アクセス修飾子が指定されていない場合、メソッドまたはプロパティは public と見なされ、クラスのオブジェクトから簡単にアクセスできるようになります。

プライベートアクセス修飾子の場合、クラスのオブジェクトからアクセスすることはできず、クラス内でのみ使用することを目的としています。継承されたクラスでは使用できません。

保護されたアクセス修飾子の場合、それらはクラスおよび継承されたクラス内で使用されることを目的としており、クラスのオブジェクトからアクセスすることはできません。

例：

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena

プライベート： プロパティやメソッドは、クラスのオブジェクトだけでなく派生クラスからもアクセスできません。これらはクラス内で内部的に使用されることを目的としています。
保護： 作成されたオブジェクトからプロパティとメソッドにアクセスすることもできません。これらはクラス内からアクセスでき、それを拡張するクラスで使用できます。
公衆： プロパティとメソッドはキーワードなしで宣言されます。外部からクラスのオブジェクトを使用して簡単にアクセスできます。

のインターフェース TypeScript

の核となる機能の 1 つ TypeScript インターフェースです。インターフェースは、それを使用するエンティティによって実装される必要がある定義されたルールのセットです。エンティティは、クラス、関数、または変数です。インターフェースは、プロパティとメソッドで構成できます。プロパティまたはメソッドの「?」構文を使用して、プロパティをオプションとして定義できます。インターフェースは、インターフェースを実装する関数、変数、またはクラスに対して強力な型チェックを追加します。

インターフェースの構文 TypeScript

interface Dimension {
    width: string;
    height: string;
}

Dimension という名前のインターフェイスを定義しました。このインターフェイスには幅と高さのプロパティがあり、どちらも文字列型を持ちます。

このインターフェイスは、変数、関数、またはクラスによって実装できるようになりました。以下は、Dimension インターフェイスを実装する変数の例です。

例：

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

インターフェイス Dimension の署名には幅と高さがあり、両方とも必須です。インターフェイスの実装中にプロパティのいずれかが欠落している場合、または型が変更されている場合、コードを JavaScript にコンパイルするときにコンパイル時エラーが発生します。

上記のコードを JavaScript にコンパイルすると、次のようになります。

var _imagedim = {
    width: "100px",
    height: "200px"
};

関数でインターフェイスを使用する方法を見てみましょう。

関数の戻り値の型として Interface を使用する

例：

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

上記の例では、関数 getDimension() に戻り値の型としてインターフェイス Dimension が実装されています。 getDimension() の戻り値の型は、Interface Dimension で説明されているプロパティおよび型と一致する必要があります。

コンパイルされたコードは Javascript 次のようになります：

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

コンパイル中に、戻り値の型がインターフェイスと一致しない場合、エラーがスローされます。

関数パラメータとしてのインターフェース

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

したがって、上の例では、関数 getDimension() へのパラメーターとして Interface Dimension を使用しました。関数を呼び出すときは、関数に渡されるパラメータが定義されたインターフェイスルールと一致することを確認する必要があります。

コンパイルされたコードは Javascript 次のようになります：

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

インターフェースを実装するクラス

クラスとのインターフェイスを利用するには、キーワードを使用する必要があります 実装する.

インターフェイスを実装するクラスの構文:

class NameofClass implements InterfaceName {
}

次の例は、クラスとのインターフェースの動作を示しています。

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

上の例では、文字列型のプロパティ width と height を備えた Dimension インターフェイスと、戻り値を文字列として持つ getWidth() というメソッドを定義しました。

コンパイルされたコードは Javascript 次のようになります：

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

の機能 TypeScript

関数とは、タスクを実行するために実行される一連の命令です。 Javascriptでは、コードの大部分は関数の形で書かれており、大きな役割を果たしています。 TypeScriptクラス、インターフェース、モジュール、名前空間が利用可能ですが、それでも関数は重要な役割を果たします。 javascriptと TypeScript 関数は、利用可能な戻り値の型です TypeScript 機能。

Javaスクリプト機能:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript 関数：

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

上記の関数では、関数の名前が追加され、パラメータは次のようになります。 a1, b1 どちらも数値型を持ち、戻り値の型も数値です。関数に文字列を渡した場合、コンパイル時にエラーが発生します。 Java脚本。

関数の呼び出し: add

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

パラメータ a1 　 b1 は必須パラメータであり、その方法で受信しない場合はエラーがスローされます。また、パラメータの型と戻り値の型は非常に重要であり、一度定義すると変更できません。

関数のオプションのパラメータ

JavaScriptでは、関数のすべてのパラメータはオプションであり、渡されない場合は未定義とみなされます。しかし、 TypeScriptパラメータを定義したら、そのパラメータも送信する必要がありますが、パラメータをオプションのままにしておきたい場合は、次に示すように、パラメータ名に対して? を使用することでオプションにすることができます。

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

オプションのパラメータは関数内で最後にのみ定義されることに注意してください。最初のパラメータをオプションとして、XNUMX 番目のパラメータを必須として設定することはできません。XNUMX つのパラメータを使用して関数を呼び出すと、コンパイラはエラーをスローします。したがって、オプションのパラメータを最後に保持する必要があります。

Params へのデフォルト値の割り当て

以下に示すように、パラメータにデフォルト値を割り当てることができます。

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

オプションのパラメータと同様に、ここでもデフォルトの初期化パラメータを関数の最後に保持する必要があります。

残りのパラメーター

ご覧のとおり TypeScript 必須パラメータ、オプションパラメータ、デフォルト値で初期化されたパラメータを扱います。次に、残りのパラメータを見てみましょう。残りのパラメータは、一緒に定義されたオプションパラメータのグループであり、3つの方法で定義されます。 ドット (…) パラメータの名前が続きます。これは配列です。

残りのパラメータの構文:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

上に示したように、残りのパラメータは (…param-name); を使用して定義されます。残りのパラメータは、先頭に XNUMX つのドットが付いた配列です。配列にはすべてのパラメータが渡されます。以下の例に示すように、関数を呼び出すことができます。

例：

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

矢印関数

アロー関数はES6でリリースされた重要な機能のXNUMXつであり、 TypeScript 矢印関数の構文には太い矢印が含まれているため、この関数は矢印関数と呼ばれます。

アロー関数の構文:

var nameoffunction = (params) => {				
 // code here			
}

アロー関数の用途は何ですか?

アロー関数の使用例を理解するために例を見てみましょう。

例：

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

this プロパティを持つ匿名関数を作成しました。スコアは 0 に初期化され、メソッド getScore は内部的に setTimeout を持ち、1 秒で this.score をコンソールします。 this.score が定義され初期化されているにもかかわらず、コンソールの値は未定義になります。ここでの問題は、is キーワード。 setTimeout 内の関数は独自の this を持っていて、内部でスコアを参照しようとしますが、定義されていないため、unknown が返されます。

以下に示すように、アロー関数を使用して同様の処理を行うことができます。

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

以下に示すように、setTimeout 内の関数をアロー関数に変更しました。

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

アロー関数には独自の関数はありませんこの定義されており、親を共有しているこのしたがって、外部で宣言された変数には、アロー関数内でこれを使用して簡単にアクセスできます。これらは構文が短いため、コールバック、イベントハンドラー、内部タイミング関数などに便利です。

TypeScript 列挙型

TypeScript Enum は、関連する値のコレクションが一緒に保存されるオブジェクトです。 Javascript 列挙型をサポートしていません。プログラミング言語ような Java、C、 C++ サポート TypeScript 列挙型であり、 TypeScript 列挙型はキーワード enum を使用して定義されます。

Enum を宣言するにはどうすればよいですか?

構文：

enum NameofEnum {
   value1,
   value2,
    ..
}

例: 列挙型

enum Directions {
North,
South,
East,
West
}

上の例では、Directions という列挙型を定義しました。指定される値は北、南、東、西です。値には、列挙型の最初の値に対して 0 から番号が付けられ、その後、次の値に対して 1 ずつ増加します。

数値を使用して Enum を宣言する

デフォルトでは、列挙型に値が指定されていない場合は、0 から始まる数値とみなされます。次の例は、数値を持つ列挙型を示しています。

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

開始値を列挙型に割り当てることもでき、次の列挙型値は増分された値を取得します。例えば：

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

これで、列挙値 North は 5 から始まるため、South の値は 6、East = 7、West = 8 になります。

デフォルト値を使用する代わりに、選択した値を割り当てることもできます。例えば：

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Enum にアクセスするにはどうすればよいですか?

次の例は、コード内で Enum を使用する方法を示しています。

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

JavaScript にコンパイルされたコードは次のとおりです。

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Since Javascript 列挙型をサポートしていないため、上記のように列挙型を自己呼び出し関数に変換します。

文字列値を使用して Enum を宣言する

以下の例に示すように、選択した文字列値を割り当てることができます。

例：

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

JavaScript にコンパイルされたコードは次のとおりです。

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

モジュールとは TypeScript?

作成されたファイルは TypeScript グローバルアクセスを持つため、あるファイルで宣言された変数は別のファイルから簡単にアクセスできます。このグローバルな性質により、コードの競合が発生し、実行時に問題が発生する可能性があります。エクスポートおよびインポートモジュール機能を使用すると、グローバル変数や関数の競合を回避できます。この機能は、 JavaES6リリースのスクリプトで、 TypeScript.

なぜモジュールが必要なのか TypeScript?

次の例は、モジュールがない場合の問題を示しています。

例 test1.ts

let age : number = 25;

test1.ts で、number 型の変数 age を定義しました。

例 test2.ts

test2.ts ファイルでは、変数に簡単にアクセスできます。年齢 test1.ts で定義されているものを以下のように変更します。

age = 30; // changed from 25 to 30.
let _new_age = age;

したがって、変数はグローバルに利用可能であり、変更できるため、上記のケースでは多くの問題が発生する可能性があります。

自律的AI モジュール、書かれたコードはファイルのロケールのままであり、ファイルの外からアクセスすることはできません。ファイルの内容にアクセスするには、export キーワードを使用してファイルをエクスポートする必要があります。 It 変数、クラス、関数、またはインターフェイスを別のファイルで使用する場合に使用します。 インポート エクスポートされた変数、クラス、インターフェイス、または関数にもアクセスしたい場合に使用されます。そうすることで、記述されたコードはファイル内にそのまま残り、同じ変数名を定義した場合でも、それらは混同されず、宣言されたファイルに対してローカルに動作します。

エクスポートとインポートの使用

エクスポートとインポートにはさまざまな方法があります。ここでは、主に使用される構文について説明します。

インポートとエクスポートの構文 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

以下は、エクスポートとインポートを使用した実際の例です。

例：

test1.ts

export let age: number = 25;

Export キーワードは、年齢変数を別のファイルで共有するために使用されます。

test2.ts

import { age } from "./test1"
let new_age :number = age;

import キーワードは、年齢変数を使用する必要があり、上記のようにファイルの場所を指定する必要があります。

インポートおよびエクスポートの構文 2:

エクスポートおよびインポートを行う別の方法があり、その構文は次のとおりです。

export = classname;

import classname = require(“file path of modulename”)

使用しているとき 輸出 = モジュールをエクスポートするには、インポートで require(“モジュール名のファイルパス”) を使用してインポートする必要があります。

上記のケースを示す実際の例を以下に示します。

Customer.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

モジュールローダー

モジュールは単独では動作しないため、インポート依存関係を見つけるにはモジュールローダーが必要です。 TypeScript 上記の例を参照してください。使用可能なモジュールローダーは、Node.js の場合は CommonJS、ブラウザーで実行する場合は Require.js です。

CommonJS モジュールを使用してコードをコンパイルするには、次のコマンドを使用します。

tsc --module commonjs testCustomer.ts

Requirejs モジュールを使用してコードをコンパイルするには、次のコマンドを使用します。

tsc --module amd testCustomer.ts

上記のコマンドで依存ファイルがjsファイルに変換されます。

Requirejs を使用した testCustomer.ts から testCustomer.js への例

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Requirejs を使用した Customer.ts から Customer.js への例

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

require.js を使用してテストするには、次のように依存関係への参照を含む main.js というファイルを作成する必要があります。

フォルダー構造は次のとおりです。

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

名前空間 TypeScript

ネームスペースは基本的に、クラス、インターフェイス、変数、関数のコレクションを XNUMX つのファイルにまとめたものです。

名前空間の構文

namespace name{

export class {
}

export interface {
}

export const constname;

}

関連するコードは XNUMX つの名前空間で使用できます。

名前空間の動作例: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

ネームスペースの名前は、 学生セットアップ、 インターフェイス StudDetails 、関数 addSpace 、および Student というクラスを追加しました。

ネームスペースへのアクセス

以下は名前空間を使用しているコードです 学生のセットアップ。

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

名前空間内で使用可能なクラス、インターフェイス、関数は、名前空間の例の名前を使用して参照する必要があります。 StudentSetup.addSpace 機能にアクセスするには、 StudentSetup.Student クラスにアクセスします。

以下に示すように、両方のファイルを XNUMX つの js にコンパイルできます。

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

以下のコマンドを使用して、コマンドプロンプトで出力を確認します。

node namespace.js

出力は次のように表示されます。

The name is: H a r r y

アンビエント宣言 TypeScript

TypeScript アンビエント宣言を使用してサードパーティのJavaScriptファイルを使用できます。この機能の利点は、書き直す必要がなく、ライブラリのすべての機能を使用できることです。 TypeScript.

アンビエント構文

アンビエントモジュールを宣言するには:

declare module moduleName {
   //code here
}

アンビエントファイルは次のように保存する必要があります。

filename.d.ts

ファイルを使用するには ファイル名.d.ts .ts では次のように参照する必要があります。

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

アンビエント型宣言は TypeScript サードパーティのライブラリへの参照があり、必要な関数を独自の型で再宣言します。たとえば、次に示すような小さな JavaScript ライブラリがあるとします。

Third Party Javaスクリプトファイル: testString.js

例: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

isString、convertToUpperCase、convertToLowerCase、converToStringBold などの関数を持つ StringChecks というオブジェクトがあります。

アンビエントモジュールの作成 TypeScript

次に、上記の js 関数への参照を持ち、要件に従って型チェックを追加するアンビエントモジュールを作成します。

ファイル名 : tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

モジュール名を TestString として定義し、インターフェイス StringsFunc をエクスポートする必要があります。

isString(str: 文字列): ブール値

=> これは param を文字列として受け取り、戻り値の型はブール値になります。 .ts ファイルで使用すると、パラメータを数値または文字列以外として渡すと、コンパイルタイプエラーが発生します。

ConvertToUpperCase(str:string): 文字列

=> これは引数を文字列として受け取り、文字列を返します。同様のことが当てはまります。 ConvertToLowerCase(str: 文字列)
：弦; そして ConvertToStringBold(str: string): 文字列
;

JavaScript ファイルではオブジェクト名が StringChecks であるため、最後に .d.ts ファイルで同じものを参照する必要があります。これは次のように行われます。

declare var StringChecks: TestString.StringsFunc;

アンビエントモジュールの使用 TypeScript

ここに、アンビエントファイル tstring.d.ts を使用する test.ts ファイルがあります。

例: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

コンパイル TypeScript tsc test.ts から test.js へ

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

これで、HTML ファイルで test.js を使用できるようになり、ライブラリファイル testString.js も使用できるようになりました。

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

これはコンソールに表示される出力です。

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript 沿革

歴史上の重要なランドマークを見てみましょう TypeScript:

XNUMX年間の社内開発を経て、 Microsoft. TypeScript 0.9、2013年にリリース
ジェネリック医薬品の追加サポート TypeScript 1.0はBuild 2014でリリースされました
2014年XNUMX月、新たな TypeScript 以前のバージョンよりも 5 倍高速なコンパイラが登場しました。
2015 年 6 月に、ESXNUMX モジュール、名前空間キーワード、サポート、デコレータがサポートされました。
2016 年 XNUMX 月に、マップされた型のキーとルックアップ型、および残りの機能が追加されました。
27年2018月XNUMX日、条件型、交差型のサポートが強化されたキーが TypeScript.

なぜ使用 TypeScript?

ここでは、使用することの重要な利点/メリットを紹介します。 TypeScript

大規模で複雑なプロジェクト Javaスクリプトはコーディングと保守が困難です。
TypeScript コードの整理に大いに役立ち、コンパイル中のエラーのほとんどを排除します。
TypeScript JSライブラリとAPIドキュメントをサポート
オプションで型指定できるスクリプト言語です
TypeScript コードはプレーンテキストに変換できる Javaスクリプトコード
より優れたコード構造化とオブジェクト指向プログラミング手法
開発時間の短縮のためのツールサポートが可能
標準デコレータ、async/awaitを超えて言語を拡張できる

誰が使用するか TypeScript?

ここでは、最も一般的なアプリケーションをいくつか紹介します。 TypeScript:

角度チームは TypeScript.
NodeJS と NPM のインストール
TypeScript インストール
コンパイル TypeScript にコード Javascript
Nodejsを使用してコードを実行する
実行する Javascript ブラウザで
コンパイル TypeScript にコード Javascript EcmaScriptバージョンを使用
書かれたコードを簡単にコンパイルできます TypeScript 〜へ JavaNodeJS を使用したスクリプト。
だから一緒に働くには TypeScript まずNodeJSをダウンロードしてインストールする必要があります。

製品概要

TypeScript のスーパーセットです Java脚本。 TypeScript クラス、インターフェースなどをサポートする純粋なオブジェクト指向プログラミング言語です。
TypeScript リリースされたすべての Ecmascript 機能をサポートしており、開発者はコーディング中に同じ機能を使用できます。
変数は値を保存するために使用され、値には文字列、数値、ブール値、または式を使用できます。
In TypeScript変数の型は開始時にのみ定義され、実行中は同じ型を維持する必要があり、変更があると JavaScript へのコンパイル時にコンパイル時エラーが発生します。
配列の TypeScript 複数の値を保存できるデータ型です。
クラスはES6以降に追加された新しい機能なので、 Javaコードを再利用するために、プロトタイプ機能を持つ関数を使用してクラス型機能をスクリプト化してみました。
TypeScript メソッドとプロパティへの public、private、protected アクセス修飾子をサポートします。
の核となる機能の 1 つ TypeScript インターフェースです。インターフェースは、それを使用するエンティティによって実装される必要がある定義されたルールのセットです。
関数は、タスクを実行するために実行される一連の命令です。
TypeScript Enum は、関連する値のコレクションが一緒に保存されるオブジェクトです。

何ですか TypeScript?

ダウンロードとインストールの方法 TypeScript

コンパイル TypeScript にコード Javascript

実行する Javascript Nodejsを使用する

コンパイル TypeScript にコード Javascript EcmaScriptバージョンを使用

関連記事

の変数 TypeScript

var を使用した変数の宣言

let を使用した変数の宣言

constを使用した変数の宣言

入力内容 TypeScript

数

String

ブーリアン

任意

空間

TypeScript 配列

配列の宣言と初期化

配列の要素にアクセスするさまざまな方法

使い方 TypeScript forループ

for-in ループの使用

for-of ループの使用

foreach ループの使用

TypeScript 配列メソッド

長さプロパティ

Reverseメソッド

ソート方法

ポップメソッド

Shift 方法

プッシュ方式

concatメソッド

長さプロパティの例

逆の方法の例

ソート方法の例

Popメソッドの例

シフト法の例

プッシュ方式の例

concat メソッドの例

クラス内 TypeScript

クラスの定義 TypeScript

例: クラスに関する実際の例

コンストラクタ TypeScript CLASS

メソッド内の TypeScript CLASS

クラスのインスタンスを作成する TypeScript

コンパイル TypeScript クラスへ Javaスクリプト

クラス継承

クラス継承の構文:

アクセス修飾子 TypeScript

のインターフェース TypeScript

インターフェースの構文 TypeScript

関数の戻り値の型として Interface を使用する

関数パラメータとしてのインターフェース

インターフェースを実装するクラス

の機能 TypeScript

関数の呼び出し: add

関数のオプションのパラメータ

Params へのデフォルト値の割り当て

残りのパラメーター

矢印関数

アロー関数の用途は何ですか?

TypeScript 列挙型

Enum を宣言するにはどうすればよいですか?

数値を使用して Enum を宣言する

Enum にアクセスするにはどうすればよいですか?

文字列値を使用して Enum を宣言する

モジュールとは TypeScript?

なぜモジュールが必要なのか TypeScript?

エクスポートとインポートの使用

インポートとエクスポートの構文 1:

インポートおよびエクスポートの構文 2:

モジュールローダー

Requirejs を使用した testCustomer.ts から testCustomer.js への例

Requirejs を使用した Customer.ts から Customer.js への例

名前空間 TypeScript

名前空間の構文

ネームスペースへのアクセス

アンビエント宣言 TypeScript

アンビエント構文

アンビエントモジュールを宣言するには:

アンビエント ファイルは次のように保存する必要があります。

アンビエントファイルは次のように保存する必要があります。