TS-interface的用法

接口的使用

• 什么是接口？
  接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，
• 格式:
  interface interface_name {}

interface user {
  name: string;
  age: number;
  sex: string;
}

let obj: user;
obj = {
  name: "张三",
  age: 18,
  sex: "男",
};

看到这里，或许有人会觉得interface和type有啥区别吗？区别参考这篇文章
type和interface的区别

可选属性与只读属性

• 可选属性使用： ?
• 只读属性使用：readonly

interface user {
  name: string;
  age?: number;
  readonly sex: string;
}

let obj1: user = {
    name: "张三",
    age: 18,
    sex: "男"
}
obj1.age = 19;
obj1.sex = "女"; // 报错 无法分配到 "sex" ，因为它是只读属性。

// 因为age是可选的，所以不赋值也无所谓
let obj2: user = {
    name: "张三",
    sex: "男"
}

索引签名

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

interface User {
  name: string;
  age: number;
  [props: string]: any;
}

// 如果使用接口限定了变量或者形参，那么赋值的时候，多一个或者少一个参数都会报错
// 如何动态增加参数的数量呢？

let user: User = {
    name: "张三",
    age: 18,
    habbit: "篮球",
    location: "广州"
}

函数接口

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface Sum {
  (x: number, y: number): number;
}

let sum: Sum = function (x: number, y: number): number {
  return x + y;
};
// 接口与数组
interface IStringArray {
  [index: number]: string;
}
let arr: IStringArray;
arr = ["张三", "李四"];

接口的继承

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

interface I1 {
  name: string;
}
interface I2 {
  age: number;
}
interface User extends I1, I2 {
  sex: string;
}

let user: User = {
  name: "张三",
  age: 1,
  sex: "男",
};

接口的混合类型

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

interface User {
  (id: number): number;
  name: string;
  play(): void;
}

function user(): User {
  let obj = <User>function (id: number) {};
  obj.name = "张三";
  obj.play = function () {};
  return obj;
}

interface和type的区别

1.相同点:

• 都可以描述属性或方法
• 都允许拓展

2.不同点:

• type可以声明基本数据类型，联合类型，数组等; interface只能声明变量
• 当出现使用type和interface声明同名的数据时;type会直接报错;interface会进行组合
• type不会自动合并；interface会

// 相同点
// 1.都可以描述属性或方法
type TUser = {
  name: string;
  age: number;
  play(): any;
};
interface IUser {
  name: string;
  age: number;
  play(): any;
}
// 都允许扩展
type TStudent = TUser & {
  ID: number;
};
interface IStudent extends IUser {
  ID: number;
}

// 不同点
// 1.type可以声明基本数据类型，联合类型，数组等
//    interface只能声明对象类型
type age = number;
type info = string | number | boolean;
type list = [string | number];

interface a {
  name: string;
}
// 2.当使用type和interface声明同名变量时
//  type会直接报错
//  interface会进行组合
// type age = string; 标识符“age”重复
interface a {
  age: number;
}
const A: a = {
  name: "张三",
  age: 1,
};