實列講解TypeScript的基本用法

wean 發(fā)布于2019-08-23 12:22 / 1347人閱讀

摘要：是微軟開發(fā)的的超集，兼容，可以載入代碼然后運行?？商幚硪延械拇a，并只對其中的代碼進行編譯小編我決定使用白鷺引擎開發(fā)游戲，在開發(fā)游戲之前學(xué)習(xí)一下，目前它的可視化工具已經(jīng)可以打多端包了是一套完整的游戲開發(fā)解決方案。中包含多個工具以及項目。

TypeScript 是微軟開發(fā)的 JavaScript 的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運行。TypeScript與JavaScript相比進步的地方 包括：加入注釋，讓編譯器理解所支持的對象和函數(shù)，編譯器會移除注釋，不會增加開銷；增加一個完整的類結(jié)構(gòu)，使之更新是傳統(tǒng)的面向?qū)ο笳Z言

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

小編我決定使用白鷺引擎開發(fā)游戲，在開發(fā)游戲之前學(xué)習(xí)一下TypeScript，目前它的可視化工具已經(jīng)可以打多端包了

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

1.字符串新特性 ``

1.字符串換行

var content = `1111 
22222`

2.字符串模板

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

字符串模板不請闊以使用變量還闊以使用函數(shù)調(diào)用

自動拆分字符串

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.參數(shù)新特性

1.參數(shù)類型:

在參數(shù)名稱后面使用冒號來指定參數(shù)的類型

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

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

2.自定義類型

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

3.參數(shù)默認值

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

注意：帶默認值的參數(shù)聲明在后面，因為在typescript中參數(shù)不傳全，會拋出異常

4.可選參數(shù)

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

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

注意：同理，可選參數(shù)聲明在必選參數(shù)后面

5.操作符-無線參數(shù)

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.操作符-固定參數(shù)

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函數(shù)

function* test(){
    console.log(1)
    yield;
    console.logg(2)
}
var fun1  = test();
fun1.next(); //使用next,輸出 1
fun1.next(); //在調(diào)一次輸出 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(`隨機數(shù)${price}`) 
}
console.log(`跳出時隨機數(shù)${price}`)

隨機輸出:

8.析構(gòu)表達式-對象

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

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

9.析構(gòu)表達式-數(shù)組

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

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

析構(gòu)表達式讓你寫更少的代碼

3.箭頭表達式

1.單行箭頭:

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

2.無參數(shù):

 var foo = () => {} 
 //以上表達式相當(dāng)于
 var foo = function () {}

單個參數(shù)

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

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

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遍歷的是數(shù)組的索引（即鍵名），而for of遍歷的是數(shù)組元素值。
for of遍歷的只是數(shù)組內(nèi)的元素，而不包括數(shù)組的索引name

4.類

1.創(chuàng)建類

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 多個實列，多個實列都有相同的屬性和方法，只不過狀態(tài)不同

訪問控制符

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

類的創(chuàng)建時，默認都是public
private 關(guān)鍵字申明私有，只有在類的內(nèi)部才可使用
protected 受保護，只有在類的和類的子類使用

構(gòu)造函數(shù)

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

構(gòu)造函數(shù)(constructor)只會調(diào)用一次

類的繼承

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

super 1.子類構(gòu)造函數(shù)必須調(diào)用父類構(gòu)造函數(shù)。2.super闊以來調(diào)用父類方法

泛型<>

var qsts : Array  = []
qsts[0] = new Test("")
qsts[1] = new Pest("")
//這個數(shù)組只能放Test類型的數(shù)據(jù)

接口 interface

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

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

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

*所有實現(xiàn)ITest接口定制的類必須實現(xiàn)eat()

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

GPU云服務(wù)器云服務(wù)器基本用法 JSTL基本用法標(biāo)簽html的講解 TypeScript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98394.html

發(fā)表評論

登陸后可評論

0條評論

wean

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow快速入門

閱讀 1548·2023-04-26 00:20
tensorflow2.3

閱讀 1139·2023-04-25 21:49
易主機是什么-電腦主機會響是什么原因？

閱讀 819·2021-09-22 15:52
DediPath，4折優(yōu)惠，OpenVZ VPS，$1.40/月，2核/1G內(nèi)存/30GB SSD/

閱讀 594·2021-09-07 10:16
騰訊云：云主機/短信/CDN/數(shù)據(jù)庫等秒殺；2G內(nèi)存、60GB SSD空間、6Mbps的VPS，年付

閱讀 986·2021-08-18 10:22
瀏覽器內(nèi)核、JS 引擎、頁面呈現(xiàn)原理及其優(yōu)化

閱讀 2681·2019-08-30 14:07
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間

閱讀 2252·2019-08-30 14:00
【二次元的CSS】—— 用 DIV + CSS3 畫Hello Kitty（詳解步驟）

閱讀 2670·2019-08-30 13:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

實列講解TypeScript的基本用法

相關(guān)文章

**前端周刊第59期：選 Flow 還是 TypeScript？**

**新上課程推薦：TypeScript完全解讀(總26課時）**

typescript - 一種思維方式

TypeScript - 一種思維方式

發(fā)表評論

0條評論

wean

男|高級講師

TA的文章

tensorflow快速入門

tensorflow2.3

易主機是什么-電腦主機會響是什么原因？

DediPath，4折優(yōu)惠，OpenVZ VPS，$1.40/月，2核/1G內(nèi)存/30GB SSD/

騰訊云：云主機/短信/CDN/數(shù)據(jù)庫等秒殺；2G內(nèi)存、60GB SSD空間、6Mbps的VPS，年付

瀏覽器內(nèi)核、JS 引擎、頁面呈現(xiàn)原理及其優(yōu)化

好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間

【二次元的CSS】—— 用 DIV + CSS3 畫Hello Kitty（詳解步驟）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

實列講解TypeScript的基本用法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！