TypeScript チュートリアル：インターフェース、列挙型、配列とは何か

⚡ スマートサマリー

TypeScript は、 Javaプレーンテキストにコンパイルされるスクリプト Javaスクリプトを作成し、クラス、インターフェース、列挙型、モジュール、名前空間を追加します。この記事では、インストール、変数、型、配列、クラス、アクセス修飾子、インターフェース、関数、列挙型、モジュール、および環境宣言について説明します。

🧬 言語関係: すべての有効な Javaスクリプトプログラムは有効です TypeScriptコンパイラは平文を出力する Javaあらゆる対象バージョンに対応したスクリプト。
🔒 静的タイプping: 変数は宣言時に指定された型を保持するため、型の不一致は実行時ではなくコンパイル時に報告されます。
🧱 オブジェクト指向： クラス、継承、そしてpublic、private、protectedといった修飾子によって、ブラウザコードに馴染みのある構造がもたらされる。
📐 インターフェース： インターフェースは、trac変数、関数、またはクラスが満たさなければならないプロパティとメソッドのリスト。
🔢 列挙型: 名前付き定数セットは自己呼び出し関数にコンパイルされます。 Javaスクリプトにはネイティブの列挙型がありません。
📦 モジュール： エクスポートとインポートは、宣言をファイル内にローカルに保ち、グローバルな名前の衝突を防ぎます。
🔌 環境に関する宣言： .d.ts ファイルはサードパーティを記述します Javaスクリプトライブラリなので、書き換えずに型チェックを適用できます。

プロフィール

何ですか TypeScript?

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

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

この関係は一方通行です。 Javaスクリプトファイルは既に有効です TypeScriptしかし、逆は真ではない。なぜなら、型注釈はにのみ存在するからである。 TypeScript そしてコンパイル時に消去されます。

なぜ使用 TypeScript?

以下は、使用することの重要な利点です。 TypeScript:

大規模で複雑なプロジェクト Javaスクリプトはコーディングと保守が困難です。
TypeScript コードの整理に非常に役立ち、実行時ではなくコンパイル時にほとんどのエラーを除去します。
TypeScript JavaScriptライブラリとAPIドキュメントをサポートしています。
これは型指定が任意であるスクリプト言語なので、型を段階的に導入することができます。
TypeScript コードは平易な言葉に変換できます Javaあらゆるブラウザに対応したスクリプトコード。
これにより、より優れたコード構造とオブジェクト指向プログラミング技術が実現します。
これにより、オートコンプリートや安全なリファクタリングなど、開発時のツールサポートが向上します。
デコレータなどの機能を追加することで、標準規格を超えた言語拡張が可能になります。

最も大きな実質的な利点は、エディタのサポートです。コンパイラはすべての値の構造を把握しているため、エディタはプロジェクト全体でプロパティ名を変更し、一致しなくなった箇所をすべて報告できます。

TypeScript 沿革

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

XNUMX年間の社内開発を経て、 Microsoft, TypeScript バージョン0.9は2013年にリリースされました。
TypeScript ジェネリクスへの追加サポートを含むバージョン1.0は、Build 2014でリリースされました。
2014年XNUMX月、新たな TypeScript 以前のバージョンより5倍高速なコンパイラが登場しました。
2015年7月、ES6モジュール、名前空間キーワード、for…of、およびデコレータのサポートが追加されました。
2016年11月には、マップ型、キー型とルックアップ型、オブジェクトのレストとスプレッドが追加されました。
2018年3月27日、条件型と交差型を使用した改良版keyofが追加されました。
TypeScript 2023年3月にリリースされたバージョン5.0では、装飾ツールが近代化され、パッケージサイズが縮小されました。
TypeScript 6.0は、2026年3月に最終リリースとして登場しました。 Javaスクリプトのコードベース。
TypeScript 7.0ではコンパイラをネイティブGo実装に移行し、 Microsoft 6.0よりも約10倍速いと報告されている。

誰が使用するか TypeScript?

TypeScript はもはやニッチな選択肢ではありません。最も広く使われているフロントエンドおよびバックエンドツールの多くを支えており、以下のリストは初心者が遭遇する可能性が最も高い場所を示しています。

