TypeScript Interface
An interface is a declaration of a series of abstract methods, a collection of method characteristics. These methods should all be abstract and need to be implemented by concrete classes. Then third parties can call through this group of abstract methods, letting the concrete classes execute the specific methods.
The TypeScript interface is defined as follows:
interface interface_name {
}
Example
In the following example, we define an interface IPerson, then define a variable customer whose type is IPerson.
customer implements the properties and methods of the interface IPerson.
TypeScript
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)
Note that interfaces cannot be converted to JavaScript. They are only part of TypeScript.
Compile the above code to get the following JavaScript code:
JavaScript
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);
The output result is:
Customer 对象
Tom
Hanks
Hi there
Employee 对象
Jim
Blakes
Union Types and Interfaces
The following example demonstrates how to use union types in an interface:
TypeScript
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());
Compile the above code to get the following JavaScript code:
JavaScript
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());
The output result is:
Hello
Hello
World
**Hello World**
Interfaces and Arrays
In an interface, we can set the index value and elements of an array to different types. The index value can be a number or a string.
Set the elements to string type:
Example
interface namelist {
[index:number]:string
}
var list2:namelist = ["Google","Example","Taobao"]
If other types are used, an error will be reported:
Example
interface namelist {
[index:number]:string
}
var list2:namelist = ["John",1,"Bran"]
After execution, an error is reported as follows, showing type mismatch:
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.
TypeScript
interface ages {
[index:string]:number
}
var agelist:ages;
agelist["example"] = 15
Interface Inheritance
Interface inheritance means that an interface can extend itself through other interfaces.
TypeScript allows an interface to inherit from multiple interfaces.
Inheritance uses the keywordextends。
Single interface inheritance syntax format:
Child_interface_name extends super_interface_name
Multiple interface inheritance syntax format:
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
The inherited interfaces use commas,to separate.
Single Inheritance Example
TypeScript
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("Favorite instrument:"+drummer.instrument)
Compile the above code to get the following JavaScript code:
JavaScript
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:" + drummer.age);
console.log("Favorite instrument:" + drummer.instrument);
The output result is:
年龄: 27
喜欢的乐器: Drums
Multiple Inheritance Example
TypeScript
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)
Compile the above code to get the following JavaScript code:
JavaScript
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);
The output result is:
value 1: 12 value 2: 23
Other Extensions