Angular は、タイプ セーフティを導入する JavaScript のスーパーセットである TypeScript に基づいて構築されており、開発者は実行時ではなく開発中に潜在的なエラーを検出できます。 TypeScript に慣れている開発者にとっては、これは見慣れた風景でしょうが、TypeScript を初めて使用する場合は、静的型付け、インターフェイス、[ などの主要な機能のいくつかを確認してみましょう。 &&&]クラス プロパティ、および アクセシビリティ レベル (パブリックおよびプライベートなど)。これらの機能は、Angular 開発の過程を通じて非常に重要になります。

1. 静的型付け

TypeScript の中核機能の 1 つは静的型付けです。変数が任意の型の値を保持できる JavaScript とは異なり、TypeScript では変数、プロパティ、パラメーターの型を

明示的に指定 できます。

プレーンな JavaScript では、次のように変数を宣言できます:

let name = "ウィスカー"; 年齢 = 5 とします。

let name = "Whiskers";
let age = 5;

TypeScript では、変数宣言にデータ型を追加することでデータ型を強制できます:

レット名: string = "ひげ"; 年齢を数値 = 5 にします。

let name = "Whiskers";
let age = 5;

この設定では、TypeScript は、name が常に文字列であり、age が常に数値であることを保証します。 age に文字列などの無効な値を割り当てようとすると、TypeScript コンパイラはエラーをスローし、コードはコンパイルされません。

これにより、開発中にエラーを検出してコード内の潜在的なバグを防ぐことができ、コードの正しさに対する自信が高まります。

2. インターフェース

TypeScript では、

インターフェイスを使用してオブジェクトの形状を定義できます。これは、必要なプロパティとその型を指定できることを意味し、TypeScript は、このインターフェイスに割り当てられたすべてのオブジェクトがその形状に準拠していることを保証します。

たとえば、Cat オブジェクトのインターフェイスを定義してみましょう:

インターフェース猫 { 名前: 文字列; 年齢: 番号; 品種?: 文字列; // オプションのプロパティ }

let name = "Whiskers";
let age = 5;

ここで、猫オブジェクトを作成するときは、次のインターフェイスに従う必要があります:

constふわふわ: Cat = { 名前：「ふわふわ」、 年齢: 3歳 };

let name = "Whiskers";
let age = 5;

この場合、名前と年齢は必須フィールドですが、品種は?があるためオプションです。インターフェイスに準拠していない Cat オブジェクトを割り当てようとすると、TypeScript は問題にフラグを立てます:

const lowerCat: Cat = { 名前：「ウィスカー」、 // 'age' プロパティがありません };

let name = "Whiskers";
let age = 5;

? を使用してプロパティをオプションにすることもできます。シンボルを使用すると、必要に応じて柔軟性が得られますが、型の安全性は維持されます。

3. クラスのプロパティ

TypeScript クラスは JavaScript クラスに似ていますが、追加のタイプ セーフティと機能が備わっています。たとえば、クラス プロパティの型を明示的に宣言できます:

クラス猫 { 名前: 文字列; 年齢: 番号; コンストラクター(名前: 文字列、年齢: 数値) { this.name = 名前; this.age = 年齢; } }

let name = "Whiskers";
let age = 5;

これにより、名前が常に文字列になり、年齢が常に数値になることが保証されます。さらに、コンストラクターで初期化せずにプロパティを定義することもできます:

クラス猫 { 名前: 文字列; 品種?: 文字列; }

let name = "Whiskers";
let age = 5;

TypeScript は、これらのプロパティが宣言した型に準拠していることを保証し、コードをより予測可能にし、デバッグを容易にします。

4. 公的および私的なアクセシビリティ

TypeScript のもう 1 つの重要な機能は、パブリック アクセス修飾子とプライベート アクセス修飾子を使用してクラス メンバー (プロパティとメソッド) への

アクセシビリティ を制御できることです。デフォルトでは、すべてのクラス メンバーは JavaScript と TypeScript の両方でパブリックです。つまり、どこからでもアクセスできます。ただし、クラス メンバーを明示的にプライベートとしてマークして、クラス内でのアクセスを制限することができます。

例えば：

クラス猫 { パブリック名: 文字列; プライベート年齢: 数字; コンストラクター(名前: 文字列、年齢: 数値) { this.name = 名前; this.age = 年齢; } 話す（） { 返します「ニャー！」私は ${this.name}` です。 } }

let name = "Whiskers";
let age = 5;

この例では、name プロパティはパブリックであるため、クラス外からアクセスできますが、age プロパティはプライベートであるため、クラス自体内でのみアクセスできます。

const ひげ = new Cat("ひげ", 5); console.log(ひげの名前); // 正常に動作します console.log(ひげ.年齢); // エラー: '年齢' は非公開です

let name = "Whiskers";
let age = 5;

private を使用するとカプセル化が保証され、偶発的な変更やクラス外からの機密クラス データへのアクセスが防止されます。

5. コンストラクターの短縮表記

TypeScript は、コンストラクターを介してプロパティを宣言および初期化するための便利な

短縮表記 を提供します。プロパティを手動で宣言してコンストラクターで割り当てる代わりに、コンストラクターのパラメーター リストで直接宣言できます。

これが基本的な例です:

クラス猫 { コンストラクター(パブリック名: 文字列、プライベート年齢: 数値) {} }

let name = "Whiskers";
let age = 5;

このコードは機能的には次と同等です:

クラス猫 { パブリック名: 文字列; プライベート年齢: 数字; コンストラクター(名前: 文字列、年齢: 数値) { this.name = 名前; this.age = 年齢; } }

let name = "Whiskers";
let age = 5;

コンストラクターの短縮表現はコードを簡素化し、繰り返しを減らします。 TypeScript は必要なプロパティの宣言と割り当てを自動的に生成するため、余分なコードを記述する必要がありません。

結論

この記事では、Angular 開発で頻繁に遭遇する重要な TypeScript 機能のいくつかについて説明しました。

• 静的型付けにより、変数、プロパティ、パラメータの型が一貫したものになります。
• インターフェイスを使用すると、オブジェクトの形状を定義し、コードにさらに構造を追加できます。
• クラス プロパティは、クラスにフィールドの明示的でタイプセーフな宣言を提供します。
• パブリックおよびプライベートのアクセシビリティにより、クラス メンバーへのアクセス制御が保証され、コードのカプセル化が向上します。
• コンストラクターの略記は、クラス内のプロパティを初期化するプロセスを簡素化します。

これらの TypeScript 機能は、堅牢で保守可能な Angular アプリケーションを作成するための基礎です。これらを理解することは、スケーラブルでタイプセーフなアプリケーションを構築する際に、Angular の可能性を最大限に活用するのに役立ちます。

次に、Angular 用の

開発環境の準備に進み、開始するために必要なツールをセットアップしましょう!