TypeScript在Cocos中的具体使用

目录

 

1.建议线学下js教程

2.ts组件脚本

3.类的构造函数

4.类的继承

5.import 与export

6.cocos 新建组件类示例

---

1.建议线学下js教程

没有js基础的，建议点击连接学习或复习下js。

https://blog.csdn.net/osuckseed/article/details/103560281

2.ts组件脚本

1: 导入ccc的装饰器:  const {ccclass, property} = cc._decorator;

2: @ccclass 使用装饰器声明为组件类, 不然这个类不会被编辑器识别;

3:  Ts: 定义一个类: export default class

4: Ts 类的继承: extends 关键字;

5: 定义TS 类的数据成员: 变量名字: 类型 = 默认值;

6: 将组件类的简单数据成员绑定到编辑器:  @property     boolean, number,  string,

7:组件类绑定creator 类型到属性 @property(cc.Label)

8: 声明一个数组: @ property([cc.Node])

9: onload, start, update, 是组件类的标准接口，调用时期和JS是一样的;

10: 定义一个函数 参数, 返回值; 可加类型，可不加类型, 没有返回值的可以写void     test_func(v: number) : number {  函数体 }

11: js 的表，和数组，可以直接使用; array1:Array<number>; array2:number[];

12: for循环等，可以沿用JS写法也可以用TS写法;

13: 权限修饰: public, private, protected

14: 导入其它的类: import 类名 from “路径” import ball_ctrl from "./ball_ctrl";

//构造函数
//成员权限
class Person{
private name:string="";
private age:number=0;

    constructor(name,age){
        this.name=name;
        this.age=age;
        console.log("constructor");

    }

    public test_func():void{

        console.log("test_func");    
    }

}
//类的继承 （包含了一个父类的数据对象）
class Man extends Person{


    private sex:number=0;
    //子类也定义了构造函数 也一定要调用父类的构造函数
    constructor(name,age)
    {
        //调用父类构造函数
        super(name,age);
        //super 指代父类对象
        super.test_func();
    }
    main_test_func()
    {
        console.log("main_test_func");   

    }
    //子类实现父类的方法，最终的实例是谁
    public test_func():void{

        console.log("main test_func");    
    }

}


import com_inst from "./com_inst";
const {ccclass, property} = cc._decorator;//导入cocos 的装饰器

@ccclass    //这个类是一个组件类

//导出这个默认的类，import 导入这个代码

export default class game_mgr extends cc.Component {

    @property(cc.Label) //绑定成员类型到编辑器以供使用
    label: cc.Label = null; //类的数据成员

    @property
    text: string = 'hello';
    @property
    is_debug:boolean=false;

    //数组定义
    @property([cc.Node])
    my_nodes:cc.Node[]=null;
    //定义成员变量
    //变量名字：变量类型(number ,boolean ,类型)=null

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    //类的成员函数
    start () {
        console.log(this.test_func(3,4));
        //局部变量的定义
        //var let
        //var a=3;
        var  a:number =3;

        var arry:Array<number>=new Array<number>();
        arry.push(4);
        console.log(arry);

        this.node.addComponent("com_inst");
        var p:Person=new Person("mike",99);
        p.test_func();
        console.log(p);
        var m:Man=new Man("szw",18);
        //any可以存放任意数据类型
        var ptr:any =m;
        console.log(m);


        
    }

    // update (dt) {}

    //返回值，函数名字（参数）
    //如果没有返回值 类型改为 void
    //public（默认）  private protected（子类可访问）
    test_func(lhs:number,rhs:number):boolean{
       return lhs>rhs; 

    }
}

3.类的构造函数

1:  Ts 里面每隔类都有一个类的构造函数，new 类型的时候，会调用;     constructor(参数);

    constructor(name,age){
        this.name=name;
        this.age=age;
        console.log("constructor");

    }

2:  权限:

public 共用类的外部可以访问;                  

private 私有，只能在类的内部使用;                  

protected 保护类型： 内部可以访问，子类可以访问。      

默认是public;

3: 静态成员/成员函数:      

static 名字:类型 = 默认值;    

 静态方法:  static 方法名字(参数): 返回值类型 {}, 不依赖于对象实例就可以调用;

4: any类型, 如果这个数据可以执行任意对象就可以定义成any类型;      var a: any;

4.类的继承

1:  class 类名 extends 基类 {}

2: 继承了基类的数据成员，和方法逻辑;

3: 继承了不一定能访问，看数据权限;

4: 重载：同一个函数的名字，参数不一样;

5: 多态: 子类自己定义一个父类的方法；

6: super关键字, 表示父类的实例;  super.父类方法(); 可以直接调用;

7: 抽象类: abstract class 类名 {}    抽象方法: abstract 函数名(参数) {} 强制子类要实现这个方法;

5.import 与export

1: export: 用于从文件导出: 函数, 对象，数据, 类型;

2: exprots { 函数}; // 导出函数      exports { 常量}; // 导出常量;  

3:导出默认:      export default 类/函数/对象, 一个文件默认只能有一个;

4:  import 引来导入    

import {mem1, mem2} from ‘模块名字’: 导入模块某一个成员，和某几个;    

import * as 模块名字 from ‘my-model’: 导入模块里面的所有符号;      

import default_module from ‘my-model’: 导出模块的默认导出;    

import {mem1 as new_mem1, mem2 as new_mem2} 导出模块成员，并重新命名;    

import default, * as ns_model from ‘my-model’: 导入模块的默认导出和命名导出;

6.cocos 新建组件类示例

//从指定模块导出对应的符号
import { _decorator, Component, Node,Vec3, CCObject } from "cc";

//装饰器 编辑器装载脚本代码的时候读取的
//ccclass ：指定类为组件类
//property：作为属性绑定为到编辑器

const { ccclass, property } = _decorator;

//装饰器以@开头 编辑器识别后把它作为组件类
//export：导出类 import{gameMgr} frrom "./gameMgr"
@ccclass("gameMgr")
export class gameMgr extends Component {
    /* class member could be defined like this */
    // dummy = '';

    /* use `property` decorator if your want the member to be serializable */
    // @property
    // serializableDummy = 0;
    @property
    is_debug:boolean =true;
    @property(Node)
    test_node:Node=null;
    @property([Node])
    arry_node:Array<Node> =[]; 
    start () {
        // Your initialization goes here.
    }

    // update (deltaTime: number) {
    //     // Your update function goes here.
    // }
}