基于JS怎么將JSON數(shù)據(jù)轉(zhuǎn)換為T(mén)ypeScript類(lèi)型聲明的工具

這篇文章主要介紹“基于JS怎么將JSON數(shù)據(jù)轉(zhuǎn)換為T(mén)ypeScript類(lèi)型聲明的工具”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“基于JS怎么將JSON數(shù)據(jù)轉(zhuǎn)換為T(mén)ypeScript類(lèi)型聲明的工具”文章能幫助大家解決問(wèn)題。

一、實(shí)現(xiàn)的功能

• 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類(lèi)型定義。

• 支持嵌套的復(fù)雜類(lèi)型，如數(shù)組和對(duì)象。

• 支持自定義類(lèi)型名稱(chēng)和命名空間。

• 支持將轉(zhuǎn)換后的 TypeScript 類(lèi)型定義保存為文件。

二、工具使用方法

安裝工具：

npm install -g my-json-to-ts

運(yùn)行工具：

my-json-to-ts input.json output.ts

其中 input.json 是要轉(zhuǎn)換的 JSON 文件路徑，output.ts 是轉(zhuǎn)換后的 TypeScript 文件路徑。

--name 類(lèi)型名稱(chēng)    # 指定轉(zhuǎn)換后的類(lèi)型名稱(chēng)，默認(rèn)為 JsonType
--namespace 命名空間 # 指定轉(zhuǎn)換后的命名空間，默認(rèn)為無(wú)
--no-file          # 不將轉(zhuǎn)換后的 TypeScript 類(lèi)型定義保存為文件

三、實(shí)現(xiàn)思路

• 讀取輸入的 JSON 文件，解析成 JSON 對(duì)象。

• 遍歷 JSON 對(duì)象，根據(jù)不同的類(lèi)型生成對(duì)應(yīng)的 TypeScript 類(lèi)型定義字符串。

• 如果指定了類(lèi)型名稱(chēng)和命名空間，則在生成的 TypeScript 類(lèi)型定義字符串前面添加對(duì)應(yīng)的聲明。

• 如果指定了保存文件，則將生成的 TypeScript 類(lèi)型定義字符串寫(xiě)入文件。

四、使用示例

以下是將JSON 數(shù)據(jù)和轉(zhuǎn)換后的 TypeScript 類(lèi)型定義示例：

簡(jiǎn)單的JSON 數(shù)據(jù)

{
  "name": "John",
  "age": 30,
  "address": {
    "city": "New York",
    "state": "NY"
  },
  "hobbies": [
    "reading",
    "traveling"
  ]
}

輸出對(duì)應(yīng)簡(jiǎn)單的類(lèi)型定義

interface JsonType {
  name: string;
  age: number;
  address: {
    city: string;
    state: string;
  };
  hobbies: string[];
}

復(fù)雜的JSON 數(shù)據(jù)

{
  "name": "John",
  "age": 30,
  "address": {
    "city": "New York",
    "state": "NY",
    "postalCode": 10001
  },
  "friends": [
    {
      "name": "Jane",
      "age": 28,
      "address": {
        "city": "Los Angeles",
        "state": "CA"
      }
    },
    {
      "name": "Bob",
      "age": 35,
      "address": {
        "city": "Chicago",
        "state": "IL"
      }
    }
  ],
  "hobbies": [
    "reading",
    "traveling",
    {
      "name": "swimming",
      "location": "pool"
    }
  ]
}

輸出對(duì)應(yīng)復(fù)雜類(lèi)型定義

interface JsonType {
  name: string;
  age: number;
  address: {
    city: string;
    state: string;
    postalCode: number;
  };
  friends: {
    name: string;
    age: number;
    address: {
      city: string;
      state: string;
    };
  }[];
  hobbies: (string | {
    name: string;
    location: string;
  })[];
}

五、具體實(shí)現(xiàn)代碼

首先引入兩個(gè) Node.js 模塊：fs-extra 和 commander。fs-extra 是一個(gè)簡(jiǎn)化了 Node.js 文件系統(tǒng)模塊的封裝，而 commander 是一個(gè)命令行工具的庫(kù)，可以方便地解析命令行參數(shù)。

