GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » class
추적: • clone • class • html5 • interpolation
typescript:class

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
typescript:class [2018/08/04 00:59] – 만듦 taekgutypescript:class [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 40: 줄 40:
 book.printInfo();</code> book.printInfo();</code>
 위의 코드는 Java에서 우리가 익히 보아왔던 class의 형태입니다. 생성자를 표현하는 부분이 좀 생소하지만 쉽게 이해할 수 있을 듯 합니다. 위의 코드는 Java에서 우리가 익히 보아왔던 class의 형태입니다. 생성자를 표현하는 부분이 좀 생소하지만 쉽게 이해할 수 있을 듯 합니다.
 +==== constructor ====
 +Typescript의 Class에서 constructor는 특별하게 보아야 한다. constructor의 파라메터에서 class의 property로 선언된다.(물론 new연산자의 파라메터를 받는다.)
 +<code javascript>
 +class Greeter {
 +    constructor(public greeting: string, private myService: HelloServe) {}
 +    greet() {
 +        return "Hello, " + this.greeting;
 +    }
 +}
 +</code>
 +==== Inheritance ====
 +일반적인 객체지향언어의 Inheritance 개념 역시 TypeScript에도 사용할 수 있습니다. 다음의 코드를 보죠.
 +<code javascript>
 +class Book {
 +
 +    btitle: string;
 +    bauthor: string;
 +
 +    // 상위 클래스의 생성자
 +    constructor(btitle:string, bauthor:string) {
 +        this.btitle = btitle;
 +        this.bauthor = bauthor;
 +    }
 +
 +    // 상위 클래스의 method
 +    // 입력 인자가 있으면 사용하고 없으면 default 사용
 +    printInfo(input:string = 'Initial'): void {
 +        console.log(input);
 +        console.log(`제목: ${this.btitle}, 저자: ${this.bauthor}`);
 +    }
 +}
 +
 +// class의 상속
 +class EBook extends Book {
 +
 +    btype: string;
 +
 +    constructor(btitle:string, bauthor:string, btype:string) {
 +        // 상위 class 생성자 호출
 +        super(btitle, bauthor);
 +        this.btype = btype;
 +    }
 +
 +    // method overriding
 +    printInfo(): void {
 +        // 상위 class의 method 호출
 +        super.printInfo();
 +        console.log(`제목: ${this.btitle}, 
 +                     저자: ${this.bauthor},
 +                     타입: ${this.btype}`);
 +    }
 +}
 +
 +// IS-A relationship에 의한 상위 class type 사용
 +let book:Book = new EBook('젊은 베르테르의 슬픔','괴테',
 +    'PDF');
 +
 +// dynamic binding에 의한 overriding method 호출.
 +book.printInfo();</code>
 +기존 class를 확장하여 새로운 class를 정의하는 방법입니다. IS-A Relationship 역시 성립합니다. 그로 인한 상위 타입으로 객체를 사용할 수 있습니다. 또한 위의 예에서 처럼 method overriding의 개념 역시 존재하고 dynamic binding 개념 역시 존재합니다. 물론 TypeScript에서는 공식적으로 저 용어를 사용하지는 않습니다. 다만 우리가 Java언어에서 알고 있던 객체지향 개념이 그대로 TypeScript에도 일부 적용된다고 보시면 됩니다.
 +
 +==== Access Modifier ====
 +
 +TypeScript는 3가지 종류의 접근제어 연산자를 제공합니다. 우리에게 익숙한 public, protected, private 키워드로 제공되며 default값은 public입니다. 즉, Access Modifier를 명시하지 않으면 모두 public으로 간주됩니다.
 +
 +  * public : 접근제한이 없습니다. class외부에서 자유롭게 접근이 가능합니다.
 +  * protected : class 외부에서 접근할 수 없습니다. 단, 상속받은 하위 class에서는 접근이 가능합니다.
 +  * privatre : class 외부에서 접근할 수 없습니다. 상속받은 하위 class에서도 접근이 불가능합니다.
 +<code javascript>
 +class Book {
 +
 +    protected btitle: string;
 +
 +    public constructor(btitle:string, private _bauthor:string) {
 +        this.btitle = btitle;
 +    }
 +
 +    public printInfo(): void {
 +        console.log(`제목: ${this.btitle}, 저자: ${this._bauthor}`);
 +    }
 +
 +    // private property인 _bauthor의 getter
 +    get bauthor(): string {
 +        return this._bauthor;
 +    }
 +
 +    // private property인 _bauthor의 setter
 +    set bauthor(value: string) {
 +        this._bauthor = value;
 +    }
 +}
 +
 +class EBook extends Book {
 +
 +    private btype: string;
 +
 +    public constructor(btitle:string, bauthor:string, btype:string) {
 +        super(btitle, bauthor);
 +        this.btype = btype;
 +    }
 +
 +    public printInfo(): void {
 +        console.log(`제목: ${this.btitle}, 
 +                     저자: ${this.bauthor},
 +                     타입: ${this.btype}`);
 +    }
 +}
 +
 +let book:Book = new EBook('젊은 베르테르의 슬픔','괴테',
 +    'PDF');
 +
 +book.printInfo();</code>
 +위의 예제에서는 다음의 코드를 주의해서 보아야 합니다. 생성자의 인자로 private _bauthor:string라고 선언된 부분이 보입니다.
 +<code javascript>
 +    protected btitle: string;
 +
 +    public constructor(btitle:string, private _bauthor:string) {
 +        this.btitle = btitle;
 +    }</code>
 +생성자에 인자를 명시할 때 access modifier를 같이 명시하면 위의 예처럼 명시적으로 해당 property가 선언되어 사용할 수 있게 됩니다.
 +
 +일반적으로 private property의 이름은 앞에 _를 관용적으로 써주게 됩니다. 이렇게 사용하는 이유는 관용적 coding convention 때문에 그렇습니다. ECMAScript에서는 개발자들이 private의 의미로 사용되는 property에 일반적으로 _를 붙여서 사용했었습니다.
 +
 +또 다른 이유는 setter와 getter의 이름때문에 그렇습니다. 다음의 코드에서 보듯이 TypeScript에서 getter와 setter의 표현은 우리가 알고 있는 다른 언어의 getter, setter와 다릅니다. 그리고 이렇게 선언된 getter와 setter가 어떻게 사용되는지도 유의해서 보시기 바랍니다.
 +<code javascript>
 +    // private property인 _bauthor의 getter
 +    get bauthor(): string {
 +        return this._bauthor;
 +    }
 +
 +    // private property인 _bauthor의 setter
 +    set bauthor(value: string) {
 +        this._bauthor = value;
 +    }</code>
 +==== Readonly Property ====
 +
 +class의 property를 readonly로 지정할 수 있습니다. readonly로 지정되면 property가 선언될 때 혹은 생성자안에서 반드시 초기화를 진행해야 합니다. 다음의 예제를 참고하시면 됩니다.
 +<code javascript>
 +class Book {
 +    public readonly btitle: string;
 +    constructor(btitle: string) {
 +        this.btitle = btitle;
 +    }
 +}
 +let book:Book = new Book('젊은 베르테르의 슬픔');
 +book.btitle = '파우스트';   // 코드 에러</code>
 +
 +다음의 예제처럼 생성자의 parameter를 readonly로 선언하면 따로 class의 property로 선언할 필요가 없습니다.
 +<code javascript>
 +class Book {
 +    constructor(readonly btitle: string) {
 +        this.btitle = btitle;
 +    }
 +}
 +let book:Book = new Book('젊은 베르테르의 슬픔');
 +console.log(book.btitle);
 +</code>
 +==== Static Property ====
 +static 키워드 역시 사용할 수 있습니다. ECMAScript 2015에서는 static을 method에만 적용할 수 있었지만 TypeScript는 property에도 적용할 수 있습니다. static property는 class의 이름으로 직접 access를 할 수 있습니다.
 +<code javascript>
 +class Book {
 +
 +    public btitle:string;
 +    static count: number;
 +
 +    constructor(btitle: string) {
 +        this.btitle = btitle;
 +        Book.count++;
 +    }
 +
 +}
 +
 +let book1:Book = new Book('젊은 베르테르의 슬픔');
 +let book2:Book = new Book('파우스트');
 +
 +console.log(Book.count);</code>
 +==== Abstract Class ====
 +abstract class는 하나이상의 abstract method를 가지고 있는 class를 의미합니다. method의 선언만을 가지고 있기 때문에 직접적인 객체생성을 할 수 없고 상속을 이용해 하위 클래스에서 abstract method를 overriding해서 사용하게 됩니다.
 +<code javascript>
 +abstract class Book {
 +
 +    public btitle:string;
 +
 +    constructor(btitle: string) {
 +        this.btitle = btitle;
 +    }
 +
 +    abstract printInfo(): void;
 +}
 +
 +class EBook extends Book {
 +
 +    printInfo(): void {
 +        console.log(this.btitle);
 +    }
 +}
 +
 +let book:Book = new EBook('젊은 베르테르의 슬픔');
 +book.printInfo();</code>
 +==== interface의 의미로 class사용 ====
 +이 부분은 기존의 다른 언어와 다릅니다. class를 확장해서 interface를 정의할 수 있습니다. 다음의 코드를 참조하세요
 +<code javascript>
 +class Book {
 +
 +    btitle: string;
 +
 +}
 +
 +interface EBook extends Book {
 +
 +    bauthor: string;
 +}
 +
 +let book:EBook = {
 +    btitle: '파우스트',
 +    bauthor: '괴테'
 +};
 +</code>
typescript/class.1533344378.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구