Назад | Учебник TypeScript | Вперёд
TypeScript позволяет создавать интерфейсы (что такое интерфейсы?), в отличие от JavaScript, который основан на прототипном программировании.
Объявляются они в с помощью ключевого слова interface:
|
1 2 3 4 |
interface Monster { health: number; name: string; } |
В TypeScript интерфейсы могут иметь необязательные поля, тогда после имени поля в описании интерфейса ставится знак вопроса:
|
1 2 3 4 5 |
interface Monster { health: number; name: string; bombs?: number; } |
Пример использования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
interface Monster { health: number; name: string; bombs?: number; } function printName(arg : Monster) { alert(name); } let someMonster = {health: 100, name: 'Goblin', bombs: 3}; let monsterWithoutBombs = {health: 100, name: 'Goblin'}; let incorrectMonster = {health: 100}; printName(someMonster); printName(monsterWithoutBombs); // Невозможно, так как тут уже не полностью // реализуем интерфейс Monster // printName(incorrectMonster); |
Интерфейсы в TypeScript могут также содержать поля, доступные только для чтения. Для этого они помечаются словом readonly перед именем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
interface Monster { health: number; readonly name: string; bombs?: number; } let rustyTheMonster:Monster = {health: 100, name : 'Rusty'} rustyTheMonster.health--; // OK // rustyTheMonster.name = 'Orc'; // Нельзя. Будет ошибка компиляции rustyTheMonster.bombs = 10; // OK |
Можно также указывать методы, которые должен реализовать класс, реализующий этот интерфейс:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
interface Monster { health: number; readonly name: string; bombs?: number; hit(damage:number) : void; heal() : void; getNameWithHealth() : string; } class Daemon implements Monster { health: number = 1000.0; name:string = "Daemon"; constructor() { } hit(damage:number) : void { this.health -= damage; } heal():void { this.health = 1000.0; } getNameWithHealth() : string { return this.name + this.health; } nope():void { // this.bombs = 3; // Нельзя, в Daemon не определили bombs, // // Который был необязателен в Monster. } } let myDaemon:Daemon = new Daemon(); myDaemon.hit(11.2); alert(myDaemon.getNameWithHealth()); |
В TypeScript интерфейсы могут описывать не только классы. Они могут, например, описывать функции:
|
1 2 3 4 5 6 7 8 9 |
interface TwoStringsFunc { (str1 : string, str2 : string) : string; } let myFunc:TwoStringsFunc; myFunc = function(leftPart : string, rightPart : string): string { return leftPart + rightPart; } |
Обратите внимание, что в функции, которая реализует этот интерфейс, мы можем использовать другие имена для формальных параметров.
TypeScript позволяет создавать интерфейсы для индексируемых типов, то есть массивов (в том числе и ассоциативных):
|
1 2 3 4 5 |
interface DateArray { [index : number] : Date; } let arr1 : DateArray = [new Date(), new Date()]; |
В качестве индекса можно использовать не только числа, но и строки.
Интерфейсы поддерживают наследование, в том числе и множественное, с помощью extends:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
interface Monster { health: number; name : string; } interface Trader { money : number; } interface Goblin extends Monster, Trader { bombs?: number; } let g : Goblin = { health : 10000.0, name : 'Goblin', money : 1_000_000.0, bombs : 3 }; g.name = 'Vasya'; g.money = 10000.0; |
В TypeScript интерфейсы могут расширять классы, при этом они получают все описания его полей и методов, но не их реализации:
|
1 2 3 4 5 6 7 |
class Goblin { health : number } interface Monster extends Goblin { someOtherField : string } |
Вот и всё. Хорошого дня!
Назад | Учебник TypeScript | Вперёд