https://www.tslang.cn/docs/handbook/jsx.html
在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵循的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的具体实现细节，只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似于java，同时增加了更灵活的接口类型，包括属性、函数、可索引和类等。
// ts中定义方法，其实通过参数的传递及格式要求，就是一种接口约束
function printLabel(name:string):void{ // 参数的约束
console.log(name)
}
printLabel("Ok")
// ts 中自定义方法传入参数对 json进行约束
function printLabel_1(labelInfo:{label:string}):void{ // 参数的约束
console.log(labelInfo.label)
}
printLabel_1({label:"Nice"}) // 传入带有label的对象
//1、 ts 实现批量方法的传入参数的约束，可以使用接口
interface fullName { // 定义接口
// 对象必须要携带以下参数
firstName:string;
secondName:string;
}
function printLabel_2(name:fullName):void{ // 参数的约束
console.log(name.firstName + "--" + name.secondName)
}
var obj = { // 推荐这样写，外部写对象，再传入，这样可以添加额外的age，不会报错
age:20,
firstName:"wu",
secondName:"yu",
}
printLabel_2({firstName:"wang",secondName:"li"}) // 传入带有label的对象
printLabel_2(obj)
function printLabel_3(name:fullName):void{ // 也可以实现这个接口
console.log(name.firstName + "--" + name.secondName)
}
//2、可选接口属性
interface fullName1 { // 定义接口
// 对象必须要携带以下参数
firstName:string;
secondName?:string; // 通过？使其成为可选参数，不是必须要这个参数
}
function printLabel_4(name:fullName1):void{ // 也可以实现这个接口
if (name.secondName){
console.log(name.firstName + "--" + name.secondName)
}else{
console.log(name.firstName+"没有secondName")
}
}
printLabel_4({firstName:"xi",secondName:"he"})
printLabel_4({firstName:"lisi"})
// 函数类型接口, 实现加密函数
interface encrypt {
(key:string,value:string):string // 之前的是约束参数的，这里是约束函数的
}
var md5:encrypt = function(key:string,value:string):string{ // 约束函数
// 模拟操作
return key+value
}
var sha1:encrypt = function(key:string,value:string):string{ // 约束函数
// 模拟操作
return key+value+"加密"
}
// 接口约束函数
alert(md5("name","张三"))
//1、 中数组约束
interface UserArr {
[index:number]:string // 通过接口越是数组的类型，索引是数值类型，值为value
// [index:number]:any // 通过接口越是数组的类型，索引是数值类型，值为any
}
var arr:UserArr=[‘1212‘,‘1233‘,‘aaa‘]
alert(arr[1]) // 1233
alert(arr[2]) // aaa
//2、 对对象的约束
interface userObj {
[index:string]:string
}
var obj:userObj = {
name:"wang",
xing:"li",
// age:20, // 错误
}
interface Animal {
name:string // 类属性接口约束
eat(str:string):void // 类方法接口约束
}
class Dog implements Animal {
name:string;
constructor(name:string){
this.name = name
}
eat(){ // 必须实现eat方法否则报错,可不传name
console.log(this.name+‘吃粮食‘)
}
}
var d = new Dog("小黑")
d.eat()
interface Animal1 {
eat():void;
}
interface Person extends Animal1 { // 继承Animal1接口
work():void;
}
class Web implements Person { // 类继承Person,就需要实现各自的接口
public name:string;
constructor(name:string){
this.name = name
}
eat(){
console.log(this.name+"馒头喜欢")
}
work(){
console.log(this.name+"正在工作")
}
}
var w = new Web("小李")
w.eat();
w.work();
class Programmer {
public name:string;
constructor(name:string){
this.name = name;
}
coding(code:string) {
console.log(this.name+code)
}
}
// 复杂结构的类的继承+接口扩展
class Web_1 extends Programmer implements Person { // 类继承Person,就需要实现各自的接口
constructor(name:string){
super(name)
}
eat(){
console.log(this.name+"馒头喜欢")
}
work(){
console.log(this.name+"正在工作")
}
}
var w1 = new Web_1("小王")
w1.coding(‘ts代码‘)
w1.eat();
原文：https://www.cnblogs.com/double-W/p/12873328.html