TypeScriptでJSONファイルを読み込む方法

1. fsモジュールを使用する方法: Node.js環境でTypeScriptを使用してJSONファイルを読み込む場合、fsモジュールを使用することができます。まず、以下のコマンドを使用してfsモジュールをインストールします。

npm install @types/node

次に、以下のコード例を使用してJSONファイルを読み込むことができます。

import * as fs from 'fs';
const readFile = (filePath: string): Promise<any> => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(JSON.parse(data));
      }
    });
  });
};
// 使用例
readFile('data.json')
  .then((jsonData) => {
    console.log(jsonData);
  })
  .catch((error) => {
    console.error(error);
  });

上記のコードでは、readFile関数を定義しています。この関数は指定されたファイルパスのJSONファイルを非同期に読み込み、解析したデータをPromiseとして返します。readFile関数を使用する際には、適切なファイルパスを指定してください。

2. XMLHttpRequestを使用する方法: ブラウザ環境でTypeScriptを使用してJSONファイルを読み込む場合、XMLHttpRequestを使用することができます。以下はコード例です。

const readFile = (filePath: string): Promise<any> => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', filePath, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else if (xhr.readyState === 4) {
        reject(new Error('Failed to load JSON file'));
      }
    };
    xhr.send();
  });
};
// 使用例
readFile('data.json')
  .then((jsonData) => {
    console.log(jsonData);
  })
  .catch((error) => {
    console.error(error);
  });

上記のコードでは、readFile関数を定義しています。この関数は指定されたファイルパスのJSONファイルを非同期に読み込み、解析したデータをPromiseとして返します。こちらも適切なファイルパスを指定して使用してください。

以上が、TypeScriptでJSONファイルを読み込む方法のいくつかの例です。適切な方法を選んで使用してください。