본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


TypeScript

Typescript 클래스

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 26.

 

 

클래스는 함수, 자료형을 모아두는 일종의 집합체 이다. 클래스를 통해서 복잡한 기능을 구분하고 정리가 가능하다.

클래스를 통해 기능을 분리하여 구현하는 것이 타입스크립트에서의 가장 중요한 핵심이라 생각 한다.

class Abcd{
    private hide : string = 'can not access';  //접근제어자 private는 클래스 내부에서만 사용 가능 하다.
    public show : string;

    constructor(arg : string){  //생성자
        this.show = arg;
    }
    print() : void{
       console.log(`hide value : ${this.hide},  show value : ${this.show}`);
    }
}

const cls = new Abcd('init');
console.log(cls.show);
//console.log(cls.hide);  <-- 컴파일 오류
cls.print();

클래스에서는 private, public, protected 접근제어자를 통해 변수 및 함수에 대해서 접근을 관리 한다.

기본적으로 선언을 하지 않으면 public으로 설정이 되어 자유로이 해당 클래스 내부의 자료에 접근 할 수 있다.

class Abcd2{
    static ABCDEF : string = 'Hello';  //static선언
    private hide : string = 'can not access';
    public show : string;

    constructor(arg : string){
        this.show = arg;
    }
    print() : void{
       console.log(`hide value : ${this.hide},  show value : ${this.show}`);
    }

    combine(arg:number) : number{
       return arg * 2;
    }

    anoy = (arg:number) :number =>{  //람다식
        return arg * 2;
    }
}

const cls2 = new Abcd2('init2');

console.log(cls2.show);
cls2.print();

console.log(cls2.combine(10));
console.log(cls2.anoy(100));
//console.log(cls2.ABCDEF);  <--- 컴파일 오류
console.log('static value -> ',Abcd2.ABCDEF);

static으로 변수를 선언하면 "클래스.변수명" 으로 접근해야 된다. new로 생성된 객체에서 접근을 하는 경우 컴파일 오류가 나다.

앞서 살펴본 유니온, 람다, 익명함수 등 모든 기능을 쓸 수 있다.

마찬가지로 클래스는 인터페이스를 상속받아서도 사용 가능 하다.

interface Person { 
   head:string, 
   hand:string, 
   body:string,
   method: ()=>void,
   foot?:string  //옵셔널
} 

class Man implements Person{  //상속받은 자료를 모두 구현해야 한다. 옵셔널이 아니면..
    head : string ='head';  //상속받은 자료는 private 접근제어자를 가질 수 없다.
    hand : string ='hand';
    body : string ='body';
    method(): void {
        console.log('Ok');
    }
}

const tae = new Man();

console.log(tae.head);
console.log(tae.hand);
console.log(tae.body);
//console.log(tae.foot);   <--- 컴파일오류
tae.method();

인터페이스를 상속받은 경우에는 해당 속성을 전부 구현해야 한다. 물론 옵셔널 형태로 선언된 변수 또는 함수는 구현하지 않아도 된다.

클래스에서 클래스를 상속받는 경우에는 implements가 아니라 extends를 사용한다.

class Abcd{
    private hide : string = 'can not access';
    public show : string = 'hello';
}

class Abcd2 extends Abcd{
    static ABCDEF : string = 'Yoo';

    constructor(arg? : string){
        super();  //부모의 내용 주입.
	    if(arg != undefined && arg != null){
	        this.show = arg;  
	    }
    }

    print() : void{
       //console.log(`hide value : ${this.hide}`); <--- 컴파일오류
       console.log(`${Abcd2.ABCDEF}, value : ${this.show}`);
    }
}


var abc = new Abcd2();
abc.print();  //부모의 show 값을 볼 수 있다.

abc = new Abcd2('world');
abc.print();  //자식의 show 값이 오버로딩 됨을 볼 수 있다.

상속받은 클래스, 부모의 클래스의 private한 변수는 당연히 접근 할 수 없다. 또한 부모 및 자식의 변수, 함수명이 같으면 상속받아서 구현한 자식의 변수, 함수의 내용으로 오버라이딩된다.  

* 오타 지적 감사드립니다!

반응형

'TypeScript' 카테고리의 다른 글

Typescript 네임스페이스 그리고 Import  (2) 2019.04.26
Typescript 제네릭 그리고 any  (0) 2019.04.26
Typescript 인터페이스  (0) 2019.04.26
Typescript 유니언(Union)  (0) 2019.04.26
Typescript 배열  (0) 2019.04.26
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글