TypeScript インターフェイスで配列を定義する

JSON データのオブジェクト表現を作成することは、NoSQL データベースを使用する開発者にとって一般的な開発アプローチです。 これは、NoSQL データベースが JSON を使用してデータを保存するためです。

これらのデータは、データの状態に応じて、文字列、数値、カスタム オブジェクトなど、さまざまな種類のデータ型を使用してプログラミング言語で表すことができます。

このチュートリアルでは、インターフェイスで配列を作成し、この配列に JSON ファイルに保存されたデータを入力する方法を学習します。 JSON ファイルにはデータの配列が含まれており、これらのデータはアプリケーションのカスタム TypeScript オブジェクトにマップされます。

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

WebStorm IDEA を開き、File > New > Project を選択します。 開いたウィンドウの左側にある Node.js を選択し、プロジェクト名を untitled から array-of-strings に変更するか、任意の名前を入力します。

node ランタイム環境は、プロジェクトを作成する前にインストールして、Node interpreter および Package manager セクションが自動的に入力されるようにする必要があります。 最後に、Create ボタンを押してプロジェクトを生成します。

TypeScript 構成ファイルの生成

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

~/WebstormProjects/array-of-strings$ tsc --init

tsconfig.json を開き、プロパティ noEmitOnError: true および resolveJsonModule: true を追加します。 最初のプロパティは、トランスパイル エラーが発生した場合に JavaScript ファイルが生成されるのを防ぎます。2 番目のプロパティは、データを含む JSON ファイルを読み取ることを許可します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "resolveJsonModule": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

データの JSON ファイルを作成する

array-of-strings フォルダーの下に books.json という名前のファイルを作成し、次の JSON データをコピーしてファイルに貼り付けます。

[
  {
    "name": "Introduction to Java",
    "author": "john doe"
  },
  {
    "name": "Advanced databases",
    "author": "peter parker"
  }
]

JSON データはオブジェクトの配列を保持し、各オブジェクトにはプロパティ name と author があります。 簡単に言えば、JSON データ内の各オブジェクトは、次のセクションで定義される Book インスタンスを表します。

Book クラスを定義する

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

class Book{
    constructor(private name: string,private author: string) {
        this.name = name
        this.author = author
    }
}

このコードでは、プロパティ name と author を持つ Book クラスを定義しました。これらは JSON データの同じプロパティです。 次のセクションでは、Book クラスを使用して、インターフェイスで書籍の配列を定義します。

ブックの配列のインターフェイスを定義する

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

export interface BookService{
    books: Book[];
}

このファイルでは、books という名前を使用して本の配列を定義する BookService という名前のインターフェイスを作成しました。 このインターフェイスを実装するクラスは、books 配列を実装する必要があることに注意してください。次のセクションでは、これがどのように行われるかを示します。

配列を使用して JSON データを使用する

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

import bookSource from "./books.json"
import {BookService} from "./BookService";

class BookServiceImpl implements BookService{
    books: Book[] = JSON.parse(JSON.stringify(bookSource));

    logBooks(): void{
        this.books.forEach(book => console.log(book));
    }
}

function main(){
    const bookService = new BookServiceImpl();
    bookService.logBooks();
}
main();

このファイルでは、BookService を実装する BookServiceImpl という名前のクラスを作成しました。 books 配列を実装する必要があることに注意してください。これは、前のセクションで説明した要件です。

配列は books.json ファイルのデータを使用し、bookSource という名前の import ステートメントを使用してデータにアクセスします。 stringify() メソッドは bookSource を JSON 文字列に変換し、parse() メソッドは返された JSON 文字列を使用して本の配列を作成します。

logBooks() メソッドは、forEach() メソッドを使用して、テスト目的で書籍オブジェクトの配列をコンソールに記録します。 main() メソッドは BookServiceImpl クラスのインスタンスを生成し、このインスタンスを使用して logBook() メソッドを呼び出します。

次のコマンドを使用してこのコードを実行します。

~/WebstormProjects/array-of-strings$ tsc && node BookServiceImpl.js

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

{ name: 'Introduction to Java', author: 'john doe' }
{ name: 'Advanced databases', author: 'peter parker' }

まとめ

この記事では、TypeScript インターフェースで配列を定義し、配列を使用して JSON ファイルからデータを使用する方法を学びました。 ユーザーと対話するアプリケーションを開発する場合、通常はファイルではなくデータベースを使用することに注意してください。

このチュートリアルではカスタム オブジェクトを使用しましたが、文字列、数値など、他の型を使用することもできます。