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. 使用百度云 BOS 和 C# SDK 开发数据存储

    Ø  简介 本文主要介绍如何使用百度云的 C# SDK 操作 BOS(Baidu Object Storage/百度对象存储),以及常见问题和解决办法.本文将以以下几点展开学习: 1.   基本介绍 ...

  2. JAVA集合1--总体框架

    JAVA集合是JAVA提供的工具包,包含了常用的数据结构:集合.链表.栈.队列.数组.映射等.JAVA集合工具包的位置是java.util.* JAVA集合主要可以分为4个部分:List.Set.Ma ...

  3. java 数组中的方法

    //要import java.util.Arrays: fill(int[] a,int value);//对a数组进行全部用value填充 fill(int[] a,int fromIndex,in ...

  4. 查表法解决calendar中月份及星期初始值为0的情况。

    Calendar ca = Calendar.getInstance(); String [] index = {"星期一","星期二","星期三&q ...

  5. Python爬虫之12306-分析请求总概述

    python爬虫也学了一段时间了.也爬过不少网站,最后我想用12306抢票器这个项目做一个对之前的学习的效果成见也是一个目标(开始学爬虫的时候,看到说,会爬12306,就会爬80%的网站),本人纯自学 ...

  6. day07 数据类型间的相互转化及字符编码

    今日内容: 字符间的相互转化 字符编码 今日重点: 字符间的相互转化 """ 字符间的相互转化: """ """ ...

  7. [Kubernetes]谈谈容器跨主机网络

    继上篇文章:[Kubernetes]浅谈容器网络,自己给自己挖的坑,这篇文章来谈谈容器跨主机网络. 要理解容器"跨主通信"的原理,就要来谈谈 Flannel 这个项目. Flann ...

  8. 题解-GXOI/GZOI2019 特技飞行

    Problem loj3085 bzoj不放题面差评 题意概要:给出两条竖直直线,再给出 \(n\) 架飞机的初始航线:一条接通这两条直线的线段,保证航线交点不在两条直线上.现要求安排所有飞机在航线相 ...

  9. delphi

    其实现在哪里还有delphi,我之所以建立这个分类,只是为了纪念它,纪念我使用了一年delphi的经历. 那个年代c#刚出道,delphi还是c/s编程届数一数二的人物.但是没想到,这么快被c#打败了 ...

  10. 初学python之路-day06

    每天一篇总结,今天学习了大概有深浅拷贝,元组类型,字典类型与集合类型.第一次感觉有点难度,需要花费多点时间来掌握. 深浅拷贝,分为值拷贝.浅拷贝.深拷贝. ls = [1, 'abc', [10]] ...