一、環(huán)境搭建
1TypeScript介紹
1、ts是js類(lèi)型的超集，它可以編譯成純js；
2、ts可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行（不需要考慮兼容性問(wèn)題）；
3、ts是一門(mén)由微軟開(kāi)發(fā)的開(kāi)源的編程語(yǔ)言，擁有自己的特性（eg：類(lèi)）。

2ts環(huán)境搭建
mac：
1、npm安裝；
2、使用npm安裝ts，npm install -g typescript；
獲取最高權(quán)限sudo npm install -g typescript，安裝指令不報(bào)錯(cuò)
3、啟動(dòng)編譯工具，tsc文件名.ts
編譯成為原生js，命令為：tsc xxx.ts，運(yùn)行之后生成一個(gè)新的xxx.js文件

二、基本數(shù)據(jù)類(lèi)型
1、boolean

// 布爾類(lèi)型
let isDone:boolean = true;

// 編譯后原生js：
var isDone = true;

2、string

// 字符串類(lèi)型
let str:string = "abc";

// 編譯后原生js：
var str = "abc";

3、number

// 數(shù)字類(lèi)型(初始值可以為二進(jìn)制，八進(jìn)制，十進(jìn)制等等)
let num:number = 10;

// 編譯后原生js：
var num = 10;

4、array

// 數(shù)組類(lèi)型
let arr:number[] = [1,2,3]; 
let arrStr:string[] = ['a','b']; 
let arr2:Array<number> = [1,2,3];  // 自帶Array類(lèi)型
arr[0] // 可以通過(guò)數(shù)組下標(biāo)訪問(wèn)數(shù)組

// 編譯后原生js：
var arr = [1,2,3];  // 數(shù)組存的是數(shù)字類(lèi)型
var arrStr = ['a','b']; // 數(shù)組存的是字符串類(lèi)型
var arr2 = [1,2,3]

5、tuple

// 元祖類(lèi)型
let per:[number,string]; // 數(shù)組可以保存不同類(lèi)型的數(shù)據(jù)類(lèi)型
per = [18，"Lucky"]; // 賦初始值,按照賦值的順序 

// 編譯后原生js：
var per; 
per = [18, "Lucky"];   

6、enum（原生js沒(méi)有此類(lèi)型，枚舉類(lèi)型是ts對(duì)js的擴(kuò)展）

// 枚舉類(lèi)型
enum Season{Spring，Summer，Autumn，Winter}; // 聲明：創(chuàng)造一個(gè)枚舉類(lèi)型
let season:Season = Season.Spring; // 取值：訪問(wèn)枚舉類(lèi)型的值

// 可以通過(guò)代碼修改里面的值
enum Season1{Spring=1，Summer，Autumn，Winter};
enum Season2{Spring=1，Summer=2，Autumn=3，Winter=4};
let season2:string = Season1[1]; // 賦值

7、any

// 任意值
let a:any = 4;
a = "abc"; // 可再賦其他類(lèi)型的值

8、void 空值
9、null和undefined

let c:undefined = undefined；
// 可以把null和undefined類(lèi)型的變量賦值給其他類(lèi)型

10、泛型identify，不僅支持當(dāng)前數(shù)據(jù)類(lèi)型，同時(shí)也支持未來(lái)的數(shù)據(jù)類(lèi)型。
不用any，是因?yàn)?code>any會(huì)丟失一些信息，導(dǎo)致無(wú)法確定返回值類(lèi)型。泛型可保證入?yún)⑴c返回值類(lèi)型相同。

// 最初設(shè)計(jì)函數(shù)參數(shù)為String類(lèi)型
function identity(age: string) {
    return age
}
console.log(identity('20'))

// 業(yè)務(wù)迭代之后需要支持Number類(lèi)型
function identity(age: string) {
    return age
}
console.log(identity(20)

三、接口
1、接口的定義

// 定義
interface Person{
      name：String；
      age：number；
}
// 使用
function creatPerson(per:Person) {
       console.log(per.age);
}
// 定義個(gè)變量，賦值
let perNew = {name:"Lily",age:18};
// 調(diào)用
creatPerson(perNew)

// 編譯后原生js:
function creatPerson(per) {
     console.log(perNew)
}
var perNew = { name: "lily", age: 18 };
creatPerson(perNew);

2、可選屬性(通過(guò)問(wèn)號(hào)來(lái)進(jìn)行)

interface Animal{
     color?: string;
     size?: number;
}
function createAnimal(ani:Animal): 
{color:string,size:number}{
    var aniTemp = {
         color: "yellow";
         size: 100;
}
if (ani.color) {
     aniTemp.color = ani.color;
}
if (ani.size) {
     aniTemp.size = ani.size;
}
return aniTemp;
}
createAnimal({color: "red"})

四、類(lèi)
1、類(lèi)的定義

class Person {
    // 成員
   // 屬性
   name: string;
   // 構(gòu)造函數(shù)
  constructor(nameNew:string) {
          this.name = nameNew;
  }
// 方法
  info() {
      return this.name；
  }
}

// 實(shí)例化一個(gè)Person類(lèi)的對(duì)象 
let person = new Person("小明")；

// 繼承 封裝 多態(tài)
// 子類(lèi)繼承父類(lèi)
class Animal{
   // 可見(jiàn)度
   public name：string；
   private age: number;
   protected sex: string  
}
class Cat extends Animal {

}

五、函數(shù)
1、函數(shù)定義

// 原生j函數(shù)的寫(xiě)法：
function sum(a, b) { return a + b; };
 var result = sum(1, 2);

// ts中的函數(shù):
// 為函數(shù)定義類(lèi)型
function sum(x:number, y:number):number {
    return x + y;
}

// 完整的函數(shù)類(lèi)型
// 函數(shù)類(lèi)型有兩部分組成：參數(shù)類(lèi)型和函數(shù)返回值的類(lèi)型
// x和y是參數(shù)的名字 number是參數(shù)的類(lèi)型
// =>number指的是函數(shù)返回值的類(lèi)型
let num:number = 10;

let mySum:(x:number, y:number)=>number = 
    function(x:number, y:number):number{
                    return x + y;
}

// 當(dāng)函數(shù)無(wú)返回值時(shí)，使用void關(guān)鍵字
function test(a:string):void{

}

2、可選形參

// 函數(shù)有兩個(gè)形參b和c，其中b是可選形參
// 注意：可選形參要放在必選形參后面
function test2(c:number,b?:number):void{
      console.log(c);
      if  (b) {
          console.log(b);
      }
}
test2(10);