TypeScript Interfaces

An interface is a declaration of a set of abstract methods, a collection of method characteristics, all of which should be abstract and need to be implemented by concrete classes. Then, third parties can call these abstract methods, allowing the concrete class to execute specific methods.

The definition of a TypeScript interface is as follows:

interface interface_name { 
}

Example

In the following example, we define an interface IPerson, and then define a variable customer whose type is IPerson.

customer implements the properties and methods of the IPerson interface.

interface IPerson { 
    firstName: string, 
    lastName: string, 
    sayHi: () => string 
} 

var customer: IPerson = { 
    firstName: "Tom",
    lastName: "Hanks", 
    sayHi: (): string => { return "Hi there" } 
} 

console.log("Customer 对象 ") 
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  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

It is important to note that interfaces cannot be converted to JavaScript. They are only part of TypeScript.

Compiling the above code yields the following JavaScript code:

var customer = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: function () { return "Hi there"; }
};
console.log("Customer 对象 ");
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  对象 ");
console.log(employee.firstName);
console.log(employee.lastName);

The output is:

Customer 对象
Tom
Hanks
Hi there
Employee  对象
Jim
Blakes

Union Types and Interfaces

The following example demonstrates how to use union types in interfaces:

interface RunOptions { 
    program: string; 
    commandline: string[] | string | (() => string); 
} 

// commandline is a string
var options: RunOptions = { program: "test1", commandline: "Hello" }; 
console.log(options.commandline)  

// commandline is a string array
options = { program: "test1", commandline: ["Hello", "World"] }; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

// commandline is a function expression
options = { program: "test1", commandline: () => { return "**Hello World**"; } }; 

var fn: any = options.commandline; 
console.log(fn());

Compiling the above code yields the following JavaScript code:

// commandline is a string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);
// commandline is a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline is a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

The output is:

Hello
Hello
World
**Hello World**

Interfaces and Arrays

In interfaces, we can set the index value and elements of an array to different types, where the index value can be a number or a string.

Setting elements to string type:

interface namelist { 
   [index: number]: string 
} 

// Correct, types match
var list2: namelist = ["Google", "tutorialpro", "Taobao"]
// Error, element 1 is not a string type
// var list2: namelist = ["tutorialpro", 1, "Taobao"]

Using other types will result in an error:

interface namelist { 
   [index: number]: string 
} 

// Correct, types match
// var list2: namelist = ["Google", "tutorialpro", "Taobao"]
// Error, element 1 is not a string type
var list2: namelist = ["John", 1, "Bran"]

Error message:

test.ts:8:30 - error TS2322: Type 'number' is not assignable to type 'string'.

8 var list2: namelist = ["John", 1, "Bran"]
                               ~

  test.ts:2:4
    2    [index: number]: string
         ~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from this index signature.


Found 1 error.

interface ages { 
   [index: string]: number 
} 

var agelist: ages; 
// Correct type
agelist["tutorialpro"] = 15  

// Type error, output error TS2322: Type '"google"' is not assignable to type 'number'.
// agelist[2] = "google"

Interface Inheritance

Interface inheritance means that an interface can extend itself using other interfaces.

TypeScript allows an interface to inherit multiple interfaces.

Inheritance uses the extends keyword.

Single interface inheritance syntax:

Child_interface_name extends super_interface_name

Multiple interface inheritance syntax:

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

The inherited interfaces are separated by commas ,.

Single Inheritance Example

interface Person { 
   age: number 
} 

interface Musician extends Person { 
   instrument: string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  " + drummer.age)
console.log("喜欢的乐器:  " + drummer.instrument)

Compiling the above code yields the following JavaScript code:

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

The output is:

年龄:  27
喜欢的乐器:  Drums

Multiple Inheritance Example

interface IParent1 { 
    v1: number 
} 

interface IParent2 { 
    v2: number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj: Child = { v1: 12, v2: 23 } 
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2)

Compiling the above code yields the following JavaScript code:

var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);

The output is:

value 1: 12 value 2: 23