ts 接口的属性权限、使用、继承

2022-05-18  本文已影响0人  暴躁程序员

1. 接口的属性类型和权限

  1. 只读属性
    只读属性,在被定义后不可被修改
interface Student {
  name: string;
  age: number;
  readonly live: boolean; // 只读属性,不可被修改
}

const xiaoming: Student = {
  name: "小明",
  age: 7,
  live: true,
};
xiaoming.age = 19;
// xiaoming.live = false; // 只读属性,不可被修改
  1. 可选属性
    接口被调用的时候,它所定义的属性必须全部重写,但是接口属性是可选属性的情况下可以不必重写
interface Student {
  name: string;
  age: number;
  live?: boolean; // 可选属性,可以不传
}

const xiaoming: Student = {
  name: "小明",
  age: 7,
};
  1. 索引类型规范
    只是定义接口属性的键名和键值的数据类型,不限制键值对的数量
    用于规范和统一接口的属性和属性值数据类型
// 定义对象的索引类型属性,key值类型自定义
interface Student {
  [key: string]: string;
}
const xiaoming: Student = {
  name: "小明",
  age: "7",
  // live: true // 类型必须按照接口定义的规范
};

// 定义数组的索引类型属性,key值必须是数字类型
interface PersonList {
  [key: number]: string;
}
const person: PersonList = ["1", "2", "3", "4", "5"];

使用 never 和联合类型 拓展索引类型接口属性的其他类型

interface Student1 {
  age: number;
}
interface Student2 {
  age: never;
  [key: string]: string;
}
const xiaoming: Student1 | Student2 = { age: 200, name: "小明", sex: "男" };
console.log(xiaoming);

2. 接口的使用方式

接口用于约束对象、数组、类的属性权限、数据类型等,并根据接口定义的属性给与相应代码提示

  1. 约束对象
    创建对象时把对象变量类型换成接口名称,这样此对象接受接口约束
interface Student {
  name: string;
  age?: number; // 可选属性,可以不传
  readonly live: boolean; // 只读属性,不可被修改
}

// const xiaoming: object = {}
const xiaoming: Student = {
  name: "小明",
  live: true,
};
xiaoming.age = 19;
// xiaoming.live = false; // 只读属性,不可被修改

  1. 约束数组
    一般以索引类型的方式约束数组的值的数据类型,key 必须是 number 类型
interface PersonList {
  [key: number]: string;
}
const person: PersonList = ["1", "2", "3", "4", "5"];

  1. 约束类
    定义类 实现 接口,那么此类就会接受接口约束
// 定义接口规范
interface Student {
  name: string;
  age: number;
  play(ball: string): void;
  say(walk?: string): string;
}

class StudentClass implements Student {
  // 定义类的属性和方法,必须遵循接口约束
  name: string;
  age: number;
  play(ball: string): void {
    console.log(this.name + "正在玩---" + ball);
  }
  say(walk?: string): string {
    return this.name + "说:" + walk;
  }

  // 类构造器,用于类的实例化接受参数
  constructor(name: string, age?: number) {
    this.name = name;
    this.age = age;
  }
}

const xiaoming = new StudentClass("小明");
xiaoming.play("篮球");
console.log(xiaoming.say("对不起"));
  1. 约束函数
    创建对象时以函数表达式的方式创建,把函数变量类型换成接口名称
    这样此函数接受接口约束,可限制参数类型和是否有返回值以及返回值的数据类型
interface Student {
  (name: string, age: number): void; // void 代表无返回值,把它换成数据类型,可限制此函数的返回值数据类型
}
const showStudent: Student = (name: string, age: number) => {
  console.log(name + age);
};
showStudent("小明", 18);

3. 接口的继承

接口可继承接口。类可实现接口并接受接口约束

// 定义接口
interface P1 {
  name: string;
}
interface P2 {
  age: number;
  eat(food: string): void;
}

// 多继承,方法可重写
interface Student extends P1 ,P2{
  grade: number;
  eat(food?: string): string; // 方法重写
  sleep(time?: string): string;
}

// 类实现接口,接受接口约束
class StudentClass implements Student {
  name: string;
  age: number;
  grade: number;
  eat(food?: string): string {
    return this.name + "吃" + food;
  }
  sleep(time?: string): string {
    return this.name + "睡了" + time;
  }
  constructor(name: string, age?: number) {
    this.name = name;
    this.age = age;
  }
}

// 实例化类
const xiaoming = new StudentClass("小明");
console.log(xiaoming.eat("鱼"));
console.log(xiaoming.sleep("12小时"));

上一篇 下一篇

猜你喜欢

热点阅读