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物件