接口-1

1. 接口的基本使用

export default {};

/* 
接口是什么？
  接口是一系列抽象方法的声明, 是一些方法特征的集合, 这些方法都应该是抽象的, 需要由具体的类去实现, 
  然后第三方就可以通过这组抽象方法调用, 让具体的类执行具体的方法 

  接口也是一种数据类型

格式：
  interface interface_name { 
  }
*/
interface IFullName {
  firstName: string;
  lastName: string;
}

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

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

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

say(goddessName);

2. 可选属性与只读属性

export default {};

// 可选属性 ?
interface IFullName {
  firstName: string;
  lastName: string;
  age?: number;
}

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

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

let beauty: IInfo = {
  uname: "李庚希",
  uage: 18,
};
// beauty.uname = "赵丽颖"
// beauty.uage = 28

// readonly VS const

// const aaa = 123;
// aaa = 456;

interface IAAA {
  readonly aaa: number;
}

interface IAAA {
  bbb: number;
}

let aaabbb: IAAA = {
  aaa: 123,
  bbb: 456,
};

/* 
  总结：
  如果我们要作为变量使用就使用 const
  如果我们要作为属性使用就使用 readonly
*/

3. 索引签名

export default {};

/* 
  - 定义: 索引签名用于描述那些"通过索引得到"的类型
  - 格式: 如`[props: string]:any`
  - 应用场景: 解决参数问题
*/
interface IFullName {
  firstName: string;
  lastName: string;
  age: number;
  singName: string;
  [props: string]: any;
}

// 注意点: 我们一旦定义好接口, 就确定了变量或者形参, 我们使用接口进行约束的时候, 就必须一模一样

// 少一个或者少多个参数的情况  可选属性
// let goddess1:IFullName = {firstName: "邱", lastName: "淑贞"};
// let goddess2:IFullName = {firstName: "邱", lastName: "淑贞", age: 18};

// 多一个或者多多个
// 方案一: 使用变量  不推荐
let info = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "兔子舞",
};
let goddess3: IFullName = info;

// 方案二: 使用类型断言
let goddess4: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "兔子舞",
  abc: false,
} as IFullName;

interface Ibeauty {
  [props: string]: string;
}
// 注意点: 对象中的键, 最终都会被转化为字符串
let name: Ibeauty = {
  name1: "邱淑贞",
  name2: "古力娜扎",
  name3: "周慧敏",
  // name4: 123
  // 123: 123
};

// 方案三: 使用索引签名

let goddess5: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "兔子舞",
  abc: 123,
  bcd: false,
};

4. 函数接口

export default {};

/* 
  为了使用接口表示函数类型, 我们需要给接口定义一个调用签名. 
  它就像是一个只有参数列表和返回值类型的函数定义.参数列表里的每个参数都需要名字和类型
*/
interface ImakeMoney {
  (salary: number, reward: number): number;
}

const sumMoney: ImakeMoney = function (x: number, y: number): number {
  return x + y;
};

let res = sumMoney(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);

5. 接口的继承

export default {};

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

// 单继承
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
// }

interface IFatherMoney {
  m1: number;
}

interface IMotherMoney {
  m2: string;
}

interface ISon extends IFatherMoney, IMotherMoney {
  s: number;
}