角度： Angularフレームワークは TypeScriptまた、アプリケーションコードもその言語で記述されることが想定されています。
ReactとVueのプロジェクト： 両方のエコシステムが公式に出荷します TypeScript テンプレートや、ほとんどの最新のスターターではデフォルトで有効になっています。
Node.jsバックエンド： NestJSなどのサーバーフレームワークは、 TypeScript 教室と装飾業者。
エディターツール： Visual Studio Code それ自体が大きな TypeScript コードベースが充実しているため、言語サポートが非常に充実しているのです。
大企業のフロントエンド： 多くの貢献者と協働するチームは、デプロイ前に統合エラーを検出するためにこれを採用している。

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

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

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

Node.jsの公式サイトにアクセスしてください。 https://nodejs.org/en/download/お使いのオペレーティングシステム用のNode.jsをダウンロードしてインストールしてください。詳細な手順は、ガイドに記載されています。 Node.jsのダウンロードとインストール方法.

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

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

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

最新のNode LTSリリースであればどれでも動作します。 TypeScript コンパイラを実行するために必要なのは、サポートされているNode.jsのバージョンだけです。

ステップ3） TypeScript 設置

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

npm init

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

これにより、プロジェクトの依存関係を格納するpackage.jsonファイルが作成されます。

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

npm -g install typescript

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

npm install --save-dev 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から（図のように）、またはnpx経由で実行します。

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

上記のコマンドを実行すると、test.js ファイルが作成され、そのファイルにはコンパイルされたコードが含まれます。 Java脚本。

例: test.js

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

実行する Javascript Nodejsを使用する

それでは、Node.jsでtest.jsを以下のように実行します。

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

console.logに渡された値は、test.jsの実行時に表示されます。

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

例：

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

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

TypeScript リリースされたすべてのECMAScript機能をサポートしており、開発者はコーディング時にこれらの機能を使用できます。ただし、すべての新機能が古いブラウザでサポートされているわけではないため、古いバージョンの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をターゲットとして使用します。

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

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

💡ヒント: 毎回コマンドラインでオプションを渡すのではなく、 tsc --init tsconfig.json ファイルを生成します。コンパイラは、そのファイルからプロジェクト全体のターゲット、出力ディレクトリ、および厳密な設定を読み取ります。

の変数 TypeScript

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

変数は定義されていないとコード内で使用できません。変数を宣言するには、次の方法を使用できます。

VAR キーワード、

うキーワード

定数キーワード

変数の操作 TypeScript に似ています Javaスクリプト、およびそれに精通しているユーザー Javaスクリプトはそれを非常に簡単に見つけるでしょう。現代のコードでは、う (NAIST) と定数より好まれる VARなぜなら、ブロックスコープによって、ある種のバグを完全に防ぐことができるからです。

var を使用した変数の宣言

構文：

var firstname = "Roy";

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

