【typescript基础篇】(第三章) 接口

接口

什么是接口？

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，

然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法
格式:

interface interface_name {}

type 名称 = {}

接口的基本使用

typescript 复制代码

interface IFullName {
  firstName: string
  lastName : string
}

let goddassName: IFullName = {
  firstName: "邱",
  lastName: "淑贞"
}

console.log(goddassName.firstName);
console.log(goddassName.lastName);



function say({firstName, lastName}:IFullName):void {
  console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(goddassName);

可选属性与只读属性

可选属性使用： ?
只读属性使用: readonly
readonly与const的区别: 做为变量使用的话用 const，若做为属性则使用readonly

typescript 复制代码

// 可选属性   使用?来进行修饰
interface IFullName {
  firstName: string
  lastName : string
  age?: number
}

let goddassName: IFullName = {
  firstName: "邱",
  lastName: "淑贞"
}

console.log(goddassName.firstName);
console.log(goddassName.lastName);


// 只读属性  readonly
interface IInfo {
  readonly uname: string;
  readonly uage: number;
}

let beauty:IInfo = {
  uname: "邱淑贞",
  uage: 18
}

// beauty.uname = "赵丽颖";  // 报错

readyonly 与 const 区别: 最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用readonly

索引签名

定义: 索引签名用于描述那些"通过索引得到"的类型
格式: 如[props: string]:any
应用场景: 解决参数问题

typescript 复制代码

interface IFullName {
  firstName: string
  lastName : string
  age?: number
  singName?: string
  [props: string]: any
}

// 注意点: 如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候,多一个或者少一个都不行
// 实际开发中往往会出现多或者少的情况，怎么解决？


// 少一个或者少多个属性
// 解决方案: 可选属性
let goddass1:IFullName = {firstName: "邱", lastName: "淑贞"};
let goddass2:IFullName = {firstName: "邱", lastName: "淑贞", age: 18};


// 多一个或者多多个属性
// 方案一：使用变量
let info = {firstName: "邱", lastName: "淑贞", age: 18, singName: "赌王", dance: "芭蕾"};
let goddass3:IFullName = info

// 方案二: 使用类型断言
let goddass4:IFullName = ({firstName: "邱", lastName: "淑贞", age: 18, singName: "赌王", dance: "芭蕾"}) as IFullName;


// 索引签名用于描述那些"通过索引得到"的类型
// 注意点: 对象中的键，会被转化为字符串
interface Ibeauty {
  [props: string]: string
}

let name:Ibeauty = {name1: "邱淑贞", name2: "李嘉欣", name3: "周慧敏"};


interface Iage {
  [props: string]: number
}

let afe:Iage = {age1: 18, age2: 20};


// 方案三: 索引签名
let goddass5:IFullName = {firstName: "邱", lastName: "淑贞", age: 18, singName: "赌王", dance: "芭蕾"};

函数接口

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

typescript 复制代码

interface ImakeMoney {
  (salary:number, reward:number):number
}


let sum:ImakeMoney = function (x:number, y:number):number {
  return x + y;
}
let res = sum(10, 20);
console.log(res);


// 接口与数组
// 我们定义了StringArray接口，它具有索引签名。 
// 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值
interface IStringArray {
  [index: number]: string;
}

let myArray: IStringArray;
myArray = ["邱淑贞", "赵今麦"];

let myStr: string = myArray[1];
console.log(myStr);

接口的继承

接口继承就是说接口可以通过其他接口来扩展自己。
Typescript 允许接口继承多个接口。
继承使用关键字 extends。

typescript 复制代码

// 单继承
interface IPerson { 
  age:number 
} 
interface IName extends IPerson { 
  name:string 
} 

let lady:IName = {
  name: "邱淑贞",
  age: 18
}

// 多继承
interface IFatherMoney {
  m1: number
}
interface IMotherMoney {
  m2: number
}

interface ISon extends IFatherMoney, IMotherMoney {
  s: number
} 

let money:ISon = {
  m1: 100,
  m2: 100,
  s: 100
}


console.log(`儿子一共有${money.m1 + money.m2 + money.s}万元`);

接口的混合类型

接口的混合类型就是调用接口的时候，同时包含多种不同的类型
应用场景: 闭包

typescript 复制代码

// 在接口中有多种类型进行混合
interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = <Counter>function (start: number) { };
  counter.interval = 123;
  counter.reset = function() { };

  return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

接口与类型别名的异同

1.相同点:

都可以描述属性或方法

都允许拓展

2.不同点:

type可以声明基本数据类型，联合类型，数组等; interface只能声明变量

当出现使用type和interface声明同名的数据时;type会直接报错;interface会进行组合

type不会自动合并；interface会

typescript 复制代码

// 相同点:
// 1.都可以描述属性或方法
type womenStar = {
  name: string
  age: number
  perform(): any
}
interface IWStar {
  name: string
  age: number
  perform(): any
}

let star1 = {
  name: "邱淑贞",
  age: 18,
  perform() {
    return "倚天屠龙记"
  }
}
let star2 = {
  name: "李一桐",
  age: 18,
  perform() {
    return "射雕英雄传"
  }
}

// 2.都允许拓展
type money  = {
  y1: number
}
type money2 = money & {
  y2: number
}

let salary:money2 = {
  y1: 10,
  y2: 20
}

interface Istar1 {
  name: string
}
interface Istar2 extends Istar1 {
  age: number
}

let starInfo:Istar2 = {
  name: "邱淑贞",
  age: 18
}


// 不同点：
// 1.type可以声明基本数据类型，联合类型，数组等
//   interface只能声明变量
type age = number;
type info = string | number | boolean;
type beautyList = [string | number];
// interface Iage = number; // 报错


// 2.当出现使用type和interface声明同名的数据时
//   type会直接报错
//   interface会进行组合
// type mygoddassName = {
//   name: string
// }

// type mygoddassName = {
//   name: number
// }

interface mygoddassName {
  name: string
} 
interface mygoddassName {
  name: string
  age: number
} 

let goddass:mygoddassName = {
  name: "赵丽颖",
  age: 20
}