實列講解TypeScript的基本用法

TypeScript 是微軟開發的 JavaScript 的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然後運行。TypeScript與JavaScript相比進步的地方 包括：加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增加開銷；增加一個完整的類結構，使之更新是傳統的面嚮對象語言

JavaScript 的 TypeScript 的區別
TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型註解提供編譯時的靜態類型檢查。TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯

小編我決定使用白鷺引擎開發遊戲，在開發遊戲之前學習一下TypeScript，目前它的可視化工具已經可以打多端包了

Egret是一套完整的HTML5遊戲開發解決方案。Egret中包含多個工具以及項目。Egret Engine是一個基於TypeScript語言開發的HTML5遊戲引擎，該項目在BSD許可證下發布

1.字符串新特性 ``

1.字符串換行

var content = `1111 
22222`

2.字符串模板

var name = "羊先生"
var getName = function(){
    return "杭州"
}
console.log(`我是${name}來自${getName()}`)//輸出：我是羊先生來自杭州

字符串模板不請闊以使用變量還闊以使用函數調用

自動拆分字符串

function test(tp,name,age){
   console.log(tp)
   console.log(name)
   console.log(age)
}
   var myname = '羊先生'
   var getAge = function(){
   return 18;
}
test`我是,${myname},今年${getAge()}`

返回:

2.參數新特性

1.參數類型:

在參數名稱後面使用冒號來指定參數的類型

var name :string = '羊先生' //再次賦值只能賦爲字符串
var alias :any = 'all' //any 闊以爲字符賦任何類型
var age :bumber = '25' //再次賦值只能賦爲數字
var man : boolean = true //再次賦值只能賦爲布爾值
function test(): void{} //void申明函數沒返回值
function test(): string{} //申明函數只能返回字符串類型
function test(name:string): string{} /給函數的參數也申明類型

除了闊以給變量申明類型還闊以給函數申明類型也闊以給函數的參數聲明類型

2.自定義類型

class Person{
    name:string;
    age:number;
} 
var name : Person= new Person();
//如果你是用編輯器編寫就會提示類型,作爲開發來說是一個方便，也容易管理

3.參數默認值

function test(a:string,b:string,s:string = 'C'){
    console.log(a)
    console.log(b)
    console.log(c)
}

test('A','B','C') //輸出 A B C
test('A','B') //輸出 A B C

注意：帶默認值的參數聲明在後面，因爲在typescript中參數不傳全，會拋出異常

4.可選參數

function test(a:string,b?:string,s:string = 'C'){
    console.log(a)
    console.log(b)
    console.log(c)
}

test('A') //輸出 A undefined C

注意：同理，可選參數聲明在必選參數後面

5.操作符-無線參數

function test(...args){
    args.forEach(function(arg){
        consloe.log(arg)
    })
}

test(1,2,3) //輸出 1 2 3

test(1,2,3,4,5) //輸出 1 2 3 4 5

6.操作符-固定參數

function test(a,b,c){
   console.log(a)
   console.log(b)
   console.log(c) 
}
var args = [1,2]
test(...args) //輸出 1 2 undefined 
var args2 = [4,,5,6,7,8,9]
test(...args2) //輸出 4 5 6

7.genertor函數

function* test(){
    console.log(1)
    yield;
    console.logg(2)
}
var fun1  = test();
fun1.next(); //使用next,輸出 1
fun1.next(); //在調一次輸出 2 

function* test(){
    while(true){
        yield Math.random()*1000
    }
}
var p = test()
var limitPrice = 15
var price = 100
while(price > limitPrice ){
   price  =  p.next().value
   console.log(`隨機數${price}`) 
}
console.log(`跳出時隨機數${price}`) 

隨機輸出:

8.析構表達式-對象

function test(){
    return{
        code:'100'，
        peice:'1000',
        obj:{
            a:2000,
            b:3000
        }
    }
}
var {code,peice} = test()
console.log(code) //輸出100
console.log(peice) //輸出1000

var {code：codex,peice} = test()
console.log(codex) //輸出100
console.log(peice) //輸出1000

var {code,peice,obj} = test()
console.log(obj) //輸出object對象

