TypeScript 杂记七 《JSON Parser》

已于 2022-02-28 19:06:42 修改
阅读量547 收藏
点赞数
文章标签： typescript json javascript
于 2022-02-28 19:01:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20282263/article/details/123189380
版权

TypeScript 杂记七 《JSON Parser》

JSON Parser

思路

  • 先写主类型的大概
    • 如果是 {} 包裹则返回 ParserObject
    • 如果是 [] 包裹则返回 ParserArray
    • 否则返回原本的数据，这里我们额外处理一下 true，false，null
    • 不考虑 Numbers 和 Unicode
type Parser<T extends string> = T extends `{${infer S}}`
  ? ParserObject<S>
  : T extends `[${infer S}]`
  ? ParserArray<S>
  : T extends "true"
  ? true
  : T extends "false"
  ? false
  : T extends "null"
  ? null
  : // Numbers and Unicode escape (\uxxxx) in JSON can be ignored. You needn't to parse them.
    T;
  • 考虑到下边几种情况，因此我们要先处理一下数据
    • " {"a":1} " 处理前后空格
    • "aaa" 返回的是 "\"aaa\""，因此需要处理一下前后的引号
type TrimBase<
  T extends string,
  R extends string = " "
> = T extends `${R}${infer S}`
  ? TrimBase<S, R>
  : T extends `${infer S}${R}`
  ? TrimBase<S, R>
  : T;
// 处理空格->处理引号
type Trim<T extends string> = TrimBase<TrimBase<T>, '"'>;

type ParserHelper<T extends string> = T extends `{${infer S}}`
  ? ParserObject<Trim<S>> // 特殊解决一下 {    } 这种情况
  : T extends `[${infer S}]`
  ? ParserArray<S>
  : T extends "true"
  ? true
  : T extends "false"
  ? false
  : T extends "null"
  ? null
  : // Numbers and Unicode escape (\uxxxx) in JSON can be ignored. You needn't to parse them.
    T;