例1：

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

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    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; // t is redeclared inside the function, so changes stay local
    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(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

let を使用した変数の宣言

その TypeScript let の構文は以下のとおりです。

構文：

let name = "Roy";

の働きう変数はほぼ同じです VARしかし、重要な違いが一つあり、以下の例がそれを示しています。

例：

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

test(); // throws an error: Cannot find name 't'

上記 TypeScript この例ではエラーが発生しますが、同じコードでは VAR キーワード。変数はを使用して宣言されます。うは、宣言されたブロック内でのみ使用可能です。この例では、t は if ブロック内でのみ存在し、関数全体では存在しません。

これは、関数内、forループ、whileループ、switchブロックのいずれにおいても同様です。let変数は、そのブロック内でのみ使用可能であり、外部から参照するとエラーが発生します。これがvarとletの主な違いです。

constを使用した変数の宣言

constは定数変数を意味します。let変数と似ていますが、値が一度代入されると変更できない点が異なります。したがって、const宣言は同じ行で初期化する必要があります。

構文：

const name = "Roy";

例：

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

したがって、割り当てられた値が再割り当てされないことが確実な場合は、常に const を使用してください。const はバインディングの再割り当てを防止するものであり、それが指すオブジェクトの変更を防止するものではないことに注意してください。

入力内容 TypeScript

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

基本的な種類は以下のとおりです。

タイプ	受け入れる	宣言例
数	整数、浮動小数点数、および分数	let a: number = 10;
string	テキスト値のみ	let s: string = “hello”;
boolean	真偽のみ	let b: boolean = true;
どれか	任意の値、チェックは適用されません	let x: any = 123;
ボイド	戻り値がない	関数 f(): void {}

数

整数、浮動小数点数、小数、および同様の数値のみを受け付けます。

構文：

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

数値型で使用できる重要なメソッドをいくつか紹介します。

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

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

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

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

例：すべての数値メソッドを使用

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

文字列型で使用できる重要なメソッドをいくつか紹介します。

split() – このメソッドは文字列を配列に分割します。
charat() – このメソッドは、指定されたインデックスの文字を取得します。
の指標() – このメソッドは、指定された値の最初の出現位置を返します。
replace() – このメソッドは 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 if the value does not exist
_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 のみを受け入れます。通常の型とは異なり、 Javaスクリプトでは、0と1は数値型であるため、受け入れられません。

構文：

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

任意

構文：

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

変数は、 どれか 型には、文字列、数値、配列、ブール値、または空文字列を格納できます。 TypeScript コンパイル時のエラーは発生しません。これは、変数と同様です。 Javaスクリプト。変数に関連付けられる値の型が不明な場合にのみ、any type を使用してください。any type を使用すると、その値に対するすべてのチェックが無効になります。

空間

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

構文：

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

TypeScript 配列

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

Since TypeScript は厳密な型付け言語であるため、配列内の値のデータ型を指定する必要があります。指定しない場合、任意の型として扱われます。

配列の宣言と初期化

構文：

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 with all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

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

配列から要素を取得するには、インデックス0から配列の長さマイナス1までの値を使用します。

let years: Array<number> = [2016, 2017, 2018, 2019];
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]);
}

出力：

⚠️ 警告: ループ条件は i < years.length。書き込み i <= years.length 1回余分に実行して出力します undefinedなぜなら、最後の有効なインデックスは常に長さマイナス1だからです。

for-in ループの使用

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

出力：

for-of ループの使用

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

出力：

forEachループを使用する

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

出力：

TypeScript 配列メソッド

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

Member	目的	返品
長さ	配列内の要素数	数
逆行する（）	Reverseアイテムの配置順序	同じ配列
ソート（）	アイテムを所定の場所に整理します	同じ配列
ポップ（）	最後の項目を削除します	削除されたアイテム
シフト（）	最初の項目を削除します	削除されたアイテム
押す（）	最後の項目として値を追加します	新しい長さ
concat（）	2つの配列を1つに結合する	新しい配列

長さプロパティの例

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

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

逆の方法の例

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

ソート方法の例

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

Popメソッドの例

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

シフト法の例

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

プッシュ方式の例

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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

基本的なクラス構文は次のとおりです。 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

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

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コマンドを使用してコンパイルできます。 Java脚本。

Command: tsc  Students.ts

の出力 Javaコンパイル時のスクリプトコードは以下のとおりです。

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 Javaスクリプトでは、クラスが自己呼び出し関数に変換されます。

クラス継承

クラスは次を使用して継承できます。 拡張する のキーワード 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という2つのクラスがあります。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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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 は拡張クラスのコンストラクタを実行するからです。派生クラスで宣言されたプロパティ (tmarks など) は、明示的に代入する必要があります。そうしないと、getMarks は undefined を返します。

アクセス修飾子 TypeScript

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

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

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

例：

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 のシグネチャには width と height があり、どちらも必須です。いずれかのプロパティが欠落している場合、または型が変更されている場合は、コードをコンパイルする際にコンパイル時エラーが発生します。 Java脚本。

上記のコードは、コンパイルすると Javaスクリプトは以下のようになります。

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

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

関数の戻り値の型としてインターフェースを使用する

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

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

上記の例では、関数 getDimension() の戻り値の型として、インターフェース Dimension が使用されています。戻り値は、インターフェースで宣言されているプロパティと型に一致する必要があります。

コンパイルされた Javaスクリプトコードは以下のとおりです。

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"}); // "300px-250px"

上記の例では、関数 getDimension() の引数として Dimension インターフェースを使用しています。この関数を呼び出す際には、渡される引数がインターフェースで定義されたルールに一致している必要があります。

コンパイルされた Javaスクリプトコードは以下のとおりです。

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() というメソッドを定義しています。