var {code,peice,obj:b} = test()
console.log(b) //輸出3000

注意：解析的變量變量與函數返回的值相同

9.析構表達式-數組

var arr1 = [1,2,3,4]

var [number1,number2] = arr1 
console.log(number1) //輸出 1
console.log(number2) //輸出 2

var [,,number1,number2] = arr1 
console.log(number1) //輸出 3
console.log(number2) //輸出 4

var [number1,,,number2] = arr1 
console.log(number1) //輸出 1
console.log(number2) //輸出 4

var [number1,number2,...others] = arr1 
console.log(number1) //輸出 1
console.log(number2) //輸出 2
console.log(others) //輸出 3 4

在函數中使用
function test([number1,number2,...others]){
    console.log(number1)
    console.log(number2)
    console.log(others)
}
test(arr1 )// 輸出 1 2 [3,4]

析構表達式讓你寫更少的代碼

3.箭頭表達式

1.單行箭頭:

 var foo = (arg1,arg2) => arg1 + arg2;
 //上述表達式相當於
 var foo = function (arg1, arg2) { return arg1 + arg2; };

2.無參數:

 var foo = () => {} 
 //以上表達式相當於
 var foo = function () {}

單個參數

var fn = x => x * x;

this指向

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
        return fn();
    }
};
obj.getAge(); // 25

使用箭頭函數讓代碼更有可讀性和理解

3.for in 和 for of

for in

var myArray=[1,2,4,5,6,7]
myArray.name="羊先生"
for (var index in myArray) {
  console.log(myArray[index]);
}

for of

var myArray=[1,2,4,5,6,7]
myArray.name="羊先生";
for (var value of myArray) {
  console.log(value);
}

for in遍歷的是數組的索引（即鍵名），而for of遍歷的是數組元素值。
for of遍歷的只是數組內的元素，而不包括數組的索引name

4.類

1.創建類

class Test{
    name;
    eat(){
        console.log('這是一個類')
    }
}

var p1  = new Test();
p1.name = 'a'
p1.eat()

var p2  = new Test();
p2.name = 'b'
p2.eat()

同樣一個類裏面可以new 多個實列，多個實列都有相同的屬性和方法，只不過狀態不同

訪問控制符

class Test{
    private name;//申明私有屬性
    public eat(){ //申明公有方法
        console.log('這是一個類')
    }
}

類的創建時，默認都是public
private 關鍵字申明私有，只有在類的內部纔可使用
protected 受保護，只有在類的和類的子類使用

構造函數

class Test{
    name
    constructor(){
        this.name = '初始化name值'
    }
    上面的或者這樣寫=>
    //constructor(public name:string='初始化name值'){
    //   
    //}
    
    eat(){
        console.log(this.name)
    }
}

構造函數(constructor)只會調用一次

類的繼承

//父類
class Test{
  constructor(public name:string){
      this.name = '初始化name值'
  }
  eat(){
     console.log('我是父類函數')       
  }    
}
//子類
class Pest extends Test{
  constructor(name:string,code:string){
      super(name);
  }
  tat(){
      super.eat() //super 調用父類的函數
  }
}
var p = new Pest('')
p.tat() //輸出：我是父類函數

super 1.子類構造函數必須調用父類構造函數。2.super闊以來調用父類方法

泛型<>

var qsts : Array<Test>  = []
qsts[0] = new Test('')
qsts[1] = new Pest('')
//這個數組只能放Test類型的數據

接口 interface

interface ITest(){
    name:string,
    age:number
}
class Test(){
  constructor(public config:ITest){
     
  }  
}
var p1  = new Test({
    name:"羊先生",//這裏定義的參數只能按照接口定義的來
    age:'18'
})

接口除了申明屬性還闊以申明方法

interface ITest(){
    eat()
}
class Test extends ITest(){
 eat() 
}
class Pest extends ITest(){
 eat() 
}

*所有實現ITest接口定製的類必須實現eat()

模塊
export：它是用來定義模塊的，可以導出對象、函數、類、字符串等等：
mport ：用來導入的也可以通過as改名：
注意：在平時開發中可能見到export default,那麼export和export default的區別就是,前者導出的東西需要在導入的時候加{}，而後者則不需要：