Development Study/Frontend
[TypeScript] TypeScript Grammar - 08
TMInstaller
2023. 1. 8. 04:13
728x90
Previous Series
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
728x90