От автора: интерфейс — это синтаксический набор правил, которого элемент должен придерживаться. Другими словами, в TypeScript интерфейсы определяют синтаксис, который должен соблюдать элемент.
Они определяют свойства, методы и события, которые являются членами интерфейса. Интерфейсы содержат только объявления членов. Ответственность за определение членов лежит на производственном классе. Часто это помогает обеспечить стандартную структуру, которой будут придерживаться производственные классы. Давайте возьмем объект:
|
1 2 3 4 5 |
var person = { FirstName:"Tom", LastName:"Hanks", sayHi: ()=>{ return "Hi"} }; |
Если мы рассмотрим сигнатуру объекта, то получим:
|
1 2 3 4 5 |
{ FirstName:string, LastName:string, sayHi()=>string } |
Для того, чтобы повторно использовать сигнатуру через объекты, мы может задать её как интерфейс.
Объявление интерфейсов
Чтобы объявить интерфейс, мы используем ключевое слово interface. Ниже приведён синтаксис объявления интерфейса:
Синтаксис
|
1 2 |
interface interface_name { } |
Пример: Интерфейс и объекты
|
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 |
interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } var customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Hi there"} } console.log("Customer Object ") console.log(customer.firstName) console.log(customer.lastName) console.log(customer.sayHi()) var employee:IPerson = { firstName:"Jim", lastName:"Blakes", sayHi: ():string =>{return "Hello!!!"} } console.log("Employee Object ") console.log(employee.firstName) console.log(employee.lastName) |
Этот код задаёт интерфейсы. Объект customer имеет тип IPerson. Отсюда следует, что объект обязательно должен будет определить все свойства, как указано в интерфейсе.
Другой объект со следующей сигнатурой, всё ещё рассматривается как объект типа IPerson, потому что этот объект анализируется исходя из его размера или сигнатуры. После компиляции мы получим следующий код JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Сгенерировано посредством typescript 1.8.10 var customer = { firstName: "Tom", lastName: "Hanks", sayHi: function () { return "Hi there"; } }; console.log("Customer Object "); console.log(customer.firstName); console.log(customer.lastName); console.log(customer.sayHi()); var employee = { firstName: "Jim", lastName: "Blakes", sayHi: function () { return "Hello!!!"; } }; console.log("Employee Object "); console.log(employee.firstName); console.log(employee.lastName); |
Результат вышеприведённого кода выглядит следующим образом:
|
1 2 3 4 5 6 7 8 |
Customer object Tom Hanks Hi there Employee object Jim Blakes Hello!!! |
Интерфейсы не конвертируются в JavaScript. Они просто являются частью TypeScript. Если вы посмотрите на скриншот инструмента TS Playground, то убедитесь, что отсутствует сгенерированный javascript, когда вы объявляете интерфейс — в отличие от класса. Таким образом интерфейсы имеют нулевое воздействие на JavaScript во время выполнения.
Тип Union и интерфейс
Следующий пример демонстрирует использование типа Union и интерфейса:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
interface RunOptions { program:string; commandline:string[]|string|(()=>string); } //коммандная строка как строка var options:RunOptions = {program:"test1",commandline:"Hello"}; console.log(options.commandline) // коммандная строка как массив строк options = {program:"test1",commandline:["Hello","World"]}; console.log(options.commandline[0]); console.log(options.commandline[1]); // коммандная строка как выражение функции options = {program:"test1",commandline:()=>{return "**Hello World**";}}; var fn:any = options.commandline; console.log(fn()); |
После компиляции мы получим следующий JavaScript код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Сгенерировано посредством typescript 1.8.10 // коммандная строка как строка var options = { program: "test1", commandline: "Hello" }; console.log(options.commandline); // коммандная строка как массив строк options = { program: "test1", commandline: ["Hello", "World"] }; console.log(options.commandline[0]); console.log(options.commandline[1]); // коммандная строка как выражение функции options = { program: "test1", commandline: function () { return "**Hello World**"; } }; var fn = options.commandline; console.log(fn()); |
Результат выглядит следующим образом:
|
1 2 3 4 |
Hello Hello World **Hello World** |
Интерфейсы и массивы
Интерфейс может определять и вид ключа, используемый массивом, и тип входа, который содержит массив. Индекс может иметь тип string или number.
Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 |
interface namelist { [index:number]:string } var list2:namelist = ["John",1,"Bran"] //Ошибка. 1 – это не тип string interface ages { [index:string]:number } var agelist:ages; agelist["John"] = 15 // ОК agelist[2] = "nine" // Ошибка |
Интерфейсы и наследование
Интерфейс может быть расширен с помощью других интерфейсов. Другими словами, интерфейс может наследовать от других интерфейсов. Typescript позволяет наследование от множества интерфейсов. Используйте ключевое слово extends, чтобы реализовать наследование для интерфейсов.
Синтаксис: Единичное наследование интерфейса
|
1 |
Child_interface_name extends super_interface_name |
Синтаксис: Множественное наследование интерфейса
|
1 2 |
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name |
Пример: Простое наследование интерфейса
|
1 2 3 4 5 6 7 8 9 10 11 12 |
interface Person { age:number } interface Musician extends Person { instrument:string } var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = "Drums" console.log("Age: "+drummer.age) console.log("Instrument: "+drummer.instrument) |
После компиляции мы получим следующий код JavaScript:
|
1 2 3 4 5 6 |
//Сгенерировано посредством typescript 1.8.10 var drummer = {}; drummer.age = 27; drummer.instrument = "Drums"; console.log("Age: " + drummer.age); console.log("Instrument: " + drummer.instrument); |
Результат выглядит следующим образом:
|
1 2 |
Age: 27 Instrument: Drums |
Пример: Множественное наследование интерфейса
|
1 2 3 4 5 6 7 8 9 10 11 |
interface IParent1 { v1:number } interface IParent2 { v2:number } interface Child extends IParent1, IParent2 { } var Iobj:Child = { v1:12, v2:23} console.log("value 1: "+this.v1+" value 2: "+this.v2) |
Объект Iobj имеет тип interface leaf. interface leaf теперь на основе наследования имеет два атрибута — v1 и v2 соответственно. Отсюда следует, что объект Iobj теперь должен содержать эти атрибуты. После компиляции мы получим следующий код JavaScript:
|
1 2 3 |
//Сгенерировано посредством typescript 1.8.10 var Iobj = { v1: 12, v2: 23 }; console.log("value 1: " + this.v1 + " value 2: " + this.v2); |
Результат выглядит следующим образом:
|
1 |
value 1: 12 value 2: 23 |
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
