[typescript]class

*class의 역할과 interface의 역할

1.class

・변수에 class 형태의 타입을 선언할 수 있다.

・new로 인스턴스를 생성할 수 있다.

2.interface

・변수에 interface 형태의 타입을 선언할 수 있다.

・new로 인스턴스 생성이 불가능하다.

・인터페이스를 임플러먼트한 대상은 해당 인터페이스에 있는 프로퍼티 및 메소드를 반드시 전부 가지거나 구현해야 한다.

※class의 extends,implements의 관계는 다른 포스트에서 다룬다.

*suepr의 예

-부모 클래스의 constructor을 불러 사용할 때 필요한 키워드(27행)

-자식 클래스에서 부모 클래스의 public한 메소드에 엑세스할때 필요한 키워드(32행)

class Rectangle {
    name: string = null;
    height: number = null;
    width: number = null;
 
    constructor(height, width) {
        this.name = 'Rectangle';
        this.height = height;
        this.width = width;
    }
 
    sayName() {
        console.log('Hi, I am a ', this.name + '.');
    }
 
    getArea() {
        return this.height * this.width;
    }
 
    setArea(value) {
        this.height = this.width = Math.sqrt(value);
    }
}
 
class Square extends Rectangle {
    length: number = null;
 
    constructor(length) {
        super(length, length);
        this.name = 'Square';
    }

    copiedFunc = super.getArea; // same as this.getArea;
}
 
const rectangle:Rectangle= new Rectangle(3, 4);
console.log(rectangle.getArea());
 
const square: Square = new Square(8);
console.log(square.name);  //Square
console.log(square.getArea());  //64
console.log(square.copiedFunc());  //64

*constructor에서 property바로 할당하기

class Person{
    protected _name: string = null;
    private _age: number = null;
    constructor(protected name:string,age:number) {
        this._name= name;
        this._age= age;
    }
    hello(): void{
        console.log(this._name);
    }
}
const person:Person = new Person('mark', 23);
person.hello();
 
//==============>
class Person{
    constructor(protected _name:string,private _age:number) {}
 
    hello(): void{
        console.log(this._name);
    }
}
 
const person: Person = new Person('mark', 23);
person.hello();

class Person_getterSetter{
    private _name: string = null;
    private _age: number = null;
    private _salary: number = null;
 
    constructor(name:string,age:number) {
        this._name = name;
        this._age = age;
    }
 
    get salary():number {
        return this._salary;
    }
 
    set salary(money:number) {
        this._salary = money;
    }
}
 
class Person_noGetterSetter{
    private _name: string = null;
    private _age: number = null;
    private _salary: number = null;
 
    constructor(name:string,age:number) {
        this._name = name;
        this._age = age;
    }
 
    getSalary():number {
        return this._salary;
    }
 
    setSalary(money:number) {
        this._salary = money;
    }
}
 
const p1: Person_getterSetter = new Person_getterSetter('mark', 29);
p1.salary = 10000;
console.log(p1.salary);
 
const p2: Person_noGetterSetter = new Person_noGetterSetter('jake', 32);
p2.setSalary(20000);
console.log(p2.getSalary());

싱글톤 패턴

class Person{
    private static instance: Person = null
    private testProperty: string;
 
    private constructor() {
    }
 
    public static getInstance(): Person{
        if (Person.instance===null) {
            Person.instance = new Person();
        }
 
        return Person.instance;
    }
 
    hello(): void{
        console.log('hello world');
    }
 
        setTestProperty(param: string): void{
        this.testProperty = param;
    }
 
    getTestProperty(): string{
        return this.testProperty;
    }
}
 
const p2: Person = Person.getInstance();
p2.setTestProperty('instance1');
console.log(p2.getTestProperty()); // instance1
 
const p3: Person = Person.getInstance()
console.log(p3.getTestProperty()); // instance1

class의 형변환 : <targetType>

 
class Rectangle {
    name: string = null;
    height: number = null;
    width: number = null;
 
    constructor(height, width) {
        this.name = 'Rectangle';
        this.height = height;
        this.width = width;
    }
 
    sayName() {
        console.log('Hi, I am a ', this.name + '.');
    }
 
    getArea() {
        return this.height * this.width;
    }
 
    setArea(value) {
        this.height = this.width = Math.sqrt(value);
    }
}
 
class Square extends Rectangle {
    feature = 'length of all line is same';
    length: number = null;
 
    constructor(length) {
        super(length, length);
        this.name = 'Square';
    }
    copiedFunc = super.getArea; // same as this.getArea;
}
function castingFn(param: Rectangle) {
    const castedProperty = <Square>param;  // 형변환
    console.log(castedProperty.feature);
}
 
const square: Square = new Square(8);
castingFn(square);
 
const square2: Rectangle = new Square(8);
square2.feature; // 컴파일 실패 : Square의 프로퍼티를 Rectangle로 형을 제한한 후 사용하려하기 때문 

interface ICar{
    honk(): void;
    accelerate(speed: number): void;
    getSpeed(): number;
}
 
class Car implements ICar{
    private _name:string = null;
    private _speed:number = 0;
 
    constructor(name:string) {
        this._name = name;
    }
 
    public honk():void {
        console.log('부우우웅');
    }
 
    public accelerate(speed: number):void{
        this._speed = this._speed + speed;
    }
 
    //getter,setter
    public getSpeed(): number{
        return this._speed;
    }
 
}
 
const car: Car = new Car('benz');
car.honk();
console.log(car.getSpeed());
car.accelerate(10);
console.log(car.getSpeed());

interface IBase{
    width: number;
    length: number;
}
 
class CBase{
    protected width: number =0;
    protected length: number=0;
}
 
class Rectangle_inter implements IBase{
    public width = null;
    public length = null;
 
    constructor(width,length) {
        this.width = width;
        this.length = length;
    }
 
    area(): number{
        return this.width * this.length;
    }
}
 
class Rectangle_class extends CBase{
    constructor(width,length) {
        super();
        this.width = width;
        this.length = length;
    }
 
    public area(): number{
        return this.width * this.length;
    }
}
 
const rectangle_inter: Rectangle_inter = new Rectangle_inter(8, 6);
console.log(rectangle_inter.area());
 
const rectangle_class: Rectangle_class = new Rectangle_class(8, 6);
console.log(rectangle_class.area());

class CPerson{
    _firstName: string;
}
 
class Person extends CPerson{
 
    get firstName(): string{
        return this._firstName;
    }
 
    set firstName(value: string){
        if (value.length > 3) {
            this._firstName = value;
        }
        else {
            this._firstName = 'name is under 3chars';
        }
    }
}
 
const person: Person = new Person();
person.firstName = 'ma';
console.log(person.firstName);
 
person.firstName = 'jenny';
console.log(person.firstName);