TypeScript 接口(interface)初探

# 前言

在面向对象的编程中，接口是一种定义行为和动作的规范。在程序设计里面，接口起到限制和规范的作用，定义了某一批类所需要遵循的规范。
接口不必担心这些类内部状态数据，也不必关心这些类里面方法实现细节，它之规定这批类里必须提供某些方法。接下来让我们具体来看一下，let's go~~~

# 属性类接口

// 定义一个接口 关键字 interface 
// 虽是对象形式，但必须以分号结束
interface FullName{
  firstName: string; 
  secondName: string;
}

function printName(nameObj:FullName): void{
  console.log(nameObj.firstName + '---' + nameObj.secondName)
}

printName('张', '三'); // 报错 没有包含 firstName 与 secondName
printName({firstName:'张', secondName:'三'}); // 正确
printName({secondName:'三', firstName:'张'}); // 正确 参数顺序不用保持一致
// 错误 直接传参只能包含firstName 与 secondName
printName({firstName:'张', secondName:'三', age:18}); 

let obj = {
  firstName:'张', 
  secondName:'三', 
  age:18
}

//正确 定义在外边的对象只要包含 firstName 与 secondName 即可
printName(obj); 

# 可选属性类接口

interface FullInfo{
  firstName: string; 
  secondName: string;
  age?: number; // 加了问号之后即为可选参数，可传可不传
}

function printInfo(infoObj:FullInfo): void{
  infoObj.age
    ? console.log(infoObj.firstName + '-' + infoObj.secondName + '-' + infoObj.age)
    : console.log(infoObj.firstName + '---' + infoObj.secondName)
}

printInfo({firstName:'张', secondName:'三'}); // 正确 age 为可选参数
printInfo({secondName:'三', firstName:'张', age:18}); // 正确 

# 函数类型接口

对函数传入的参数和返回值进行约束(批量约束);

interface encrypt{
  (key: string, value: string): string;
}

// 错误 参数类型与接口不一致
var sha1 = function(key: number, value:string):string{
  reuturn key + '--' + value;
}

// 错误 返回值与接口不一致
var sha2 = function(key: number, value:string):void{
  console.log( key + '--' + value );
}

// 正确
var sha3 = function(key: string, value:string):string{
  reuturn key + '--' + value;
}

sha3('张', '三'); // 张---三

# 类类型接口

类似于抽象类和抽象方法，也可以理解为属性接口和函数接口的组合
关键字是 implements ，不是继承，是实现 xxx 接口

interface Person{
  name: string;
  work(str: string): void;
}

class Web implements Person{
  name: string;
  constructor(name: string){
    this.name = name;
  }
  work(str: string):void{
    console.log(this.name + '的工作是' + str )
  }
}

let w = new Web('张三');
w.work('开发'); // 张三的工作是开发

# 索引接口

索引接口一般用于约束数组或对象（不经常用）

// 一般用于约束 数组
interface arrITF{
  [index:number]:string; //意思是 索引是number ， 值是string
}
let arr1:assITF = [1,2,3]; //错误 索引为number但值不是string
let arr2:assITF = ['1','2','3']; //正确

// 一般用于约束 对象
interface objITF{
  [index:string]:string; //意思是 索引是string， 值是string
}
let obj1:objITF = {name:'张三', age:18}; //错误 索引为string 但值不是string
let obj2:objITF = {name:'张三', age:‘18’}; //正确

// 或者改为以下
interface objITF{
  [index:string]:any; //意思是 索引是string， 值是任意类型
}
let obj1:objITF = {name:'张三', age:18}; //正确
let obj2:objITF = {name:'张三', age:'18'}; //正确

# 接口扩展 -- 接口 继承 接口

interface Animal{
  name:string;
  run():void;
}

interface Person extends Animal{
  work():void;
}

class programmer{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  coding():void{
    console.log(this.name + '在写代码')
  };
}

class Web extends programmer implements Person {
  constructor(nme:string){
    super(name);
  }
  run():void{
    console.log(this.nme + '在跑步')；
  }
 work():void{
    console.log(this.nme + '在工作')；
  }
}

let w = new Web('张三');
w.run(); // 张三 在跑步
w.work(); // 张三 在写工作
w.coding()；// 张三 在写代码