Перейти к содержанию

Классы

Причина, по которой важно иметь классы в JavaScript:

  1. Классы предлагают полезную структурную абстракцию
  2. Предоставляют разработчикам согласованный единый способ использования классов вместо разных версий, предлагаемых фреймворками (emberjs, reactjs).
  3. Разработчики с опытом ООП уже понимают классы

На текущий момент JavaScript разработчики могут использовать class. Далее реализация базового класса Point:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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;
})();

Это традиционная базовая модель класса в JavaScript.

Наследование

Классы в TypeScript (как и в других языках) поддерживают одиночное наследование с помощью ключевого слова extends:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
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 свойства, которые являются общими для всех экземпляров класса. Естественное место для их размещения (и доступа к ним) - это сам класс:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
class Something {
    static instances = 0;
    constructor() {
        Something.instances++;
    }
}

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

Вы можете использовать как static члены, так и static методы.

Модификаторы доступа

TypeScript поддерживает модификаторы доступа public,private и protected, которые определяют доступность членов класса:

доступ к public protected private
класс да да да
дочерний класс да да нет
экземпляр класса да нет нет

Если модификатор доступа не опеределен, то он неявно интерпретируется как public, поскольку это соответствует природе JavaScript 🌹.

Обратите внимание, что во время выполнения (в сгенерированном JS) это не имеет значения, но во время компиляции вы получите ошибки при некорректном использовании модификаторов доступа. Как показано в примере ниже для каждого модификатора:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
class FooBase {
    public x: number;
    private y: number;
    protected z: number;
}

// для экземпляра класса
var foo = new FooBase();
foo.x; // Ок
foo.y; // ошибка : private
foo.z; // ошибка : protected

// для класса-наследника
class FooChild extends FooBase {
    constructor() {
        super();
        this.x; // Ок
        this.y; // ошибка: private
        this.z; // Ок
    }
}

Как обычно, эти модификаторы работают и для члена класса, и для метода.

Abstract

abstract можно рассматривать как модификатор доступа. Мы рассматриваем его отдельно, потому что, в отличие от предыдущих модификаторов, он может использоваться как для class, так и для любого члена класса. Наличие abstract модификатора в первую очередь означает, что данная функциональность не может быть вызвана напрямую, класс-наследник должен обеспечивать функциональность.

  • Экземпляр abstract класса не может быть создан напрямую. Вместо этого должен быть создан какой-либо class, который наследуется от abstract class.
  • abstract члены класса недоступны напрямую и функциональность предоставляется только через класс-наследник.

Конструктор опционален

Конструктор для класса не обязателен. Пример ниже прекрасно работает:

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

Определение с помощью конструктора

Добавление членов класса и инициализация, как на примере ниже:

1
2
3
4
5
6
class Foo {
    x: number;
    constructor(x: number) {
        this.x = x;
    }
}

это настолько общий паттерн, что TypeScript предоставляет сокращенный вариант, в котором достаточно добавить модификатор доступа перед членом класса и он автоматически будет проинициализирован и скопирован из конструктора. Поэтому предыдущий пример может быть переписан как:

1
2
3
class Foo {
    constructor(public x: number) {}
}

Инициализация свойств

Это прекрасная функция, поддерживаемая TypeScript (из ES7). Вы можете инициализировать любой член класса вне конструктора, обычно с дефолтным значением.

1
2
3
4
5
6
class Foo {
    members = []; // инициализация
    add(x) {
        this.members.push(x);
    }
}

Комментарии