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

1. 新しいプロジェクトを作成する
2. TypeScript 構成ファイルの生成
3. データの JSON ファイルを作成する
4. Book クラスを定義する
5. ブックの配列のインターフェイスを定義する
6. 配列を使用して JSON データを使用する
7. まとめ

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 ファイルからデータを使用する方法を学びました。 ユーザーと対話するアプリケーションを開発する場合、通常はファイルではなくデータベースを使用することに注意してください。

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