实列讲解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的区别就是,前者导出的东西需要在导入的时候加{}，而后者则不需要：