[Typescirpt] Class 알아보기

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

수업

JavaScript에서 클래스를 첫 번째 강의 주제로 다루는 이유는 다음과 같은 중요한 이유가 있습니다.

1. 클래스는 유용한 구조적 추상화를 제공합니다.
2. 계속 자신만의 방식으로 새로운 버전을 만들어내는 framework(emberjs, reactjs etc) 대신 class를 사용하여 개발자에게 일관적인 방법을 제공합니다.
3. 객체 지향 개발자는 이미 클래스를 이해합니다.

마지막으로 이제 JavaScript 개발자가 Class를 가질 수 있습니다 . 여기에 Point라는 기본 클래스가 있습니다.

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

이 클래스는 ES5에서 다음 JavaScript를 생성합니다.

var Point = (function () {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    Point.prototype.add = function (point) {
        return new Point(this.x + point.x, this.y + point.y);
    };
    return Point;
})();

이것은 first class language 구조로서 관용적인 자바 스크립트 클래스 패턴입니다.

상속

TypeScript의 클래스 (다른 언어와 마찬가지로)는 아래와 같이 extends 키워드를 사용하여 단일상속을 지원합니다.

class Point3D extends Point {
    z: number;
    constructor(x: number, y: number, z: number) {
        super(x, y);
        this.z = z;
    }
    add(point: Point3D) {
        var point2D = super.add(point);
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
    }
}

클래스에 생성자가 있는 경우에는 생성자에서 부모 생성자를 호출 해야합니다. (TypeScript는 이를 꼭 수행해야한다고 사용자에게 알려줍니다). 이렇게하면 this가 설정됩니다. super를 호출하면 생성자에서 수행 할 추가 작업을 추가 할 수 있습니다 (위 코드에선 다른 멤버 z를 추가).

부모 멤버 함수를 쉽게 재정의 (여기서는 add함수 재정의)하고 여전히 super. 구문을 사용해서 부모 클래스의 기능을 사용할 수 있습니다.

Static

TypeScript 클래스 static 프로퍼티는 클래스의 모든 인스턴스에서 공유하는 속성을 지원 합니다. static 프로퍼티의 위치는 아래와 같이 클래스 내부에 위치하고, 이것이 바로 TypeScript의 기능입니다 :

class Something {
    static instances = 0;
    constructor() {
        Something.instances++;
    }
}

var s1 = new Something();
var s2 = new Something();
console.log(Something.instances); // 2

정적 멤버 뿐만 아니라 정적 함수도 가질 수 있습니다.

접근제한자

Type 스크립트는 접근제한를 지원 public, private및 protected의 접근 제한자를 제공합니다.

접근 할수 있는 것	public	protected	private
클래스 (Class)	예	예	예
자식 인스턴스 (Class Children)	예	예	아니오
클래스 인스턴스 (Class Instance)	예	아니오	아니오

접근제한자가 지정되지 않은 경우 JavaScript public과 암묵적으로 일치하는 의미를 지닙니다.

각각의 예가 아래에 나와 있습니다.

class FooBase {
    public x: number;
    private y: number;
    protected z: number;
}

// EFFECT ON INSTANCES
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected

// EFFECT ON CHILD CLASSES
class FooChild extends FooBase {
    constructor() {
      super();
        this.x; // okay
        this.y; // ERROR: private
        this.z; // okay
    }
}

이러한 접근제한자는 멤버 프로퍼티와 멤버 함수 모두에서 작동합니다.

추상화

abstract를 위의 접근제한자와 비슷하다고 생각할 수 있습니다. 앞서 언급 한 접근제한자와 반대로 클래스의 다른 멤버와 비교할 수 있기 때문에 별도로 다루겠습니다. abstract를 갖는 것은 주로 이러한 기능을 직접 호출 할 수 없으며 하위 클래스가 기능을 제공해야 한다는 것을 의미 합니다.

• abstract 클래스를 직접 인스턴스화 할 수 없습니다. 대신 사용자 class는를 상속하여 구현하여 합니다. 
• abstract 멤버들은 직접 액세스 할 수 없으며 하위 클래스가 기능을 제공해야합니다.

생성자는 선택 사항입니다.

클래스에는 생성자가 필요하지 않습니다. 

class Foo {}
var foo = new Foo();

생성자를 사용하여 정의

클래스에 멤버를 아래와 같이 초기화합니다.

class Foo {
    x: number;
    constructor(x:number) {
        this.x = x;
    }
}

아래 예시는 TypeScript가 접근제한자를 접두사로 붙일 수있는 일반적인 패턴입니다. 클래스에 자동으로 선언되고 생성자에서 복사됩니다. 따라서 이전 예는 (주의 public x:number) 으로 다시 쓰여질 수 있습니다 .

class Foo {
    constructor(public x:number) {
    }
}

Property initializer

이것은 TypeScript에서 지원되는 멋진 기능입니다 (실제로 ES7에서 제공됨). 클래스 생성자 밖에서 클래스의 멤버를 초기화 할 수 있습니다. (members = [];)

class Foo {
    members = [];  // Initialize directly
    add(x) {
        this.members.push(x);
    }
}