Catalog

1. It is suggested to learn online js course

2.ts Component script

3. Class constructor

4. Class inheritance

5.import And export

6.cocos New component class example

1. It is suggested to learn online js course

No, js The basis of , It is suggested to click the link to learn or review js.

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

2.ts Component script

1: Import ccc The decorator :  const {ccclass, property} = cc._decorator;

2: @ccclass Use decorators to declare as component classes , Otherwise, this class will not be recognized by the editor ;

3:  Ts: Define a class : export default class

4: Ts Class inheritance : extends keyword ;

5: Definition TS Data members of class : Variable name : type = The default value is ;

6: Bind the simple data members of the component class to the editor :  @property     boolean, number,  string,

7: Component class binding creator Type to attribute @property(cc.Label)

8: Declare an array : @ property([cc.Node])

9: onload, start, update, Is the standard interface of component classes , Call period and JS It's the same ;

10: Define a function Parameters , Return value ; Additive type , No type , If there is no return value, you can write void     test_func(v: number) : number {   The body of the function }

11: js Table of , And an array , You can use it directly ; array1:Array<number>; array2:number[];

12: for Cycle, etc , You can use JS The writing method can also be used TS How to write it ;

13: Authority modification : public, private, protected

14: Import other classes : import Class name from “ route ” import ball_ctrl from "./ball_ctrl";

// Constructors 
// Member rights 
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 inheritance  （ Contains a data object of a parent class ）
class Man extends Person{


    private sex:number=0;
    // Subclasses also define constructors   Also be sure to call the constructor of the parent class 
    constructor(name,age)
    {
        // Call parent constructor 
        super(name,age);
        //super  Refers to a surrogate object 
        super.test_func();
    }
    main_test_func()
    {
        console.log("main_test_func");   

    }
    // Method of subclass implementing parent class , Who is the final instance 
    public test_func():void{

        console.log("main test_func");    
    }

}


import com_inst from "./com_inst";
const {ccclass, property} = cc._decorator;// Import cocos  The decorator 

@ccclass    // This class is a component class 

// Export this default class ,import  Import this code 

export default class game_mgr extends cc.Component {

    @property(cc.Label) // Bind member types to the editor for use 
    label: cc.Label = null; // Data members of class 

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

    // To define an array 
    @property([cc.Node])
    my_nodes:cc.Node[]=null;
    // Define member variables 
    // Variable name ： Variable type (number ,boolean , type )=null

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    // class 
    start () {
        console.log(this.test_func(3,4));
        // Definition of local variable 
        //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 Can store any data type 
        var ptr:any =m;
        console.log(m);


        
    }

    // update (dt) {}

    // Return value , Function name （ Parameters ）
    // If there is no return value   Change the type to  void
    //public（ Default ）  private protected（ Subclasses can access ）
    test_func(lhs:number,rhs:number):boolean{
       return lhs>rhs; 

    }
}

3. Class constructor

1:  Ts There is a class constructor for every class ,new When it comes to type , Would call ;     constructor( Parameters );

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

    }

2:   jurisdiction :

public The outside of the shared class can access ;                  

private private , Can only be used inside a class ;                  

protected Type of protection ： Internally accessible , Subclasses can access .      

The default is public;

3: Static members / Member functions :      

static name : type = The default value is ;    

  Static methods :  static Method name ( Parameters ): return type {}, You can call ;

4: any type , If this data can be executed, any object can be defined as any type ;      var a: any;

4. Class inheritance

1:  class Class name extends Base class {}

2: Inherits the data member of the base class , And method logic ;

3: Inherited may not be accessible , See data permissions ;

4: heavy load ： The name of the same function , The parameters are different ;

5: polymorphic : A subclass defines its own method of a parent class ;

6: super keyword , Represents an instance of the parent class ;  super. Parent class method (); Can be called directly ;

7: abstract class : abstract class Class name {}     Abstract method : abstract Function name ( Parameters ) {} Force subclasses to implement this method ;

5.import And export

1: export: Used to export from a file : function , object , data , type ;

2: exprots { function }; // The export function      exports { Constant }; // Derived constants ;  

3: Export the default :      export default class / function / object , A file can only have one by default ;

4:  import Lead in import    

import {mem1, mem2} from ‘ Module name ’: Import a member of the module , And some ;    

import * as Module name from ‘my-model’: Import all symbols in the module ;      

import default_module from ‘my-model’: The default export of the export module ;    

import {mem1 as new_mem1, mem2 as new_mem2} Export module members , And rename ;    

import default, * as ns_model from ‘my-model’: The default export and named export of the import module ;

6.cocos New component class example

// Export the corresponding symbol from the specified module 
import { _decorator, Component, Node,Vec3, CCObject } from "cc";

// Decorator   When the editor loads the script code 
//ccclass ： Specify the class as component class 
//property： Bind as an attribute to the editor 

const { ccclass, property } = _decorator;

// Decorate with @ start   The editor recognizes it as a component class 
//export： Export class  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.
    // }
}