TypeScript Class

Classes

The reason why it's important to have classes in JavaScript as a first class item is that:

자바스크립트에서 일급 객체로서 클래스들을 사용하는게 왜 중요한지에 대한 이유가 나와있다.

1. Classes offer a useful structural abstraction
2. Provides a consistent way for developers to use classes instead of every framework (emberjs,reactjs etc) coming up with their own version.
3. Object Oriented Developers already understand classes.

1. 클래스들은 유용한 구조적인 추상화를 제공한다.
2. 모든 자바스크립트 프레임워크 대신에 클래스를 사용하는것이 개발자에게 일관적인 방법을 제공한다.
3. 객체지향적인 개발자들은 이미 클래스에 대해 이해하고 있다.

Finally JavaScript developers can have class. Here we have a basic class called Point:

마침내 자바스크립트 개발자들은 클래스를 사용할 수 있게 되었다. 아래는 기본적인 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}

This class generates the following JavaScript on ES5 emit:

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;

})();

This is a fairly idiomatic traditional JavaScript class pattern now as a first class language construct.

이것은 일급 클래스 언어 구조로써 상당히 편리한 전통적인 자바스크립트 클래스 패턴이다.

Inheritance

Classes in TypeScript (like other languages) support single inheritance using the extends keyword as shown below:

타입스크립트에서의 클래스들은 아래에서 보이는 것처럼 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);

    }

}

If you have a constructor in your class then you must call the parent constructor from your constructor (TypeScript will point this out to you). This ensures that the stuff that it needs to set on this gets set. Followed by the call to super you can add any additional stuff you want to do in your constructor (here we add another member z).

만약 당신이 구현한 클래스에 생성자가 있다면 반드시 생성자 안에서 부모의 생성자를 먼저 불러야 한다 (타입스크립트가 알려줄 것이다). 이것은 this 에 설정되어야 할 것들이 설정되는 것을 보장한다. 그 다음 super() 를 통해 생성자에서 하고싶은 어떠한 작업도 추가할 수 있다. (z 같은거)

Note that you override parent member functions easily (here we override add) and still use the functionality of the super class in your members (using super. syntax).

너는 부모의 멤버함수도 쉽게 오버라이드 할 수 있고, super class 의 멤버들의 기능도 여전히 사용가능하다.

Statics

TypeScript classes support static properties that are shared by all instances of the class. A natural place to put (and access) them is on the class itself and that is what TypeScript does:

타입스크립트 클래스는 모든 인스턴스들에 의해 공유되는 static 프로퍼티도 제공한다. 클래스의 전역공간에 static 프로퍼티를 놓습니다. 

class Something {

    static instances = 0;

    constructor() {

        Something.instances++;

    }

}

var s1 = new Something();

var s2 = new Something();

console.log(Something.instances); // 2

You can have static members as well as static functions.

너는 스테틱 멤버뿐만 아니라 스테틱 함수도 가질 수 있다.

Access Modifiers

TypeScript supports access modifiers public,private and protected which determine the accessibility of a class member as shown below:

타입스크립트는 pubilc, private, protected 같은 접근 지정자도 제공합니다.아래는 클래스 멤버에 접근가능한지를 결정하는 것입니다.

accessible on	public	protected	private
class	yes	yes	yes
class children	yes	yes	no
class instances	yes	no	no

If an access modifier is not specified it is implicitly public as that matches the convenient nature of JavaScript 🌹.

접근지정자가 정해지지 않았다면 그것은 암시적으로 자바스크립트의 전역에 있는 public 으로 간주합니다.

Note that at runtime (in the generated JS) these have no significance but will give you compile time errors if you use them incorrectly. An example of each is shown below:

런타임에는 이러한 significance 가 없지만 컴파일 시간에는 접근 지정자를 잘 못 사용하면 에러를 줄 것이다.

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

    }

}

As always these modifiers work for both member properties and member functions.

이런 지정자들은 항상 멤버변수와 멤버함수에 적용됩니다.

Abstract

abstract can be thought of as an access modifier. We present it separately because opposed to the previously mentioned modifiers it can be on a class as well as any member of the class. Having an abstract modifier primarily means that such functionality cannot be directly invoked and a child class must provide the functionality.

추상화도 접근 지정자처럼 생각될 수 있습니다. 우리는 이전에 언급한 접근지정자와 반대로 클래스의 모든 멤버에서 뿐만 아니라 클래스에서도 있을 수 있기 때문에 이것을 분리되게 생각합니다.

• abstract classes cannot be directly instantiated. Instead the user must create some class that inherits from the abstract class.
• abstract members cannot be directly accessed and a child class must provide the functionality.

1. 추상화 클래스는 바로 정의될 수 없다. 유저가 추상화 클래스에서 상속한 클래스들을 생성해야만 한다.
2. 추상화 멤버들은 직접 접근할 수가 없고 자식 클래스에서만 기능을 제공한다.

Constructor is optional

The class does not need to have a constructor. e.g. the following is perfectly fine.

클래스들은 생성자를 꼭 가질 필요는 없다.

class Foo {}

var foo = new Foo();

Define using constructor

Having a member in a class and initializing it like below:

멤버를 가지고 있다면 아래처럼 초기화하자.

class Foo {

    x: number;

    constructor(x:number) {

        this.x = x;

    }

}

is such a common pattern that TypeScript provides a shorthand where you can prefix the member with an access modifier and it is automatically declared on the class and copied from the constructor. So the previous example can be re-written as (notice public x:number):

아래는 접근지정자로 멤버를 접근하고 자동적으로 클래스에서 정의되고 생성자에서 복사되는 타입스크립트에서 제공하는 짧은 코드 패턴이다. 

class Foo {

    constructor(public x:number) {

    }

}

Property initializer

This is a feature supported by TypeScript (from ES7 actually). You can initialize any member of the class outside the class constructor, useful to provide default (notice members = [])

이것은 타입스크립트에서 제공되는 좋은 기능이다. 너는 클래스의 생성자 밖에 있는 어떠한 멤버변수도 초기화할 수 있고, 기본초기화를 유용하게 사용할 수 있다.

class Foo {

    members = [];  // Initialize directly

    add(x) {

        this.members.push(x);

    }

}

글 출처 : https://basarat.gitbooks.io/typescript/content/docs/classes.html