怎么實(shí)現(xiàn)自動生成typescript類型聲明工具

本篇內(nèi)容主要講解“怎么實(shí)現(xiàn)自動生成typescript類型聲明工具”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么實(shí)現(xiàn)自動生成typescript類型聲明工具”吧!

在TypeScript 項(xiàng)目中，我們經(jīng)常需要使用聲明一系列的ts類型。然而，手動寫的效率實(shí)在太低，編寫一個自動生成ts類型的工具可以解放生產(chǎn)力。 實(shí)現(xiàn)一個工具將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類型定義，從而讓 TypeScript 項(xiàng)目更高效的開發(fā)。

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

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

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

• 支持自定義類型名稱和命名空間。

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

二、工具使用方法

1.在線playground使用：在線json轉(zhuǎn)ts類型聲明

2.已經(jīng)發(fā)布到npm：my-json-to-ts - npm (npmjs.com)

運(yùn)行效果如下動圖：

安裝工具：

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 類型名稱    # 指定轉(zhuǎn)換后的類型名稱，默認(rèn)為 JsonType
--namespace 命名空間 # 指定轉(zhuǎn)換后的命名空間，默認(rèn)為無
--no-file          # 不將轉(zhuǎn)換后的 TypeScript 類型定義保存為文件

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

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

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

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

• 如果指定了保存文件，則將生成的 TypeScript 類型定義字符串寫入文件。

四、使用示例

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

簡單的JSON 數(shù)據(jù)

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

輸出對應(yīng)簡單的類型定義

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"
    }
  ]
}

輸出對應(yīng)復(fù)雜類型定義

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)代碼

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

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

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

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

  const fs = require('fs-extra');
  const commander = require('commander');
  /**
   * 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類型定義
   * @param {Object} object - 要轉(zhuǎn)換的 JSON 對象
   * @param {string} [name=JsonType] - 轉(zhuǎn)換后的類型名稱
   * @param {string} [namespace] - 轉(zhuǎn)換后的命名空間
   * @returns {string} - 轉(zhuǎn)換后的 TypeScript 類型定義字符串
   */
  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)
               if (typeRes.split('|').length > 1) {
                  return `(${typeRes})[]`;
                } else {
                  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 對象
   * @param {string} path - 文件路徑
   * @returns {Promise<Object>} - JSON 對象
   */
  async function readJson(path) {
      const content = await fs.readFile(path, 'utf8');
      return JSON.parse(content);
  }
  /**
   * 將 TypeScript 類型定義字符串寫入文件
   * @param {string} content - TypeScript 類型定義字符串
   * @param {string} path - 文件路徑
   * @returns {Promise<void>}
   */
  async function writeTs(content, path) {
      await fs.writeFile(path, content, 'utf8');
  }
  /**
   * 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 TypeScript 類型定義
   * @param {string} inputPath - 輸入 JSON 文件路徑
   * @param {string} outputPath - 輸出 TypeScript 文件路徑
   * @param {string} [options.name=JsonType] - 轉(zhuǎn)換后的類型名稱
   * @param {string} [options.namespace] - 轉(zhuǎn)換后的命名空間
   * @param {boolean} [options.noFile] - 不將 TypeScript 類型定義保存為文件
   * @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);

到此，相信大家對“怎么實(shí)現(xiàn)自動生成typescript類型聲明工具”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！