コンパイルされた Javaスクリプトコードは以下のとおりです。

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

の機能 TypeScript

関数とは、タスクを実行するために実行される一連の命令のことです。 Javaスクリプトでは、コードの大部分は関数の形式で記述されており、関数は重要な役割を果たします。 TypeScript クラス、インターフェース、モジュール、名前空間が利用できますが、関数は依然として重要な役割を果たします。 Javaスクリプトと TypeScript パラメータと戻り値の型は、 TypeScript 機能。

Javaスクリプト機能:

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

TypeScript 関数：

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

上記の関数では、関数名は add で、パラメータは a1 (NAIST) と b1どちらも数値型であり、戻り値の型も数値です。関数に文字列を渡すと、コンパイル時にエラーが発生します。 Java脚本。

関数を呼び出すには: add

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

パラメータ a1 (NAIST) と b1 これらは必須項目であり、指定しない場合はエラーが発生します。パラメータの型と戻り値の型はどちらも重要であり、一度定義すると変更できません。

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

In Javaスクリプトでは、関数のすべてのパラメータはオプションであり、渡されない場合は未定義とみなされます。 TypeScriptパラメータを定義したら、それらを指定する必要があります。パラメータをオプションにする場合は、以下に示すように、パラメータ名の後に疑問符を追加します。

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

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

オプションパラメータは最後に定義する必要があることにご注意ください。最初のパラメータをオプション、2番目のパラメータを必須にすることはできません。コンパイラはどちらの値が指定されたかを判断できないためです。

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("");
}

上記のように、rest パラメータは、3 つのドットで始まる配列です。この配列には、関数に渡される残りのすべての引数が格納されます。

例：

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is 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();

0 に初期化されたプロパティ score を持つ関数と、内部で setTimeout を使用し、1 秒後に this.score をログに出力する getScore メソッドを作成しました。this.score は定義され初期化されているにもかかわらず、ログに出力された値は undefined です。問題は、このキーワード。setTimeout 内の関数は独自の this を持ち、score が定義されていないため、結果は undefined になります。

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

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

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

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

アロー関数には独自の関数はありませんこの代わりに親スコープの変数を共有するため、アロー関数内では、外部で宣言された変数にthisを使用してアクセスできます。構文が短いことに加え、コールバック、イベントハンドラ、タイミング関数にも便利です。

TypeScript 列挙型

A TypeScript enumは、関連する値の集合をまとめて格納するオブジェクトです。 JavaScript はネイティブに列挙型をサポートしていません。ほとんどのプログラミング言語では、 Java、C、および C++ 列挙型をサポートし、 TypeScript それらも利用可能になります。列挙型は、enum キーワードを使用して定義されます。

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

構文：

enum NameofEnum {
   value1,
   value2,
    ..
}

例: 列挙型

enum Directions {
    North,
    South,
    East,
    West
}

上記の例では、Directions という名前の列挙型を定義し、North、South、East、West という値を設定しています。値は最初のエントリが 0 で始まり、以降のエントリごとに 1 ずつ増加します。

数値を持つ列挙型を宣言する

デフォルトでは、列挙型メンバーに値が指定されていない場合、0から始まる数値が割り当てられます。次の例は、明示的な数値を持つ列挙型を示しています。

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

開始値を指定することもでき、その場合、以下のメンバーには増加した値が割り当てられます。例：

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

北は5から始まるので、南は6、東は7、西は8となります。

デフォルト値の代わりに、任意の値を割り当てることもできます。例：

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

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

コンパイルされた Javaスクリプトは以下のとおりです。

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 Javaスクリプトは列挙型をサポートしていないため、コンパイラは上記のように列挙型を自己呼び出し関数に変換します。二重代入によって逆マップが作成されます。ping 番号から名前へ。

文字列値を持つ列挙型を宣言する

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

例：

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 undefined

コンパイルされた Javaスクリプトは以下のとおりです。

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

⚠️ 警告: 文字列列挙型には逆マップがありませんping上記の2つのコンパイル済み出力を比較してください。数値列挙型は両方向を格納しますが、文字列列挙型は名前から値への対応のみを格納します。 Directions[0] 文字列列挙型の場合、undefined を返します。

