GaramX

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
typescript:class [2018/08/04 01:12] – [Readonly Property] 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 ====
 일반적인 객체지향언어의 Inheritance 개념 역시 TypeScript에도 사용할 수 있습니다. 다음의 코드를 보죠. 일반적인 객체지향언어의 Inheritance 개념 역시 TypeScript에도 사용할 수 있습니다. 다음의 코드를 보죠.
줄 170: 줄 179:
 <code javascript> <code javascript>
 class Book { class Book {
- 
     public readonly btitle: string;     public readonly btitle: string;
- 
     constructor(btitle: string) {     constructor(btitle: string) {
         this.btitle = btitle;         this.btitle = btitle;
     }     }
- 
 } }
- 
 let book:Book = new Book('젊은 베르테르의 슬픔'); let book:Book = new Book('젊은 베르테르의 슬픔');
- 
 book.btitle = '파우스트';   // 코드 에러</code> book.btitle = '파우스트';   // 코드 에러</code>
 +
 다음의 예제처럼 생성자의 parameter를 readonly로 선언하면 따로 class의 property로 선언할 필요가 없습니다. 다음의 예제처럼 생성자의 parameter를 readonly로 선언하면 따로 class의 property로 선언할 필요가 없습니다.
 <code javascript> <code javascript>
 class Book { class Book {
- 
     constructor(readonly btitle: string) {     constructor(readonly btitle: string) {
         this.btitle = btitle;         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 book:Book = new Book('젊은 베르테르의 슬픔');+let book1:Book = new Book('젊은 베르테르의 슬픔'); 
 +let book2:Book = new Book('파우스트');
  
-console.log(book.btitle); </code> +console.log(Book.count);</code> 
-==== Static Property ====+==== 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.1533345151.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구