Typescript骚操作,在TS里面直接插入HTML

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对象

原文地址:https://www.cnblogs.com/crazylights/p/10192490.html

时间: 12-28

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

Linux Bash 提示符的一些骚操作

当你在 Linux 环境下打开一个 Shell 终端时,会看到命令行中出现了类似下面的一个 Bash 提示符:[[email protected]$host ~]$你知道命令行提示符其实是可以自己设置添加许多非常有用的信息的吗?在这篇文章中我就会教你如何自定义自己的 Bash 命令行提示符,想看的话就接着看吧~ 如何设置 Bash 提示符 Bash 提示符是通过环境变量 PS1 (提示符字符串 1Prompt String 1) 来设置的,它用于交互式 shell 提示符.当然如果你需要更多的输

骚操作之鸽巢原理

桌上有十个苹果,要把这十个苹果放到九个抽屉里,无论怎样放,我们会发现至少会有一个抽屉里面至少放两个苹果.这一现象就是我们所说的"抽屉原理". 抽屉原理的一般含义为:"如果每个抽屉代表一个集合,每一个苹果就可以代表一个元素,假如有n+1个元素放到n个集合中去,其中必定有一个集合里至少有两个元素." 抽屉原理有时也被称为鸽巢原理.它是组合数学中一个重要的原理. 在acm中也是会遇到的,比如两个人对打的得分问题 110个人参加一个国际象棋单循环比赛,每两人都进行一局比赛,

使用TypeScript拓展你自己的VSCode

转自:http://www.iplaysoft.com/brackets.html使用TypeScript拓展你自己的VSCode! 0x00 前言在前几天的美国纽约,微软举行了Connect(); //2015大会.通过这次大会,我们可以很高兴的看到微软的确变得更加开放也更加务实了.当然,会上放出了不少新产品和新功能,其中就包括了VS Code的beta版本.而且微软更进一步,已经在github将VS Code的代码开源了.除了这些让人兴奋的消息,我们还应该注意到VS Code提供了对拓展的支

基于TypeScript的FineUIMvc组件式开发(简介)

不熟悉FineUI的可以访问其官方网站(http://www.fineui.com),在这里我从我的个人角度说一下FineUI,FineUI有多个版本,但主要基于2种架构,一种是基于Asp.net WebForm,别一种是基于Asp.net Mvc. 在WebForm版本下,虽然FineUI是一个前端构架,但在一些常规简单项目中几乎不用写JS代码,除了首次请求页面,后续的操作都是基于Ajax的,而JS代码都是由服务器端动态生成,并放到客户端执行,这也是FineUI的一大特点.了解WebForm的

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

使用TypeScript拓展你自己的VS Code!

0x00 前言 在前几天的美国纽约,微软举行了Connect(); //2015大会.通过这次大会,我们可以很高兴的看到微软的确变得更加开放也更加务实了.当然,会上放出了不少新产品和新功能,其中就包括了VS Code的beta版本.而且微软更进一步,已经在github将VS Code的代码开源了.除了这些让人兴奋的消息,我们还应该注意到VS Code提供了对拓展的支持.所以本文就来聊一聊使用TypeScript开发VS Code拓展的话题吧. 本文所使用的拓展的应用商店页面: https://m

寻找道路——呆滞大佬der最骚暴力

寻找道路 题目描述: 有点的出边所指向的点都直接或间接与终点连通. 2 .在满足条件1 的情况下使路径最短. 注意:图G 中可能存在重边和自环,题目保证终点没有出边. 请你输出符合条件的路径的长度. 输入格式: 第一行有两个用一个空格隔开的整数n 和m ,表示图有n 个点和m 条边. 接下来的m 行每行2 个整数x .y ,之间用一个空格隔开,表示有一条边从点x 指向点y . 最后一行有两个用一个空格隔开的整数s .t ,表示起点为s ,终点为t . 输出格式: 输出只有一行,包含一个整数,表示

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript

component 组件 成分; 零件; [数]要素; 组分; Angular2怎么使用第三方的component库(如 jquery,easyUI ,Bootstrap 等) PWA  增强web app helloWorld跑起来了,之前失败是因为Chrome服务器插件要FQ才能下载 https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/ 安装谷歌插件 web-serve

使用TypeScript开发ReactNative应用的简单示例

最近小小尝试了下 ReactNative + TypeScript 开发APP,爬了无数坑之后总算弄出来个结果,重要的地方记录下,后面会附上示例代码: 1.开发工具的选择 windows 平台我接触的开发工具主要三个, WebStorm,Intellij IDEA 2016.2 版本,https://www.jetbrains.com/ 这两个我都试过,开发完全没问题的,还有PHPStorm估计也行吧,没试过. 另外还有一个是VisualStudioCode:https://code.visua

sublime 插件(侧重JavaScript)

Sublime Text几乎是任何开发者在其工具箱的必备应用程序.Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器,例如Vim和Emacs(具有陡峭的学习曲线). Sublime Text如此受欢迎的其中一个原因就是它的可扩展插件架构.这使得开发人员可以轻松使用新功能,例如代码完成,或远程API文档嵌入,来扩展Sublime的核心功能.Sublime Text的插件并不是开箱即用的--通常需要通过一个叫Pack