TypeScript
수업

소개

간단한 클래스

class Car {
    public position: number = 0;
    private speed: number = 42;
    
    move() {
        this.position += this.speed;
    }
}    

이 예제에서는 간단한 클래스 Car 선언합니다. 이 수업에는 사유 재산 speed , 공공 재산 position 및 공개 방법 move 이라는 세 가지 구성원이 있습니다. 각 구성원은 기본적으로 공개됩니다. 그것이 우리가 public 키워드를 사용하지 않더라도 move() 가 public 인 이유입니다.

var car = new Car();        // create an instance of Car
car.move();                 // call a method
console.log(car.position);  // access a public property

기본 상속

class Car {
    public position: number = 0;
    protected speed: number = 42;
    
    move() {
        this.position += this.speed;
    }
}  

class SelfDrivingCar extends Car {

    move() {
        // start moving around :-)
        super.move();
        super.move();
    }
}

이 예제는 extends 키워드를 사용하여 Car 클래스의 매우 간단한 하위 클래스를 작성하는 방법을 보여줍니다. SelfDrivingCar 클래스는 move() 메서드를 재정의하고 super 사용하여 기본 클래스 구현을 사용합니다.

생성자

이 예제에서는 constructor 를 사용하여 기본 클래스에서 공용 속성 position 및 보호 된 속성 speed 를 선언합니다. 이러한 속성을 매개 변수 속성 이라고 합니다 . 그것들은 한 곳에서 생성자 매개 변수와 멤버를 선언 할 수있게 해줍니다.

TypeScript의 가장 좋은 기능 중 하나는 관련 속성에 생성자 매개 변수를 자동으로 할당하는 것입니다.

class Car {
    public position: number;        
    protected speed: number;

    constructor(position: number, speed: number) {
        this.position = position;
        this.speed = speed;
    }
    
    move() {
        this.position += this.speed;
    }        
}

이 코드는 모두 하나의 생성자에서 다시 시작할 수 있습니다.

class Car {
    constructor(public position: number, protected speed: number) {}
    
    move() {
        this.position += this.speed;
    }        
}

그리고 두 가지 모두 TypeScript (디자인 타임 및 컴파일 타임)에서 동일한 결과로 JavaScript로 변환되지만 코드는 훨씬 적습니다.

var Car = (function () {
    function Car(position, speed) {
        this.position = position;
        this.speed = speed;
    }
    Car.prototype.move = function () {
        this.position += this.speed;
    };
    return Car;
}());

파생 클래스의 생성자는 기본 클래스 생성자를 super() 로 호출해야합니다.

class SelfDrivingCar extends Car {
    constructor(startAutoPilot: boolean) {
        super(0, 42);
        if (startAutoPilot) {
            this.move();
        }
    }
}

let car = new SelfDrivingCar(true);
console.log(car.position);  // access the public property position

액세서

이 예제에서는 "Simple class"예제를 수정하여 speed 속성에 대한 액세스를 허용합니다. Typescript 접근자는 getter 또는 setter에 코드를 추가 할 수있게 해줍니다.

class Car {
    public position: number = 0;
    private _speed: number = 42;
    private _MAX_SPEED = 100
    
    move() {
        this.position += this._speed;
    }
    
    get speed(): number {
        return this._speed;
    }

    set speed(value: number) {
        this._speed = Math.min(value, this._MAX_SPEED);
    }
}

let car = new Car();
car.speed = 120;
console.log(car.speed);  // 100

초등 수업

abstract class Machine {
    constructor(public manufacturer: string) {
    }

    // An abstract class can define methods of it's own, or...
    summary(): string {
        return `${this.manufacturer} makes this machine.`;
    }
    
    // Require inheriting classes to implement methods
    abstract moreInfo(): string;
}

class Car extends Machine {
    constructor(manufacturer: string, public position: number, protected speed: number) {
        super(manufacturer);
    }
    
    move() {
        this.position += this.speed;
    }
    
    moreInfo() {
        return `This is a car located at ${this.position} and going ${this.speed}mph!`;
    }
}

let myCar = new Car("Konda", 10, 70);
myCar.move(); // position is now 80
console.log(myCar.summary()); // prints "Konda makes this machine."
console.log(myCar.moreInfo()); // prints "This is a car located at 80 and going 70mph!"

추상 클래스는 다른 클래스를 확장 할 수있는 기본 클래스입니다. 인스턴스화 할 수 없습니다 (즉, new Machine("Konda") 수행 할 수 없습니다 ).

Typescript의 추상 클래스의 두 가지 주요 특징은 다음과 같습니다.

1. 그들은 그들 자신의 방법을 구현할 수 있습니다.
2. 상속 클래스 가 구현 해야하는 메소드를 정의 할 수 있습니다.

이러한 이유로 추상 클래스는 개념적으로 인터페이스와 클래스 의 조합 으로 간주 될 수 있습니다.

Monkey는 함수를 기존 클래스로 패치합니다.

때로는 새로운 함수로 클래스를 확장하는 것이 유용합니다. 예를 들어, 문자열을 낙타의 경우 문자열로 변환해야한다고 가정 해 봅시다. 따라서 우리는 toCamelCase 에게 string 을 반환하는 toCamelCase 라는 함수를 String 포함해야한다고 말할 필요가 있습니다.

interface String {
    toCamelCase(): string;
}

이제이 함수를 String 구현으로 패치 할 수 있습니다.

String.prototype.toCamelCase = function() : string {
    return this.replace(/[^a-z ]/ig, '')
        .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match: any, index: number) => {
            return +match === 0 ? "" : match[index === 0 ? 'toLowerCase' : 'toUpperCase']();
        });
}

String 의이 확장이로드되면 다음과 같이 사용할 수 있습니다.

"This is an example".toCamelCase();    // => "thisIsAnExample"

과민 반응

SomeClass 클래스가 주어지면 TypeScript가 JavaScript로 변환되는 방식을 살펴 보겠습니다.

TypeScript 소스

class SomeClass {

    public static SomeStaticValue: string = "hello";
    public someMemberValue: number = 15;
    private somePrivateValue: boolean = false;

    constructor () {
        SomeClass.SomeStaticValue = SomeClass.getGoodbye();
        this.someMemberValue = this.getFortyTwo();
        this.somePrivateValue = this.getTrue();
    }

    public static getGoodbye(): string {
        return "goodbye!";
    }

    public getFortyTwo(): number {
        return 42;
    }

    private getTrue(): boolean {
        return true;
    }

}

자바 스크립트 소스

TypeScript v2.2.2 사용하여 추출한 결과는 다음과 같습니다.

var SomeClass = (function () {
    function SomeClass() {
        this.someMemberValue = 15;
        this.somePrivateValue = false;
        SomeClass.SomeStaticValue = SomeClass.getGoodbye();
        this.someMemberValue = this.getFortyTwo();
        this.somePrivateValue = this.getTrue();
    }
    SomeClass.getGoodbye = function () {
        return "goodbye!";
    };
    SomeClass.prototype.getFortyTwo = function () {
        return 42;
    };
    SomeClass.prototype.getTrue = function () {
        return true;
    };
    return SomeClass;
}());
SomeClass.SomeStaticValue = "hello";

관찰

• 클래스 프로토 타입의 수정은 IIFE 내부에 래핑됩니다.
• 멤버 변수는 메인 클래스 function 내에서 정의 function .
• 정적 속성은 클래스 개체에 직접 추가되지만 인스턴스 속성은 프로토 타입에 추가됩니다.