TypeScript で空の配列を作成する

1. 新しいプロジェクトを作成する
2. TypeScript 構成ファイルの生成
3. 配列のクラス タイプを作成する
4. TypeScript で明示的な型宣言を使用して空の配列を作成する
5. 型アサーションを使用して TypeScript で空の配列を作成する
6. 配列コンストラクターを使用して TypeScript で空の配列を作成する
7. まとめ

配列は、線形アプローチを使用して要素を格納するデータ構造です。 これは、要素の順序が連続しており、現在の要素の前後の要素にアクセスできるためです。

配列は、他のデータ構造と比較して、アプリケーションを開発するときによく使用されます。 たとえば、データベースまたはサービスからデータ項目のコレクションを取得してアプリケーションに表示する場合、通常は配列を使用してこれを実現します。

まず、ソースから取得した型の配列を宣言し、その配列をオブザーバブルにサブスクライブします。 オブザーバブルは、ソースから取得したアイテムを配列に追加し、配列アイテムがアプリケーションに表示されます。

このチュートリアルでは、後でデータを入力できる TypeScript で空の配列を作成する方法を示します。

新しいプロジェクトを作成する

WebStorm IDEA を開き、File > New > Project を選択します。 開いたフレームで、フレームの左側にある Node.js セクションを選択します。

右側の Location セクションで、プロジェクト名を untitled から empty-array に変更します。

このプロジェクトを作成する前に、ノード ランタイム環境をインストールして、ノード インタープリター セクションと パッケージ マネージャー セクションをシステムから自動的に読み取ることができるようにする必要があります。

TypeScript 構成ファイルの生成

プロジェクトが生成されたら、ショートカット ALT+F12 を使用して新しいターミナル ウィンドウを開き、次のコマンドを使用して tsconfig.json ファイルを生成します。

~/WebstormProjects/empty-array$ tsc --init

出力：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true
  }
}

構成ファイルに加えた唯一の変更は、トランスパイル エラーの場合に JavaScript ファイルが生成されないようにする noEmitOnError: true プロパティを追加することです。

配列のクラス タイプを作成する

empty-array フォルダーの下に Phone.js という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

export class Phone{
    constructor(private id: number,
                private make: string,
                private name: string,
                private price: number) {
    }
}

このコードでは、プロパティ id、make、name、および price を含む Phone という名前のクラスを作成しました。 このクラスを配列の型として使用しますが、文字列や数値などの任意のデータ型を自由に使用できます。

export キーワードは、このファイルがモジュールであることを示し、次のセクションで示すように、Phone クラスは別のアプリケーション モジュールで使用されます。

TypeScript で明示的な型宣言を使用して空の配列を作成する

empty-array フォルダーの下に Main.js という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

import {Phone} from "./Phone";

function usingExplicitType(): Phone[]{
    return [];
}

function main(){
    if (usingExplicitType().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

このコードでは、電話オブジェクト Phone[] の配列を返す usingExplicitType() という名前のメソッドを作成しました。 空の配列を返したいので、メソッド内のコードは、オブジェクトを作成せずに明示的に空の配列を返します。

メソッドが配列を返すことがわかっているので、その長さを確認するために length プロパティを呼び出すことができます。 配列の長さが 0 の場合、配列には要素がありません。

このモジュールで Phone クラスを使用するために import キーワードを使用したことに注意してください。

コードが期待どおりに機能することを確認するには、次のコマンドを使用して、具体的な実装を定義する main() 関数を実行します。

~/WebstormProjects/empty-array$ tsc && node Main.js

tsc コマンドは TypeScript コードを JavaScript コードにトランスパイルし、node コマンドは Main.js ファイルを実行します。 出力が次のようになっていることを確認します。

The array has no phone instances

型アサーションを使用して TypeScript で空の配列を作成する

Main.js ファイルの usingExplicitType() メソッドの後に、以下のコードをコピーして貼り付けます。

function usingTypeAssertion(): Phone[]{
    return [] as Phone[]; // return <Phone[]>[];

}

function main(){
    if (usingTypeAssertion().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

このコードでは、電話オブジェクト Phone[] の空の配列を返す usingTypeAssertion() という名前のメソッドを作成しました。

このメソッドは、型アサーションを使用して、電話オブジェクトの空の配列を返すという目的を達成します。 型アサーションは as キーワードを使用して示されます。

main() メソッドは、前の例と同じように機能します。

前の例で使用したコマンドを使用してこのコードを実行し、出力が次のようになっていることを確認します。

The array has no phone instances

配列コンストラクターを使用して TypeScript で空の配列を作成する

Main.js ファイルの usingTypeAssertion() メソッドの後に、以下のコードをコピーして貼り付けます。

function usingArrayConstructor(): Phone[]{
    return new Array<Phone>();
}

function main(){
    if (usingArrayConstructor().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

このコードでは、前の例で行ったように、電話オブジェクト Phone[] の配列を返す usingArrayConstructor() という名前のメソッドを作成しました。

TypeScript の配列はオブジェクトであるため、要素を渡さずに new キーワードを使用してコンストラクター new Array<Phone>() を呼び出し、空の配列を返します。 Array インターフェイスはそのジェネリック実装の 1つを使用してこれを実現しているため、ジェネリック パラメータの引数として Phone を渡して、空の電話オブジェクトのみが返されるようにしていることに注意してください。

前の例で使用したコマンドを使用してこのコードを実行し、出力が次のようになっていることを確認します。

The array has no phone instances

まとめ

このチュートリアルでは、TypeScript で空の配列を作成する方法を説明しました。 これまで取り上げてきたアプローチには、明示的な型宣言、型アサーション、および配列コンストラクターの使用が含まれます。