클래스

Last updated 3 years ago

Was this helpful?

클래스

자바스크립트의 클래스를 첫번째로 사용하는 게 중요한 이유는 다음과 같습니다.

개발자가 자신의 버전으로 올라오는 모든 프레임워크 대신 클레스를 사용할 수 있는 일관된 방법을 제공합니다.
객체 지향 개발자는 이미 클래스를 이해하고 있습니다.

마지막으로 자바스크립트 개발자들은 포인트에 대해서 배울 수 있습니다.

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에서 다음과 같은 자바스크립트를 생성합니다.

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
})()

이것은 일류 언어 구조로서 현재 상당히 관용적인 전통적인 자바스크립트 패턴이다.

상속

타입스크립트 클래스는 다른 언어들과 비슷합니다. 아래와 같이 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)
    }
}

클래스에 생성자가 있는 경우 생성자에서 부모 생성자를 호출해야 합니다.(타입스크립트는 이를 사용자에게 알려줍니다.) 이렇게 하면 설정해야 하는 항목이 설정됩니다. super를 호출하면 수행할 작업을 추가할 수 있습니다.(여기서 우리는 z요소를 추가합니다.)

부모 요소의 함수를 쉽게 오버라이드 하고 (여기서는 add에 해당함) 클래스내에서 여전히 super의 기능을 사용할 수 있습니다. (super.문법 사용)

정적인

타입스크립트 클래스는 클래스의 모든 인스턴스에서 지원되는 static속성을 지원합니다.

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

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

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

접근 수식어

타입스크립트는 아래와 같이 class 요소에 접근 가능성을 결정하는 public,private 그리고 protected와 같은 접근 수식어를 지원합니다.

accessible on

public

protected

private

class

yes

class children

yes

class instances

yes

자바스크립트 접근 수식어를 명시하지 않은 경우에는 암묵적으로 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 수식어는 기본적으로 해당 기능이 직접적으로 실행될 수 없음을 뜻하고 자식 클래스가 그 기능을 제공해야 함을 뜻합니다.

abstract 클래스 는 직접 인스턴스를 만들 수 없습니다. 대신 이 abstract class 를 상속하는 다른 class 를 만들어야 합니다.

abstract class FooCommand {}

class BarCommand extends FooCommand {}

const fooCommand: FooCommand = new FooCommand(); // abstract 클래스 인스턴스는 생성할 수 없음.

const barCommand = new BarCommand(); // abstract 클래스를 상속한 클래스의 인스턴스는 생성 가능.

abstract 구성 요소 는 직접 액세스할 수 없고 자식 클래스가 그 기능을 제공해야 함니다.

abstract class FooCommand {
  abstract execute(): string;
}

class BarErrorCommand  extends FooCommand {} // 'BarErrorCommand'는 추상(abstract) 멤버인 'execute'를 제공해야 함.

class BarCommand extends FooCommand {
  execute() {
    return `Command Bar executed`;
  }
}

const barCommand = new BarCommand();

barCommand.execute(); // Command Bar executed 출력

Constructor is optional

클래스는 constructor를 항상 포함하지 않아도 됩니다. 예제를 참조하십시요

class Foo {}
var foo = new Foo()

constructor 사용방법

아래처럼 클래스 내 멤버를 초기화하십시요

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

타입스크립트는 구성원에 엑세스 수식어를 접두어로 사용하는 일반적인 패턴으로 클래스에 자동으로 선언되어 생성자에서 복사됩니다. 따라서 이전에 작성한 예를 (public x:number)와 같이 작성할 수 있습니다.

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

Property 초기화

이것은 타입스크립트에서 지원되는 멋진 기능입니다. (실제로 ES7에서 지원됨) 클래스 생성자 밖에서 요소를 초기화 할 수 있으며 기본값을 제공하는데 유용합니다. (members = [])

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

Previous미래의 자바스크립트 Next즉시실행함수