YouTipAn interface is a declaration of a series of abstract methods, a collection of method characteristics. These methods are all abstract and need to be implemented by concrete classes. Then, third parties can call this set of abstract methods to make the concrete classes execute the specific methods.
\n\nThe TypeScript interface is defined as follows:
\n\ninterface interface_name { }Example
\n\nIn the following example, we define an interface IPerson, and then define a variable customer whose type is IPerson.
The customer implements the properties and methods of the interface IPerson.
TypeScript
\n\ninterface IPerson{\n firstName:string,\n lastName:string,\n sayHi: ()=>string\n}\n\nvar customer:IPerson = {\n firstName:"Tom",\n lastName:"Hanks",\n sayHi: ():string =>{\n return "Hi there"\n }\n}\n\nconsole.log("Customer object ")\nconsole.log(customer.firstName)\nconsole.log(customer.lastName)\nconsole.log(customer.sayHi())\n\nvar employee:IPerson = {\n firstName:"Jim",\n lastName:"Blakes",\n sayHi: ():string =>{\n return "Hello!!!"\n }\n}\n\nconsole.log("Employee object ")\nconsole.log(employee.firstName)\nconsole.log(employee.lastName)Note that interfaces cannot be converted to JavaScript. They are only part of TypeScript.
\n\nCompiling the above code yields the following JavaScript code:
\n\nJavaScript
\n\nvar customer = {\n firstName: "Tom",\n lastName: "Hanks",\n sayHi: function(){\n return "Hi there";\n }\n};\n\nconsole.log("Customer object ");\nconsole.log(customer.firstName);\nconsole.log(customer.lastName);\nconsole.log(customer.sayHi());\n\nvar employee = {\n firstName: "Jim",\n lastName: "Blakes",\n sayHi: function(){\n return "Hello!!!";\n }\n};\n\nconsole.log("Employee object ");\nconsole.log(employee.firstName);\nconsole.log(employee.lastName);The output is:
\n\nCustomer object\nTom\nHanks\nHi there\nEmployee object\nJim\nBlakes\n\n
Union Types and Interfaces
\n\nThe following example demonstrates how to use union types within an interface:
\n\nTypeScript
\n\ninterface RunOptions{\n program:string;\n commandline:string[]|string|(()=>string);\n}\n\nvar options:RunOptions = {\n program:"test1",\n commandline:"Hello"\n};\n\nconsole.log(options.commandline)\n\noptions = {\n program:"test1",\n commandline:["Hello","World"]\n};\n\nconsole.log(options.commandline);\nconsole.log(options.commandline);\n\noptions = {\n program:"test1",\n commandline:()=>{return "**Hello World** "}\n};\n\nvar fn:any = options.commandline;\nconsole.log(fn());Compiling the above code yields the following JavaScript code:
\n\nJavaScript
\n\nvar options = {\n program: "test1",\n commandline: "Hello"\n};\n\nconsole.log(options.commandline);\n\noptions = {\n program: "test1",\n commandline: ["Hello", "World"]\n};\n\nconsole.log(options.commandline);\nconsole.log(options.commandline);\n\noptions = {\n program: "test1",\n commandline: function(){return "**Hello World** "; }\n};\n\nvar fn = options.commandline;\nconsole.log(fn());The output is:
\n\nHello\nHello\nWorld\n**Hello World**\n\n
Interfaces and Arrays
\n\nIn interfaces, we can set the index value and elements of an array to different types. The index value can be a number or a string.
\n\nSetting the element type to string:
\n\nExample
\n\ninterface namelist{\n [index:number]:string\n}\n\nvar list2:namelist = ["Google","Tutorial","Taobao"]If another type is used, an error will occur:
\n\nExample
\n\ninterface namelist{\n [index:number]:string\n}\n\nvar list2:namelist = ["John",1,"Bran"]After execution, an error is reported as follows, indicating a type mismatch:
\n\ntest.ts:8:30 - error TS2322: Type 'number' is not assignable to type 'string'.\n\n8 var list2:namelist = ["John",1,"Bran"]\n ~\ntest.ts:2:4\n 2 [index:number]:string\n ~~~~~~~~~~~~~~~~~~~~~\n The expected type comes from this index signature.\n\nFound 1 error.TypeScript
\n\ninterface ages{\n [index:string]:number\n}\n\nvar agelist:ages;\nagelist = 15\n\n
Interface Inheritance
\n\nInterface inheritance means that an interface can extend itself through other interfaces.
\n\nTypeScript allows an interface to inherit from multiple interfaces.
\n\nInheritance uses the keyword extends.
Single interface inheritance syntax:
\n\nChild_interface_name extends super_interface_nameMultiple interface inheritance syntax:
\n\nChild_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_nameThe inherited interfaces are separated by commas ,.
Single Inheritance Example
\n\nTypeScript
\n\ninterface Person{\n age:number\n}\n\ninterface Musician extends Person{\n instrument:string\n}\n\nvar drummer = <Musician>{};\ndrummer.age = 27\ndrummer.instrument = "Drums"\n\nconsole.log("Age: "+drummer.age)\nconsole.log("favorite musical instrument: "+drummer.instrument)Compiling the above code yields the following JavaScript code:
\n\nJavaScript
\n\nvar drummer = {};\ndrummer.age = 27;\ndrummer.instrument = "Drums";\n\nconsole.log("Age: " + drummer.age);\nconsole.log("favorite musical instrument: " + drummer.instrument);The output is:
\n\nAge: 27\nfavorite musical instrument: DrumsMultiple Inheritance Example
\n\nTypeScript
\n\ninterface IParent1{\n v1:number\n}\n\ninterface IParent2{\n v2:number\n}\n\ninterface Child extends IParent1, IParent2{}\n\nvar Iobj:Child = {v1:12, v2:23}\n\nconsole.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)Compiling the above code yields the following JavaScript code:
\n\nJavaScript
\n\nvar Iobj = {v1: 12, v2: 23};\n\nconsole.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);The output is:
\n\nvalue 1: 12\nvalue 2: 23