Typescript骚操作,在TS里面直接插入HTML,还有语法提示

先给大家看一个图

因为我不喜欢用很重的框架,主要是并非专业UI,但是偶尔会用到,还是觉得直接element组装受不了,想想能在ts文件里面能直接插入html就好了。

插进去不难,可是苦于没有语法提示,大家看上面这个图,语法提示的问题已经解决了。

下面我来详细讲解一下这个骚操作

一、安装vscode,别的工具我没研究,大差不差

二、安装插件

是由这个插件提供的语法高亮

三、添加两个函数


export function raw(a:TemplateStringsArray,...values:any[]):string

{

var len = a.length-1;

var outstr = a[0];

for(var i=0;i<len;i++)

{

outstr+=values[i]+a[i+1];

}

return outstr;

}

export function html(a:TemplateStringsArray,...values:any[]):HTMLDivElement

{

var div =document.createElement("div");

div.innerHTML =raw(a,values);

return div;

}

这两个函数是自定义两个拼装字符串的方法 针对于ts中的特殊字符串

如果遇到问题,最常见的就是 export的,删掉export

用这个特殊的引号引起来的字符串,注意键位,不是普通的单引号

四、浪起来

然后就可以带着语法提示写字符串了

这两个标签我定义为 raw ‘’ 返回一个字符串

Html 返回一个div对象

Typescript骚操作,在TS里面直接插入HTML的更多相关文章

  1. 用Markdown写Html和.md也就图一乐,真骚操作还得用来做PPT

    前言 和这篇文章一样,我就是用Markdown写的.相信各位平时也就用Markdown写写文档,做做笔记,转成XHtml.Html等,今天教大伙一招骚操作:用Markdown写PPT. 绝大多数朋友做 ...

  2. 闪电侠 Netty 小册里的骚操作

    前言 即使这是一本小册,但基于"不提笔不读书"的理念,仍然有必要总结一下.此小册对于那些"硬杠 Netty 源码 却不曾在千万级生产环境上使用实操"的用户非常有 ...

  3. awk骚操作

    一.awk自加 [root@168web3 ~]# head /data/logs/cloud_monitor_rds_cpu.log |awk '{sum+=$NF}END{print sum}' ...

  4. 如何在命令长度受限的情况下成功get到webshell(函数参数受限突破、mysql的骚操作)

    0x01 问题提出 还记得上篇文章记一次拿webshell踩过的坑(如何用PHP编写一个不包含数字和字母的后门),我们讲到了一些PHP的一些如何巧妙地绕过数字和字母受限的技巧,今天我要给大家分享的是如 ...

  5. UOJ 117 欧拉回路(套圈法+欧拉回路路径输出+骚操作)

    题目链接:http://uoj.ac/problem/117 题目大意: 解题思路:先判断度数: 若G为有向图,欧拉回路的点的出度等于入度. 若G为无向图,欧拉回路的点的度数位偶数. 然后判断连通性, ...

  6. 关于map 及 map 骚操作

    关于map这个东西   很冷门..................   但是,这个博客带你稍微了解一下map:   map用法:一般当作一个下表无穷大的数组   关于它的骚操作:map的鬼畜用法,可以 ...

  7. 通过HTTP的HEADER完成各种骚操作

    作为一名专业的切图工程师,我从来不care网页的header,最多关心Status Code是不是200.但是HEADER真的很重要啊,客户端从服务器端获取内容,首先就是通过HEADER进行各种沟通! ...

  8. 洛谷 P1045 麦森数 (快速幂+高精度+算位数骚操作)

    这道题太精彩了! 我一开始想直接一波暴力算,然后叫上去只有50分,50分超时 然后我改成万位制提高运算效率,还是只有50分 然后我丧心病狂开long long用10的10次方作为一位,也就是100亿进 ...

  9. Mac OS 上的一些骚操作

    本帖记录个人在使用 Mac 操作系统上的一些骚操作,不断更新,以飨读者. 快速移动网页到顶部或底部 用双指上下划触摸板吗?NO,我们有更骚的操作: command + ↑ 回到顶部 command + ...

随机推荐

  1. Python——Python+Pydev出现SyntaxError: Non-UTF-8 code

    搭建好Python+Pydev后发现每次输入中文,包括注释,会出现语法错误提示,如: SyntaxError: Non-UTF-8 code starting with... 可通过下面方法解决. 1 ...

  2. 关于NPOI导入的时候有时出现乱码解决办法

    手上这个项目之前客户说过导入的时候回出现乱码问题,一直没用重视,现在自己做做一个功能,乱码经常出现,开始以为是代码的问题,最后百度了试了很多方法猜找到解决办法: 乱码页面如下: 解决办法: 打开IIS ...

  3. ASP.NET MVC上传文件

    最近参考网络资料,学习了ASP.NET MVC如何上传文件.最基本的,没有用jQuery等技术. 1.定义Model public class TestModel    {        [Displ ...

  4. java(12)字符串

    一.字符串概述 1.1如何使用字符串 1)定义并初始化字符串 2)使用字符串,对字符串进行一些处理 1.2字符串的长度 语法: 字符串1.length();  -->返回字符串1的长度 publ ...

  5. QButtonGroup按钮组

    继承  QObject 提供 一个抽象的按钮容器, 可以将多个按钮划分为一组,不具备可视化的效果,一般放的都是可以被检查的按钮 import sys from PyQt5.QtWidgets impo ...

  6. Bootstrap使用-1

    目录 结构: 1. 视图函数 2. 模板 3. 登陆 4. 怎样发生的 添加模板 基础模板提供的block 定制基础模板 结构: $ tree -I "__pycache*|*.pyc|*. ...

  7. 20175204 张湲祯 2018-2019-2《Java程序设计》第八周学习总结

    20175204 张湲祯 2018-2019-2<Java程序设计>第八周学习总结 教材学习内容总结 -第十五章泛型与集合框架要点: 一.泛型 1.泛型(Generics)的主要目的是可以 ...

  8. c#--Redis帮助类

    最近一直在忙公司的一下项目,也没有太多时间写,所以就分享出所用redis帮助类 using Newtonsoft.Json; using StackExchange.Redis; using Syst ...

  9. mysql 经纬度求距离

    SELECT id,lng,lat,ROUND(6378.138*2*ASIN(SQRT(POW(SIN((lat1*PI()/180-lat*PI()/180)/2),2)+COS(lat1*PI( ...

  10. (转)理解maven命令package、install、deploy的联系与区别

    我们在用maven构建java项目时,最常用的打包命令有mvn package.mvn install.deploy,这三个命令都可完成打jar包或war(当然也可以是其它形式的包)的功能,但这三个命 ...