type Parser<T extends string> = ParserHelper<Trim<T>>;

  • 采用递归的形式

    • 先解析出最一层的数据，拿到 key 和 value
    • value 则再次调用 Parser
    • 重复第一步

  • ParserArray 的实现

    • 传入的数据不带去掉最外层的 []
    • 理论上对于一个普通数字，遇到 , 则前边的内容的表示是一项
    • 但是因为有可能是一个对象或者数组我们需要额外处理一下
      • V 用来临时存储数据
      • L 用来存储遇到的 [ { 个数
      • 如果遇到 [ 或者 { 则 L 数组加一
      • 如果遇到 ] 或者 } 则 L 数组减一
      • 如果遇到 , 且 L 数组为空，则表示一项完成了，把 V 存到 R 里边，继续下一项
      • 否则就把对应的字符加入到 V 中
    • 注意：存入的 V 值，需要递归去调用 Parser
type ParserArray<
  T extends string,
  R extends string[] = [],
  V extends string = "",
  L extends unknown[] = []
> = T extends `${infer S}${infer E}`
  ? S extends ","
    ? L extends []
      ? ParserArray<E, [...R, Parser<V>], "", L>
      : ParserArray<E, R, `${V}${S}`, L>
    : S extends "[" | "{"
    ? ParserArray<E, R, `${V}${S}`, [...L, unknown]>
    : S extends "}" | "]"
    ? L extends [unknown, ...infer B]
      ? ParserArray<E, R, `${V}${S}`, B>
      : ParserArray<E, R, `${V}${S}`, L>
    : ParserArray<E, R, `${V}${S}`, L>
  : [...R, Parser<V>];
  • ParserObject 的实现
    • 不同的是我们需要两个参数，用来存储 K 和 V
    • L=false 获取 K，只要遇到 : 就停止前边的内容就是对应的 key
    • L=true 获取值，这里的逻辑就和数组是一样的，不同的是这里只求一项
    • 求出 value 的时候，我们把 K 和 V 存到 R 中，重新开始下一项
type ParserObject<
  T extends string,
  R extends Record<string, any> = {},
  K extends string = "",
  V extends string = "",
  F extends boolean = false,
  L extends unknown[] = []
> = T extends `${infer S}${infer E}`
  ? F extends false
    ? S extends ":"
      ? ParserObject<E, R, Trim<K>, V, true, L>
      : ParserObject<E, R, `${K}${S}`, V, F, L>
    : S extends ","
    ? L extends []
      ? ParserObject<
          E,
          { [P in keyof R]: R[P] } & { [P in K]: Parser<V> },
          "",
          "",
          false,
          L
        >
      : ParserObject<E, R, K, `${V}${S}`, F, L>
    : S extends "[" | "{"
    ? ParserObject<E, R, K, `${V}${S}`, F, [...L, unknown]>
    : S extends "]" | "}"
    ? L extends [unknown, ...infer B]
      ? ParserObject<E, R, K, `${V}${S}`, F, B>
      : ParserObject<E, R, K, `${V}${S}`, F, L>
    : ParserObject<E, R, K, `${V}${S}`, F, L>
  : K extends ""
  ? { [P in keyof R]: R[P] }
  : ParserObject<
      "",
      { [P in keyof R]: R[P] } & { [P in K]: Parser<V> },
      "",
      "",
      false,
      L
    >;

完整示例

type TrimBase<
  T extends string,
  R extends string = " "
> = T extends `${R}${infer S}`
  ? TrimBase<S, R>
  : T extends `${infer S}${R}`
  ? TrimBase<S, R>
  : T;
type Trim<T extends string> = TrimBase<TrimBase<T>, '"'>;

type ParserObject<
  T extends string,
  R extends Record<string, any> = {},
  K extends string = "",
  V extends string = "",
  F extends boolean = false,
  L extends unknown[] = []
> = T extends `${infer S}${infer E}`
  ? F extends false
    ? S extends ":"
      ? ParserObject<E, R, Trim<K>, V, true, L>
      : ParserObject<E, R, `${K}${S}`, V, F, L>
    : S extends ","
    ? L extends []
      ? ParserObject<
          E,
          { [P in keyof R]: R[P] } & { [P in K]: Parser<V> },
          "",
          "",
          false,
          L
        >
      : ParserObject<E, R, K, `${V}${S}`, F, L>
    : S extends "[" | "{"
    ? ParserObject<E, R, K, `${V}${S}`, F, [...L, unknown]>
    : S extends "]" | "}"
    ? L extends [unknown, ...infer B]
      ? ParserObject<E, R, K, `${V}${S}`, F, B>
      : ParserObject<E, R, K, `${V}${S}`, F, L>
    : ParserObject<E, R, K, `${V}${S}`, F, L>
  : K extends ""
  ? { [P in keyof R]: R[P] }
  : ParserObject<
      "",
      { [P in keyof R]: R[P] } & { [P in K]: Parser<V> },
      "",
      "",
      false,
      L
    >;

type ParserArray<
  T extends string,
  R extends string[] = [],
  V extends string = "",
  L extends unknown[] = []
> = T extends `${infer S}${infer E}`
  ? S extends ","
    ? L extends []
      ? ParserArray<E, [...R, Parser<V>], "", L>
      : ParserArray<E, R, `${V}${S}`, L>
    : S extends "[" | "{"
    ? ParserArray<E, R, `${V}${S}`, [...L, unknown]>
    : S extends "}" | "]"
    ? L extends [unknown, ...infer B]
      ? ParserArray<E, R, `${V}${S}`, B>
      : ParserArray<E, R, `${V}${S}`, L>
    : ParserArray<E, R, `${V}${S}`, L>
  : [...R, Parser<V>];

type ParserHelper<T extends string> = T extends `{${infer S}}`
  ? ParserObject<Trim<S>>
  : T extends `[${infer S}]`
  ? ParserArray<S>
  : T extends "true"
  ? true
  : T extends "false"
  ? false
  : T extends "null"
  ? null
  : // Numbers and Unicode escape (\uxxxx) in JSON can be ignored. You needn't to parse them.
    T;

type Parser<T extends string> = ParserHelper<Trim<T>>;

测试

type A =
  Parser<'  { "asdasd ":{} , "   a123  "  :  true,"b123":{"b1acads": 1," b2":{"aasd ":false},"b3asda":2},"c":3,"d":{"d":null}}'>;
// type A = {
//   'asdasd ': {}
//   '   a123  ': true
//   b123: {
//     b1acads: '1'
//     ' b2': {
//       'aasd ': false
//     }
//     b3asda: '2'
//   }
//   c: '3'
//   d: {
//     d: null
//   }
// }

type B = Parser<'[  1  ,true, false,null ,{  },{ " a ":1,"b":{"b":"2"}},2,3]'>;
// type B = [
//   '1',
//   true,
//   false,
//   null,
//   {},
//   {
//     'a ': '1'
//     b: {
//       b: '2'
//     }
//   },
//   '2',
//   '3',
// ]
左手121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSON 字符串是如何被解析的？JsonParser 了解一下
qq_42982923的博客
08-28 2477
版本约定 Jackson 版本：2.11.0 Spring Framework 版本：5.2.6.RELEASE Spring Boot 版本：2.3.0.RELEASE 小贴士：截止到本文，本系列前面所有示例都只仅仅导入jackson-core而已，后续若要新增 jar 包我会额外说明，否则相同 什么叫读 JSON？就是把一个 JSON 字符串 解析为对象 or 树模型嘛，因此也称...
用于TypeScript的TypedJSON解析和stringify
08-09
✔️用于TypeScript的Typed JSON解析和stringify
【TypeScript】解析json字符串
weixin_44897192的博客
02-17 2029
TypeScript中的JSON解析
typescript解析json
时光匆匆，带不走流年
10-21 2879
var ids = this.frameContext.appContext.getFrameContext(“root-component”).uiState[“ids”]; ids = ids.replace(",","’,’"); var splitted = ids.split(","); var condition = ‘[{ “FilterField”: “ID”, “Value”: "’+splitted+’", “Lbracket”: null, “Rbracket”: null, “Rel
TypeScript 中的Json自动解析并组装为类对象
热门推荐
晨光飞舞的专栏
11-29 1万+
在Java中，大家都已经很熟悉Gson这样的json自动解析工具了，而在TypeScript中，因为没有足够良好的泛型支持，目前还实现不了像Gson那样可以支持泛型的完善的解析方式。不过今天发现一款工具，可以将json转换到具体的指定类型。 能省去不少手写的麻烦，只是目前还不支持对泛型进行解析。 传送门：https://github.com/typestack/class-transforme...
Typescript 的语法进阶基础之Typescript.json 配置文件、类型进阶和泛型进阶
浮生离梦的博客
06-10 2208
一、Typescript.json 配置文件 tsconfig.json 所包含的属性并不多，只有 7 个，官方也给出了它的定义文件，如下所示： files: 数组类型，用于表示由 ts 管理的文件的具体文件路径 exclude: 数组类型，用于表示 ts 排除的文件（2.0 以上支持 Glob） include: 数组类型，用于表示 ts 管理的文件（2.0 以上） compileOnSave: 布尔类型，用于 IDE 保存时是否生成编译后的文件 extends: 字符串类型，用于继承 ts 配置，
JSON转换TypeScript
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
10-13 3963
TypeScript（TS）是一种强类型的编程语言，由于在编译时便会发现代码存在的问题，被前端团队大量使用。TS使开发人员能够掌握各种组件的交互方式，并使代码重构变得更加容易；但对于需要准确定义的类型，在使用时会比较麻烦。特别是涉及数个及数十个后端接口数据的类型定义，会有大量的转换和的时间成本。通过VSCode插件实现一键生成TS声明，可以节省编程过程的开发成本。为了克服TS的变量类型声明过于繁琐的缺点，节约开发成本，推荐使用VSCode插件【Auto-ts-inline-types】。
JSON解析器：一个TypeScript实现的奇思妙想（请勿在生产环境中使用）
最新发布
gitblog_00033的博客
04-19 317
JSON解析器：一个TypeScript实现的奇思妙想（请勿在生产环境中使用） 项目地址:https://gitcode.com/jamiebuilds/json-parser-in-typescript-very-bad-idea-please-dont-use 该项目是一个由jamiebuilds创建的独特尝试——使用纯TypeScript编写JSON解析器。尽管名称中明确警告“这是一个非常糟...
.net core json 为null输出_4. JSON字符串是如何被解析的？JsonParser了解一下
weixin_39966644的博客
11-21 391
❝ 公司不是你家，领导不是你妈。本文已被 「https://www.yourbatman.cn」 收录，里面一并有Spring技术栈、MyBatis、JVM、中间件等小而美的「专栏」供以免费学习。关注公众号【「BAT的乌托邦」】逐个击破，深入掌握， ❞前言各位好，我是A哥(YourBatman)。上篇文章：3. 懂了这些，方敢在简历上说会用Jackson写JSON 聊完，「流式API」的写部分可...
简单的 JSONParser
qq_40734247的博客
11-29 2854
最近在学习 Python 的正则表达式内容，我看的是，在文档的最后有一个例子，勾起了我的兴趣。它是用正则表达式来制作了一个简单的词法分析器。我觉得这个东西非常有趣，以前在学校的时候，有一次作业我是手写的，不过我感觉写得不好，勉强完成老师的作业吧，哈哈。所以，我参考这个例子写了一个 JSON 的词法分析，然后又加上了简单的语法分析程序。它的整个效果，有点类似于 python 标准库 json 的方法，不过是一个极其简陋的实现，而且基本上没有错误处理。
JSON.parse()方法
yw1688的专栏
10-10 802
本文章介绍一下javascript in json 中 json2.js中的parse()方法。 以下为json2js中的原文介绍 JSON.parse(text, reviver)             This method parses a JSON text to produce an object or array.             It can throw a
JSON.stringify与JSON.parse
u011153667的博客
05-05 1051
outline Using native JSONMDN’s JSON用JSON.stringify来dump对象 Using native JSON 这里介绍是兼容ECMAScript 5 标准的原生JSON对象. 原生的JSON对象包含两个关键方法 1.JSON.parse() 解析JSON字符串,并且重构为JavaScript对象.具体使用如下: 1
使用TypeScript 搜索JSON的简单方法
12-05 6877
使用TS 写了一个简单的 搜索JSON数组的方法. 分享给大家. 感觉效率一般, 有方法的朋友请拍砖 public static JsonQuery(arr:Array,obj:any):any{ for(let i:number=arr.length-1;i>=0;i--){ let _jsonObj:any = arr[i];
typescript引入项目同步json文件方法总结
yfwangjd的博客
09-01 5643
思考以下问题一：用什么方法在typescript中读取json文件 二：路径设置，相对路径、绝对路径怎么引入，因为路径不正确肯定会提示找不到模块 三：为什么 var data = require(‘/sandbox/project/sync/name.json’) var tmp = JSON.parse(data); 执行时总报Unexpected token o in JSON at
如何将JSON对象转换为Typescript类
w36680130的博客
06-11 5245
I read a JSON object from a remote REST server. 我从远程REST服务器读取了JSON对象。 This JSON object has all the
TypeScript中LocalStorage存储和读取Array类型
lqy455949477的博客
04-12 1万+
StackOverflow上有关于LocalStorage存储和读取Object类型的方法说明。 http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage 这里先提供一下关于存储和读取的通用方法。 写入时注意要使用JSON.stringfy()方法将写入的对象或Array字符串
JSON.parse()
齐枫的博客
06-05 2802
JSON.parse() JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 语法 JSON.parse(text[, reviver]) 参数说明： text:必需， 一个有效的 JSON 字符串。 reviver: 可选，一个转换结
十分钟教你理解TypeScript中的泛型
07-11 507
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/understanding-generics-in-typescript-1c041dc37569 你将在本文中学到什么 本文介绍TypeScript中泛型（Generics）的概念和用法，它为什么重要，及其...
typescript 读取本地json文件
12-29
在TypeScript中读取本地JSON文件可以使用Node.js的fs模块。以下是一种方法： 1. 首先，确保已经安装了Node.js，并且在项目中已经引入了fs模块。 2. 使用fs模块的readFileSync方法读取JSON文件的内容，并将其存储在一个变量中。 ```typescript import * as fs from 'fs'; const filePath = './name.json'; // 相对路径，根据实际情况修改 try { const jsonData = fs.readFileSync(filePath, 'utf-8'); const data = JSON.parse(jsonData); console.log(data); } catch (error) { console.error('读取JSON文件出错：', error); } ``` 请注意，上述代码中的`filePath`变量是JSON文件的路径，根据实际情况进行修改。如果JSON文件与TypeScript文件在同一目录下，可以使用相对路径；如果不在同一目录下，可以使用绝对路径。 这段代码会读取指定路径下的JSON文件，并将其解析为JavaScript对象。然后，你可以根据需要对该对象进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值