モジュールとは 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キーワードを使用してエクスポートする必要があります。 エクスポート 変数、クラス、関数、またはインターフェースを別のファイルで使用したい場合に使用します。 インポート エクスポートされたアイテムにアクセスしたい場合に使用します。こうすることで、ファイル内のコードがそのまま保持され、同じ変数名を定義した場合でも、それらが混同されることはありません。

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

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

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

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable 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

上記のコマンドを実行すると、依存ファイルがJavaScriptファイルに変換されます。

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

名前空間は、クラス、インターフェース、変数、関数などの集合を1つのファイルにまとめて格納します。

名前空間の構文

namespace name{

export class {
}

export interface {
}

export const constname;

}

関連コードは一つの名前空間にまとめられています。

名前空間の動作例: 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 クラスにアクセスします。

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

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

以下のコマンドを使用して、コマンドプロンプトの出力を確認してください。

node namespace.js

出力：

The name is :H a r r y

アンビエント宣言 TypeScript

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

アンビエント構文

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

declare module moduleName {
   //code here
}

環境ファイルは次のように保存する必要があります。

filename.d.ts

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

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

アンビエント型宣言は TypeScript サードパーティライブラリを参照し、必要な関数を独自の型で再宣言します。たとえば、小さな Java以下にスクリプトライブラリを示します。

Third Party Javaスクリプトファイル: 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();
    }
};

StringChecks というオブジェクトがあり、その中に isString、convertToUpperCase、convertToLowerCase、convertToStringBold という関数があります。

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

次に、アンビエントモジュールを作成します。 Java上記のスクリプトは、必要に応じて型チェックを追加します。

ファイル名 : 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: 文字列): ブール値 文字列を受け取り、ブール値を返します。数値やその他の型を渡すと、コンパイルエラーが発生します。
convertToUpperCase(str: string): string 文字列を受け取り、文字列を返します。
convertToLowerCase(str: string): string 文字列を受け取り、文字列を返します。
ConvertToStringBold(str: string): 文字列 文字列を受け取り、文字列を返します。

から Javaスクリプトファイルではオブジェクト名StringChecksが公開されており、最終的に.d.tsファイルでも同じ名前を参照します。

declare var StringChecks: TestString.StringsFunc;

アンビエントモジュールを使用する TypeScript

以下は、環境ファイル tstring.d.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);

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

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

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

出力：

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

💡ヒント: 人気のあるライブラリでは、.d.ts ファイルを自分で作成する必要はほとんどありません。代わりに、コミュニティがメンテナンスしている型をインストールしてください。たとえば、 npm install --save-dev @types/lodashそしてコンパイラはそれらを自動的に認識します。

続けるには、2 つの言語を直接比較します。 TypeScript vs Javaスクリプト、再訪 Javaスクリプト配列メソッドここで使用されている型指定されていない同等物については、ループ Javaスクリプト (NAIST) と内部と外部 Javaスクリプトコンパイルされた出力が依存するブラウザの基本機能について。

よくあるご質問

いいえ。ブラウザが実行します Javaスクリプトのみを扱うため、.ts ファイルはまず tsc またはバンドラーでコンパイルする必要があります。型注釈はその段階で消去され、実行時のコストは発生しません。

はい。tsconfig.jsonでallowJsを有効にして、ファイルを1つずつ名前変更してください。 Javaスクリプトファイルは既に有効です TypeScript移行中もプロジェクトはコンパイルを継続します。

インターフェースは再オープンや拡張が可能であり、オブジェクトの形状を表す際の一般的な選択肢です。型エイリアスは、インターフェースでは表現できない共用体、タプル、プリミティブ型などもカバーします。

エクスポートとインポート機能を備えたモジュールを使用してください。名前空間はESモジュールよりも前から存在しており、主に宣言ファイルや古いスクリプトベースのコードベースで依然として有用です。

はい、確かにそうです。コンパイラは、誤ったプロパティや間違った引数型を即座に拒否するため、生成されたコードスニペットは型チェックを行うか、あるいはどこが間違っているかを正確に報告します。

エディタの統合機能により、周囲の型情報や.d.tsファイルがモデルコンテキストに取り込まれます。そのため、より詳細な注釈を使用することで、緩やかな型付けのコードよりも正確なコード補完が可能になります。