接下來(lái)定義一個(gè)函數(shù) jsonToTs，用于將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類(lèi)型定義字符串。該函數(shù)采用遞歸的方式遍歷 JSON 數(shù)據(jù)，生成對(duì)應(yīng)的 TypeScript 類(lèi)型定義。如果 JSON 數(shù)據(jù)是數(shù)組，則遞歸處理其中的每個(gè)元素；如果是對(duì)象，則遞歸處理其中的每個(gè)屬性。最終，該函數(shù)返回一個(gè) TypeScript 類(lèi)型定義字符串。

然后定義了兩個(gè)異步函數(shù)，readJson 和 writeTs，分別用于讀取 JSON 文件和將 TypeScript 類(lèi)型定義字符串寫(xiě)入文件。

最后定義一個(gè)名為 jsonToTsFile 的函數(shù)，該函數(shù)接收命令行參數(shù)并將其傳遞給 jsonToTs 函數(shù)，然后將生成的 TypeScript 類(lèi)型定義字符串保存到文件中。如果命令行參數(shù)中指定了不保存文件，則該函數(shù)將直接將 TypeScript 類(lèi)型定義字符串輸出到控制臺(tái)。

  const fs = require('fs-extra');
  const commander = require('commander');

  /**
   * 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類(lèi)型定義
   * @param {Object} object - 要轉(zhuǎn)換的 JSON 對(duì)象
   * @param {string} [name=JsonType] - 轉(zhuǎn)換后的類(lèi)型名稱(chēng)
   * @param {string} [namespace] - 轉(zhuǎn)換后的命名空間
   * @returns {string} - 轉(zhuǎn)換后的 TypeScript 類(lèi)型定義字符串
   */
  function jsonToTs(object, name = 'JsonType', namespace) {
      const getType = value => {
          let typeRes = ``;
          if (Array.isArray(value)) {
              value.forEach(item => {

                  let subType = getType(item);
                  if (typeRes.split('|').indexOf(subType) < 0) {
                      typeRes += subType
                      typeRes += "|"
                  }
              })
              typeRes = typeRes.substring(0, typeRes.length - 1)
              return `(${typeRes})[]`;
          }
          if (typeof value === 'object' && value !== null) {
              const props = Object.entries(value)
                  .map(([key, val]) => `${key}: ${getType(val)}`)
                  .join('; ');
              return `{ ${props} }`;
          }
          return typeof value;
      };

      const type = getType(object);

      const declaration = `interface ${name} ${type}`;

      return namespace ? `namespace ${namespace} { \r\n ${declaration} \r\n}` : declaration;
  }

  /**
   * 讀取文件并解析成 JSON 對(duì)象
   * @param {string} path - 文件路徑
   * @returns {Promise<Object>} - JSON 對(duì)象
   */
  async function readJson(path) {
      const content = await fs.readFile(path, 'utf8');
      return JSON.parse(content);
  }

  /**
   * 將 TypeScript 類(lèi)型定義字符串寫(xiě)入文件
   * @param {string} content - TypeScript 類(lèi)型定義字符串
   * @param {string} path - 文件路徑
   * @returns {Promise<void>}
   */
  async function writeTs(content, path) {
      await fs.writeFile(path, content, 'utf8');
  }

  /**
   * 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類(lèi)型定義
   * @param {string} inputPath - 輸入 JSON 文件路徑
   * @param {string} outputPath - 輸出 TypeScript 文件路徑
   * @param {string} [options.name=JsonType] - 轉(zhuǎn)換后的類(lèi)型名稱(chēng)
   * @param {string} [options.namespace] - 轉(zhuǎn)換后的命名空間
   * @param {boolean} [options.noFile] - 不將 TypeScript 類(lèi)型定義保存為文件
   * @returns {Promise<void>}
   */

  async function jsonToTsFile(inputPath, outputPath, options) {
      const { name, namespace, noFile } = options
      try {
          const object = await readJson(inputPath);
          const type = jsonToTs(object, name, namespace);
          if (noFile) {
              console.log(type);
          } else {
              await writeTs(type, outputPath);
              console.log(`Type definition saved to ${outputPath}`);
          }
      } catch (err) {
          console.error(err.message);
      }
  }

  const program = new commander.Command();

  program
      .arguments('<input> <output>')
      .option('--no-file', 'do not save to file')
      .option('-s, --namespace <namespace>', 'type namespace')
      .option('-n, --name <name>', 'type name', 'JsonType')
      .action(jsonToTsFile);

  program.parse(process.argv);

關(guān)于“基于JS怎么將JSON數(shù)據(jù)轉(zhuǎn)換為T(mén)ypeScript類(lèi)型聲明的工具”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。