<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>js对象生成ts类型</title>

  <style>

    .txt {

      width: 40%;

      height: 200px;

    }

    .btn{

      margin: 10px 0;

    }

  </style>

</head>

<body>

  <textarea class="txt"></textarea>

  <div class="btn">

    <button>js对象生成ts类型</button>

  </div>

  <div>

    <textarea class="txt"></textarea>

  </div>

  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

  <script>

    const txtEl = document.querySelector('textarea');

    const btn = document.querySelector('button');

    txtEl.value = `{

  name:'abc',

  age:123

}`;

    btn.onclick = async () => {

      const codeStr = txtEl.value.replace(/\s+/g, "");

      const temp = `var codeTemp = ${codeStr}`;

      eval(temp);

      const code = JSON.stringify(codeTemp);

      const url = 'http://dshvv.com:7001/json2ts';

      const param = { code }

      const { data:sourceData,data: { data } } = await axios.post(url, param);

      const codeEl = document.querySelectorAll('textarea')[1];

      codeEl.value = data;

    }

  </script>

</body>

</html>

js对象生成ts类型声明的更多相关文章

  1. 使用 yapi-to-typescript 生成接口响应数据的 TS 类型声明

    TS 是越写越爽,但是很不爽的是接口响应数据一堆,每次要去手写很麻烦. 最近正好后端接口文档从一个垃圾工具切换到了 Yapi,然后去搜了下可以通过接口文档自动生成 TS 类型声明,就自己搞了下,还是很 ...

  2. JS对象的概念、声明方式等及js中的继承与封装

    对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=fu ...

  3. 检测js对象是不是数组类型？

    面试时候被人问如何检测一个未知变量是不是数组类型,丢脸啊,老祖宗的脸都丢没了,这都不会,回家啃书本去吧!!! var a = [];方法一:Array.isArray([])  //true type ...

  4. 封装一个Js 对象 生成Json

    <script src="~/Content/Scripts/jquery-1.11.3.min.js"></script> <script> ...

  5. js对象的key类型

    http://javascript.ruanyifeng.com/grammar/object.html#toc2 对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名),所以加 ...

  6. JS对象类型的确定

    JS是松散类型的语言,这一点JS的对象表现得尤为突出.那么如何来确定JS对象的具体类型呢? 首先,我们可以使用typeof运算符确定其基本类型(number,object,function,undef ...

  7. 自学 TypeScript 第一天 环境开发配置 及 TS 基本类型声明

    前言:  自学第一天,什么是TS ,为什么要用 TS TS 全程 Typed JavaScript at Any Scale 解释起来就是 添加了类型系统的 JavaScript, 是 JavaScr ...

  8. 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间

    生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...

  9. java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  10. Go+gRPC-Gateway(V2) 微服务实战，小程序登录鉴权服务(四)：客户端强类型约束，自动生成 API TS 类型定义

    系列 云原生 API 网关,gRPC-Gateway V2 初探 Go + gRPC-Gateway(V2) 构建微服务实战系列,小程序登录鉴权服务:第一篇 Go + gRPC-Gateway(V2) ...

随机推荐

  1. 1.net core 工作流WorkFlow流程（介绍）

    WikeFlow官网:www.wikesoft.com WikeFlow学习版演示地址:workflow.wikesoft.com WikeFlow学习版源代码下载:https://gitee.com ...

  2. C++宏定义中可变参数列表__VA_ARGS__ 及 QT 提供的宏 QT_OVERLOADED_MACRO

    1. 基本用法 VA_ARGS 是 C/C++ 中的预定义宏,用于在宏定义中表示可变参数列表(Variadic Arguments),需与省略号 ... 配合使用.其核心作用是将宏调用中的可变参数原样 ...

  3. pytorch 实战教程之路径聚合网络PANet(Path AggregationNetwork)代码实现 PANet原理详解

    原文作者:aircraft 原文链接:pytorch 实战教程之路径聚合网络PANet(Path AggregationNetwork)代码实现 PANet原理详解        学习YOLOv5前的 ...

  4. 《PDPU: An Open-Source Posit Dot-Product Unit for Deep Learning Applications》（三）

    Supporting suitable alignment width: In several designs [8] [19], quire [33] format is adopted to re ...

  5. 聊聊SpringAI流式输出的底层实现？

    在 Spring AI 中,流式输出(Streaming Output)是一种逐步返回 AI 模型生成结果的技术,允许服务器将响应内容分批次实时传输给客户端,而不是等待全部内容生成完毕后再一次性返回. ...

  6. Vue(六)——条件渲染

    Vue--条件渲染 v-if.v-else-if.v-else v-if 指令用于条件性地渲染一块内容,表达式的值为 true --渲染. false--不渲染 v-if.v-else-if.v-el ...

  7. 【HUST】网安｜计算机网络｜计算机网络自顶向下方法（原书第7版）第三章部分习题答案

    参考:英文版的原答案. 答案放gitee了,自取. 3-P18. 3.4.4 节我们学习的一般性 SR 协议中,只要报文可用(如果报文在窗口中) ,发送方就会不等待确认而传输报文.假设现在我们要求一个 ...

  8. PC端自动化测试实战教程-5-pywinauto 操作PC端应用程序窗口 - 下篇（详细教程）

    1.简介 上一篇宏哥主要讲解和介绍了如何获取PC端应用程序窗口信息和如何连接窗口对其进行操作的常用的几种方法.今天宏哥接着讲解和分享一下窗口的基本操作:最大化.最小化.恢复正常.关闭窗口.获取窗口状态 ...

  9. ESP32 MQTT对接巴法云平台

    ESP32 MQTT对接巴法云平台 MQTT(Message Queuing Telemetry Transport)是一种轻量级的 发布/订阅(Publish/Subscribe) 消息传输协议,专 ...

  10. CVE-2021-41773 && CVE-2021-42013拆解复现

    CVE-2021-41773 && CVE-2021-42013 参考了这个师傅的WP https://www.jianshu.com/p/3076d9ec68cf CVE-2021- ...