知識準備：JavaScript滿足ES5前端規範、TypeScript滿足ES6前端規範

1 TypeScript開發環境

TypeScript代碼不能直接被瀏覽器識別，必須先轉換成JS代碼；通常是利用編譯器來講TS代碼轉換成JS代碼

1.1 使用在線的編輯器

1.1.1 利用TypeScript官網提供的編譯器

TypeScript官網提供的在線編譯器

1.1.2 利用Babel官網提供的編譯器

Babel官網提供的在線編譯器

1.2 使用線下編譯器01

前提：先安裝node.js（比較簡單，百度即可）

1.2.1 安裝編譯器

npm --version　　查看node.js版本

npm install -g typescript　　安裝typescript

(注意：安裝typescript的過程就是安裝編譯器的過程，由於我已經安裝過了，就不進行演示；如果不會的請參見我的博客【博客分類：開發基礎】)

tsc --version　　查看typescript版本

（注意：安裝好typesript後就可以使用tsc命令啦）

1.2.2 編寫TS文件

新建一個文件夾test，並在該文件夾下創建一個名為hello.ts的TS文件，在TS文件中編寫TS代碼

1.2.3 編譯TS文件

利用tsc命令將TS文件編譯成JS文件

打開命令窗口，就如到test文件夾下；使用命令 tsc hello.ts 就可以將TS文件編譯成JS文件；編譯完成後就會在test文件夾下面多出一個名為hello.js的文件

文件夾下多出的JS文件

1.3 使用線下編譯器02

下載一個WebStorm編譯器，下載完後進行安裝；WebStorm編譯器很強大，可以代碼補全、錯誤提示、自動編譯成JS文件

WebStorm編譯器界面

設置自動編譯

2 字元串特性

2.1 多行字元串

直接將多行字元串放在單引號或者雙引號內在TS中會報錯，在JS中不會報錯，但是運行JS時會報錯

運行JS文件的錯誤提示為

使用單引號或者雙引號將多行字元串拼接起來後雖然不會報錯，但是拼接的效果就變成了一行字元串，而不是多行字元串啦

運行JS文件的結果為

將字元串內容放在單撇號裡面後就可以任意換行啦

運行JS文件的結果為

2.2 字元串模板

字元串模板是放在單撇號裡面的

1 var myName : string = "AJS";
2 var myAge: number = 18;

運行JS文件的結果為

2.3 多行字元串和字元串模板組合使用

通過多行字元串和字元串模板來實現HTML代碼的拼接

編譯成的JS代碼如下

1 var myName = "AJS";
2 var myAge = 18;
3 var str = "
<div>
<span>" + myName + "</span>
<span>" + myAge + "</span>
</div>
";
4 console.log(str);

運行JS文件的結果如下

2.4 自動拆分字元串

利用字元串模板去調用一個方法時字元串模板中表達式的值會自動賦給被調用的方法作為參數

編譯成的JS代碼如下

運行JS代碼的結果如下

PHP學習交流群，免費視頻學習資料：365672221

更多精彩內容，訪問中公優就業官網：http://xue.ujiuye.com/?wt.bd=zt36716tt

500萬就業基金助力，2017大學生就業扶助計劃：http://www.ujiuye.com/zt/jyfc/?wt.bd=zt36716tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！