Development Study/Frontend

[TypeScript] TypeScript Grammar - 08

  • -
728x90

Previous Series

 

[TypeScript] TypeScript Grammar - 06~07

Previous Series [TypeScript] TypeScript Grammar - 03~05 3. Type alias This Posting contains how to alias type to other variables type myType = number | string; let grade: myType = 3 Use type to create type and use to annotate another. Usually, we use it wh

time-map-installer.tistory.com


8.  Class

class Train {
	color : string;
    constructor(color:string){
    	this.color = color;
    }
    start(){
    	console.log('start')
    }
}

const ktx = new Train('white');
ktx.start();

Data modifiers

  • pubclic
    • Child class, access available at both class and instance
  • protected
    • access available at child class
  • private
    • can access only in corresponding function
  • readonly
    • Just for reading, access available but denied edit

8_01.  Class_public

class Train {
	// color : string;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log('start')
    }
}

const ktx = new Train('white');
ktx.start();

8_02.  Class_private

class Train {
	private name: string = "train";
    color: string;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log('start')
    }
}

class Ktx extends Train {
	constructor(color: string){
    	super(color);
    }
    showName() {
    	console.log(super.name); // error because name is private
    }
}

const tx = new Ktx("White");

8_03.  Class_protected

class Train {
	private name: string = "train";
    color: string;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log('start')
    }
}

class Ktx extends Train {
	constructor(color: string){
    	super(color);
    }
    showName() {
    	console.log(super.name); // class inheritanced
    }
}

const tx = new Ktx("White");

8_04.  Class_readonly

class Train {
	private name: string = "train";
    color: string;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log(`start ${this.color}`);
    }
}

const ktx = new Train("White");
ktx.start()

 


8_05.  Class_static

class Train {
	private name: string = "train";
    color: string;
    static blocks = 10;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log('start');
        console.log(this.name);
        console.log(this.blocks); // error
    }
}

class Ktx extends Train{
	constructor(color: string, name){
    	super(color, name);
    }
    showName(){
    	console.log(super.name);
    }
}

const tx = new Ktx('white', 'NewKoreaTrain');
console.log(tx.blocks); // error

Q. Why error here??

A. Static can't be accessed by this & instance

    If we use static to member variable, we have to call this not 'this' but the class name.

    Also, method needs to call by coded class name

class Train {
	readonly name: string = "train";
    color: string;
    static blocks = 10;
    
    constructor(color: string, name){
    	this.color = color;
        this.name = name;
    }
    start(){
    	console.log('start');
        console.log(this.name);
        console.log(Train.blocks);
    }
    static staticStart(){
    	console.log('static start');
    }
}

class Ktx extends Train{
	constructor(color: string, name){
    	super(color, name);
    }
    showName(){
    	console.log(super.name);
    }
}

const tx = new Ktx('white', 'KoreaFastTrain');

console.log(Train.blocks);
console.log(Train.staticStart);

8_06.  Class_abstract

An abstract class can't generate by instance or object by using 'new'

Only available at class inheritance

class Train {
	private name: string = "train";
    color: string;
    constructor(public color:string){
    	this.color = color;
    }
    start(){
    	console.log(`start ${this.color}`);
    }
}

const ktx = new Train("White");
ktx.start()

Variables and methods have to be written on the side of the inheritance class

If you don't, error will visit you.

On the side of the inherited class, you can write specific functions


End

 

 

Next Series

 

[TypeScript] TypeScript Grammar - 09

Previous Series

time-map-installer.tistory.com

 

728x90
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.