<!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. 🎀截图工具推荐-Snipaste

    简介 Snipaste 是一款非常强大且免费的截图和屏幕标记工具,由一位来自中国的开发者开发.它以其简洁的界面和丰富的功能而受到广泛好评. 官网 https://zh.snipaste.com/ Sn ...

  2. 特殊符号大全,特殊字符、emoji符号收藏,可复制直接使用

    收藏包含:特殊符号.emoji符号.编号序号.数学符号.上标下标.标点符号.货币符号.箭头符号.国旗符号等 ❥웃유☮☏☢☠♚▲♪✞÷↑↓◆◇⊙■□△▽¿─│❣♂♀☿Ⓐ✍☣☤✘☒♛▼♫⌘☪≈←→◈◎☉★ ...

  3. Flex布局教程:语法篇--css中的display:Flex

    先用一句话秒懂display:Flex;这句css代码,如图: 放个目录先: 目录 一.Flex布局是什么? 二.基本概念 三.容器的属性 3.1 flex-direction属性(主轴的方向) 3. ...

  4. access 类对象使用

    类模块代码如下: Option Explicit '定义按钮对象和onclick 触发内容 Private WithEvents m_Closebtn As Access.CommandButton ...

  5. Rust 在 Linux 下的安装

    Rust 在 Linux 下的安装 我感觉, Rust 这个语言, 集 C, C++, Java, Scala, JavaScript, TypeScript, Python ... 等语言的优势于一 ...

  6. (Pytorch第三天)复制官网教程程序遇到的一系列报错

    先说一下,我之前没学过Python,但是鉴于我是一名c语言高手(雾),我决定现学现用. 首先是https://pytorch.org/tutorials/beginner/basics/optimiz ...

  7. C#数据结构之Tree

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. eclipse界面混乱还原方法

    WindowPerspectiveReset Perspective

  9. @FeignClient注解自定义接口超时时间

    问题描述   每个微服务都有统一的接口超时时间设定,但也存在一些特殊的业务场景,其接口需要较长的超时时间,比如:导出excel报表.上传文件.拉取业务报表数据等等.此时,默认的超时设置就不能满足需求, ...

  10. Spring注解之@Autowired自动装配bean 综述

    @Autowired的工作原理是什么?在启动spring IoC时,容器自动装载了一个AutowiredAnnotationBeanPostProcessor后置处理器,当容器扫描到@Autowire ...