Egret基础 – TypeScript学习之路

TypeScript学习之路

为了方便cocos2d-x的朋友,上篇作为引子,今天这篇会就着Egret所使用的Typscript语言学习一下。主要大致分为基本语法和类型条件与循环接口与函数类、包与命名空间泛型 几个部分。希望可以使得朋友尽快入手。

基本语法和类型


   /**
    * 定义变量的方法有 var 、let、const
    */ 
    var number1:number = 100;
    var number2 = 200;
    let number3:number = 300;
    let number4 = 400;
    const number5 = 500;

变量定义

这里定义出现了var和let,他们之间有什么区别呢?看下段代码你就会有所了解
1460604178615
会提示错误src/Main.ts(194,34): error TS2304: Cannot find name ‘num2’.
当然你要是强行编译,然后运行,你会发现
1460604271545
还是显示出来了,因为这个是js定义变量的原理导致的,会将所有的声明提前,但是我们还是要遵循ts这个规则。
至于const和let的比较可以参考下文
1460604389668

基本类型


var b:boolean = false;
var n:number = 100;
var s:string = "Hello Egret";
var name = "TomYuan";
var h_str: string = `Hello, my name is ${name}`;
console.log(h_str);
var arr1:Array = [100, 200];
var arr2:number[] = [100, 200];
var p1:[string, number] = ["TomYuan", 100];
var p2:[string, string, string] = ["China", "USA", "Russia"];
enum COLOR {Red, Green, Blue};
var color = COLOR.Red;
var any_value:any = 100;
any_value = false;
any_value = "AnyValue";
function test(): void {
    // TODO
}

一般在学习一门语言的路上,必然会学习条件语句和循环语句,这里我们就一起来学习下相关的内容。


var a = Math.random() * 100;
var b = Math.random() * 100;
if (a + b > 150) {
    console.log("运气不错,去买彩票吧!");
} else if (a + b < 10) {
    console.log("运气爆棚,多买几张彩票!");
} else {
    console.log("今天适合在家睡觉");
}

通过if…else if..else我们可以完成很多有用的逻辑。当然typescript也同样是支持switch的,而且类型更多样化


enum PlayerStatus { IDLE,MOVE,ATK,SKILL,DEAD};
var curr_status = PlayerStatus.MOVE;
switch(curr_status) {
    case PlayerStatus.IDLE:{
        console.log("玩家处于呼吸状态");
        break;
    }
    case PlayerStatus.MOVE:{
        console.log("玩家处于移动状态");
        break;
    }
    case PlayerStatus.ATK:{
        console.log("玩家正在进行攻击");
        break;
    }
    case PlayerStatus.SKILL:{
        console.log("玩家释放了大招");
        break;
    }
    case PlayerStatus.DEAD: {
        console.log("玩家已经死亡");
        break;
    }
    default: {
        console.log("玩家正在发呆");   
    }
}

有了switch…case…的机制,我们可以很容易实现一些有限状态机的内容。
学习完了选择,我们就想到了各式各样的循环,看看都有什么的循环等着我们来征服。


var nums: number[] = [100, 200, 312, 405, 771, 512];
var sum = 0;
for (var i = 0; i < nums.length; i++) {
    sum = sum + nums[i];
}
console.log(`Total:${sum}`);
for (var k in nums) {
    console.log("n:" + nums[k]);
}

接口与函数
我们这里将函数和接口同意称之为接口,让我们看一个简单的接口


function abs(n:number): number {
    if (n >= 0) {
        return n;
    }
    return -n;
}
...
console.log(abs(-100));        // OUT: 100

下面我们来看下属性接口


interface CostomValue {
    color_r:number;
    color_g:number;
    color_b:number;
}
function covertToRGB(v: CostomValue):number {
    var ret:number = 0;
    ret = (v.color_r << 16) + ret;
    ret = (v.color_g << 8) + ret;
    ret = v.color_b + ret;
    return ret;
}
...
var color:CostomValue = {color_r: 225, color_g: 255, color_b: 155};
var ret = covertToRGB(color);
console.log(ret);

上述属性中我们发现都是必须参数,那么可选参数该怎么做呢?


interface CostomValue {
    color_r:number;
    color_g:number;
    color_b:number;
    color_a?:number;
}

看看那个小小的?就是了
除了属性接口还有函数接口


interface avg {
    (num1:number, num2:number, ...number):number;
}
var avgFunc:avg;
avgFunc = function(n1:number, n2:number, n3:number, n4:number) {
    return (n1 + n2 + n3 + n4) / 4;
}
...
var avg_v = avgFunc(100, 200, 300, 400);
console.log(avg_v);

除了属性和函数还有数组和类接口,数组我这里就不介绍了,一起看下类接口吧!


interface Run {
    Output();
}
class People implements Run {
    constructor() {
    }
    Output() {
        console.log("People Running...");
    }
}
class Cat implements Run {
    constructor() {
    }
    Output() {
        console.log("Cat Running...");
    }
}
...
var p = new People();
p.Output();
var cat = new Cat();
cat.Output();

经常玩C++的你一定立刻就懂了,不解释!

  • 类、包与命名空间
  • 
    class Main extends egret.DisplayObjectContainer {
        /**
         * 加载进度界面
         * Process interface loading
         */
        private loadingView:LoadingUI;
        public constructor() {
            super();
            this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        }
        private onAddToStage(event:egret.Event) {
            //设置加载进度界面
            //Config to load process interface
            this.loadingView = new LoadingUI();
            this.stage.addChild(this.loadingView);
            //初始化Resource资源加载库
            //initiate Resource loading library
            RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
            RES.loadConfig("resource/default.res.json", "resource/");
        }
        ...
    }
    

    官方的代码中这里体现了大部分类的内容,包括继承关系以及封装性
    egret是命名空间。我们在做自己的项目的时候,可以使用一个命名空间来整体规划项目。
    有关包的概念可以参考这里:http://www.typescriptlang.org/docs/handbook/modules.html

    泛型

    
    function identity(arg: T): T {
        return arg;
    }
    

    有了这些准备,我们继续学习之旅吧!

    欢迎留言

    avatar
      Subscribe  
    Notify of