Skip to main content

classes in typescript


classes and object is more of the most imported part of any object oriented programming language so how to use classes in typescript i am trying to figure it out.

as we know classes are blueprints which holds all properties and methods and using instance we can access those properties and methods.

so lets try to create a class in typescript

working link->https://stackblitz.com/edit/typescript-yh1fpu



//create a class with keyword class following class name
class species
{
//
public orign:string;
//declare a class property
private specType:string;
//define constructor for your class if you don't define it typescript automatically create it for you
constructor()
{

}
//this is how you can define a function in typescipt
getSpecType():string
{
return this.specType;
}
//this is how you can define a function in typescipt
setSpecType(type:string)
{
this.specType=type;
}   
}
//now lets try to extend species class
class human extends species
{
//private keyboard helps us to encapsulate data with in class means no other class access it directlty 
private CallSpeak:boolean;
private CallEat:boolean;
private CanRun:boolean;
constructor()
{
super();
//because orign is a public type you can access it in derived class
console.log(this.orign)
}
//set all human ablities
getCallSpeak():boolean
{
return this.CallSpeak;
}
getCallEat():boolean
{
return this.CallEat;
}
getCanRun():boolean
{
return this.CanRun;
}
//set all ------------------
setCallSpeak(_CallSpeak:boolean)
{
this.CallSpeak=_CallSpeak;
}
setCallEat(_CallEat:boolean)
{
this.CallEat=_CallEat;
}
setCanRun(_CanRun:boolean)
{
this.CanRun=_CanRun;
}
}
//create instance of class
var manish=new human();
manish.setCallEat(true);
manish.setCallSpeak(true);
manish.setCanRun(true);

console.log(manish.getCallSpeak());

//A generic type is a generic class or interface that is parameterized over types. means its works based on type rather than value's and its a killer features for example you can declare class only once that handle all type of similar operation for all type of data for example
//combine class where T is a generic type
class combine<T>
{
add:(x:T,y:T)=>T
}
//create a new  instance of our generic class.
//<number> our class is number type
var n=new combine<number>();
n.add=(x,y)=>
{
return x+y;
}
console.log(n.add(10,25))
//create a new  instance of our generic class.
//<string> our class is string type
var n=new combine<number>();
var s=new combine<string>();
s.add=(a,b)=>{

return a+" "+b;
}
//=================static class ==========================
//staic class does not required to create a instance to access properties or method
//but it'f follow some rules
class MathOP
{
//staic keyword required to access a method without creating a instance of that class
static addTwoNumber(a:number,b:number):number
{
return a+b;
}
static randomNumber():number
{
return Math.round(Math.random()*100);
}
}
//now we can access all method like this

console.log(MathOP.addTwoNumber(10,20))
console.log(MathOP.randomNumber())
//singleton class means a class which contain only one instance through out the application does not matter how many time you create a instance of it
class SoundManager {
private static instance: SoundManager;
private constructor() {
}
static getInstance() {
if (!SoundManager.instance) {
SoundManager.instance = new SoundManager();
}
return SoundManager.instance;
}
playsound()
{
console.log("sound is playing");
}
stopSound()
{
console.log("sound is stoped");
}
}
const newsound=SoundManager.getInstance();
console.log(newsound.playsound());
console.log(newsound.stopSound());

so in details

1. classes are blueprints which define properties and methods
2. you can create multiple instance of a class where every instance holds
different data 
3. each instance allocated in different memory
4. classes have different types for example dynamic classes static classes and
Singleton





Comments

Popular posts from this blog

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...