接口

在 TS 里面接口可以定义任意类型

基本用法

• 关键字 interface

interface Person {
  name: string;
}
const PersonOne: Person = {
  name: "哈哈哈",
};

可选属性

• 一般用?来表示可选属性,可有可无

interface Person2 {
  name: string;
  color?: string;
}

const Man: Person2 = {
  name: "哈哈",
};

绕开多余属性检查

有的时候我们不希望 Typescript 这么严格的对数据检查,我们需要绕开多余性检查

• 使用?变成可选属性

interface Vegetables {
  color?: string;
  type: string;
}

const VegetablesResult: Vegetable = {
  type: "哈哈哈",
};

• 使用索引签名

interface Vegetables {
  color: string;
  type: string;
  [prop: string]: any;
}

const food = {
  color: "red",
  type: "水果",
  price: 30,
};

只读属性

• 接口设置为只读属性

interface Role{
  readonly name: string;
  readonly xingbie:  string;
}

const shili:Role = {
  name:'今天',
  xingbie:'男'
}

shili.name = '明天'  //报错误

函数类型

• 接口类型还可以描述函数

interface AddFunc {
  (num1: number, num2: number): number;
}

const add2: AddFunc = (arg1: number, arg2: number) => {
  return arg1 + arg2;
};

• 接口类型里面除了函数还可以有其他的类型

interface Func {
  (num1: number, num2: number): number;
}

interface typeAddson {
  id: number;
  type: string;
  add: Func;
}

const typeResult: typeAddson = {
  id: 1,
  type: "哈哈",
  add: (arg1, arg2) => {
    return arg1 + arg2;
  },
};

typeResult.addPosition(1, 2);

接口的高阶用法

• 索引签名

interface RoleDic{
  readonly [id:number] :string;
}

const role:RoleDic = {
  0:"super_admin"
}

role[0] = 'Hello';  //error 类型报错误 因为readonly只读

接口继承

接口和接口的继承 extends

interface Person {
  name: string;
}

interface Man extends Person {
  xingbie: string;
}

const Man_People: Man = {
  name: "哈哈哈",
  xingbie: "男",
};

接口和类之间的继承

• 接口继承类 extends

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  printname() {
    return this.name;
  }
}
interface Man extends Person {
  xingbie: string;
}

const Man_People: Man = {
  name: "哈哈哈",
  xingbie: "男",
  printname: () => {
    return Man_People.name;
  },
};

console.log(Man_People.printname());

类继承接口

interface Man {
  xingbie: number;
}

class Person implements Man {
  name: string;
  xingbie: number;
  constructor(name: string, xingbie: number) {
    this.name = name;
    this.xingbie = xingbie;
  }
  printname() {
    return this.name;
  }
  printxingbie() {
    return this.xingbie;
  }
}

const Person2 = new Person("哈哈哈", 123);

console.log(Person2.printname());

console.log(Person2.printxingbie());