typescript

1、typescript
1.簡介：typescript是JavaScript的一個超集(語法遵循es6標準)，是微軟發明的語言
ts作爲js的一個語法糖，相似於css和less，sass的關係，ts相比js更加容易維護和開發，可是最後必定要轉爲js才能運行
ts==》Microsoft
ts=>Angular4=>Google
ts支持es6的語法，Angluar4的開發語言是ts，編譯器(IDE)的支持下良好
2.安裝ts環境
1）安裝node.js
2)安裝ts
windows：npm install -g typescript
mac:npm install -g typescript
使用命令 tsc -v 。查看版本號，出現版本號說明成功
3.ts語法編譯
1）在線編譯
http://www.typescriptlang.org/play/index.html
2）終端編譯
cd文件夾 進入ts文件所在位置
使用tsc 命令編譯：tsc xxx.ts
3）.IDE對ts強大的支持能夠幫助咱們直接編譯
4）直接使用<script></script>中寫ts語法
引入文件：
<script src='../lib/typescript.min.js'><script>
<script src='../lib/typescript.compile.min.js'><script>
直接對ts語法進行解析
5)vsCode構造ts語法編譯自動監聽
（1）建立項目根目錄 eg：vs
（2）打開終端，進入這個文件夾
mac：cd文件夾路勁
windows：cd/d文件夾路徑
鼠標放在文件夾上，右鍵終端打開
（3）tsc -init
將根目錄初始化爲自動構建目錄 生成一個文件tsconfig.json
(4)打開tsconfig.json文件
rootDir：輸入文件夾，配置了這個屬性的文件夾裏邊的ts。文件都會被解析
outDir：輸出文件夾，將編譯好的ts文件轉爲js文件並放進這個文件夾
（5）在vs文件下建立目錄
ts文件目錄：src
js文件目錄：bin
配置：
rootDir："./src",
outDir:"./bin"
在src文件夾建立文件 hello.ts
開始監聽：
mac:com+shift+b
windows:ctrl+shift+b
彈出框有兩個內容
監視 watch：自動監聽，自動將文件轉爲js
構建 build：手動構建，只會構建當前有的文件
關閉監聽：
windows:ctrl+c
mac:ctrl+c

4.字符串 string
1）//多行字符串
var str=`hello
world`;
console.log(str);

2）字符串模板
var a='lisi';
var getA=function(){
return 'lisi';
}
console.log(`我是${a}`);
console.log(`我是${getA()}`);

3.函數參數拆分字符串
function fun2(temp: TemplateStringsArray, name: string, age: number, sex: string) {
console.log(temp);
console.log(name);
console.log(age);
console.log(sex);
}
var myName = 'lisi';
var getAge = function () {
return 23;
}
var sex = '男';
fun2`個人名字是${myName},我今年${getAge()},我是${sex}的`;

5.指定變量和參數的類型
1）在定義變量的後面直接加上變量的類型
語法：
var a=10;a='lisi';js不報錯
===》
var a:number=10;
a='lisi';//ts中報錯

ts對變量有一個新的類型推斷機制。在第一次聲明變量並賦值時，會自行推斷變量的類型，若是改變變量的值類型不一樣，會報語法錯誤，不被容許
若是不想被限制變量類型，可使用any
var str:any='123';
str=123;

2)void 類型
通常用於函數聲明，若是函數聲明使用了void。則說明該函數沒有返回值，若是寫了返回值就會報錯，
語法：
function test():void{
//函數體中不容許寫return
}

3.指定函數返回值類型
語法：
function test():string{
return '123';
}
//指定函數返回值必須是string類型，不然報錯
4）指定函數參數的類型
語法：
function test2(sname:string,age:number):object{
return{
name:sname,
age:age
}
}

5)經過class自定義類型，這樣的好處在於實例化類的時候能夠自動提示類中的屬性：
語法：
class Person{
name:string,
age:number,
sex:string,
friends:object
}

var info2: Person = new Person();
info2.name = 'lisi';
info2.age = 23;
info2.sex = '男';
info2.friends = ['lisi', 'wangwu'];
console.log(info2);

6)函數參數有類型的默認值
有默認值的參數必定是尾參數
function test3(a:string,b:number,c:string='lisi'){
console.log(a,b,c);
}
test3('wangwu',34);
test3('mazi',21,'lalal');

7.可選參數
使用（？）表示該參數是可選參數
注意：必選參數必須放在可選參數以前，默認值的參數必定是尾參數
function test4(a:string,b?:number,c:boolean=true){
console.log(a,b,c);
}
test4('lisi');//lisi undefined true
test4('lisi',23);//lisi 23 true
test4('lisi',23,false);//lisi 23 false

6、函數
1）rest and spread 操做符，用來操做任意數量的函數參數
function fun1(...args){
console.log(args);
}
fun1(1,2,3);
fun1(1,2,3,4,333);

2)Generator函數
用於控制函數的執行過程，手動的中止和恢復代碼的執行
yield: 暫停函數執行
.next：恢復函數執行
注意：函數的執行須要將函數賦值給一個變量，而後調用next，進行一步一步的執行
//generator函數
function* fun3() {
console.log('開始');
yield '暫停';//只容許在生成器正文中使用 "yield" 表達式
var a = 10;
console.log(a);
yield;
console.log('結束');
}
// fun3()//生成器沒法如此調用
var f = fun3();
f.next();//開始
f.next();//結束10
f.next();//結束

運行邏輯：1）當程序運行遇到yield時。暫停執行後面的代碼，而且將緊跟在yield後面的表達式作爲返回的對象的value，值返回2）下一次執行next方法時，繼續向下執行，直到遇到下一個yield3)若是沒有遇到yield，直接運行到函數的結束，遇到return爲止，而且將return後面的語句或表達式的值，作爲返回對象的value值返回4）若是函數沒有return，那個返回的對象的value值屬性是undefinedfun5.next()會返回一個對象，該對象中有兩個屬性，value值是yield後面的內容，done是布爾值，表示是否遍歷結束若是generator函數中沒有yield，整個函數就變成了一個延緩執行函數，當調用next，纔會執行3）析構函數經過表達式將對象或數組中的內容拆分紅任意數量的變量，其實就是es6中的解構4）箭頭表達式用來聲明匿名函數，消除傳統的匿名函數中this指向問題