Введение в классы в TypeScript

В этом руководстве вы узнаете о классах в TypeScript. В JavaScript нет понятия класса, как в других языках программирования, таких как Java и C#. В ES5 вы можете использовать функцию-конструктор и наследование прототипа для создания «класса».

Например, чтобы создать класс Person, который имеет три свойства: ssn, first name и last name, вы используете следующую функцию-конструктор:

function Person(ssn, firstName, lastName) {
    this.ssn = ssn;
    this.firstName = firstName;
    this.lastName = lastName;
}

Затем вы можете определить метод прототипа для получения полного имени человека путем объединения имени и фамилии следующим образом:

Person.prototype.getFullName = function() {
    return `${this.firstName} ${this.lastName}`;
}

Затем вы можете использовать «класс» Person, создав новый объект:

let person = new Person('171-28-0926','John','Doe');
console.log(person.getFullName());

В консоль будет выведено следующее:

John Doe

ES6 позволяет вам определить класс, который является просто синтаксическим сахаром для создания функции-конструктора и прототипного наследования:

class Person {
    ssn;
    firstName;
    lastName;

    constructor(ssn, firstName, lastName) {
        this.ssn = ssn;
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

В синтаксисе класса конструктор четко определен и помещен внутри класса. Следующий пример добавляет метод getFullName() :

class Person {
    ssn;
    firstName;
    lastName;

    constructor(ssn, firstName, lastName) {
        this.ssn = ssn;
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Использование класса Person аналогично функции-конструктору Person :

let person = new Person('171-28-0926','John','Doe');
console.log(person.getFullName());

Класс TypeScript добавляет аннотации типов к свойствам и методам класса. Ниже показан класс Person в TypeScript:

class Person {
    ssn: string;
    firstName: string;
    lastName: string;

    constructor(ssn: string, firstName: string, lastName: string) {
        this.ssn = ssn;
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

Когда вы аннотируете типы к свойствам, конструктору и методу, компилятор TypeScript будет выполнять соответствующие проверки типов.

Например, вы не можете инициализировать ssn с помощью number. Следующий код приведет к ошибке:

let person = new Person(171280926, 'John', 'Doe');
  • Используйте ключевое слово class для определения класса в TypeScript.
  • TypeScript использует синтаксис класса ES6 и добавляет аннотации типов, чтобы сделать класс более надежным.
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript