对TS里接口、extends和类的理解

对TS里接口和类的理解

接口

• 需求: 创建人的对象, 需要对人的属性进行一定的约束

• 下面通过一个简单示例来观察接口是如何工作的：

/* 
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
接口类型的对象
    多了或者少了属性是不允许的
    可选属性: ?
    只读属性: readonly
*/

/* 
需求: 创建人的对象, 需要对人的属性进行一定的约束
  id是number类型, 必须有, 只读的
  name是string类型, 必须有
  age是number类型, 必须有
  sex是string类型, 可以没有
*/

// 定义人的接口
interface IPerson {
  id: number
  name: string
  age: number
  sex: string
}

const person1: IPerson = {
  id: 1,
  name: 'tom',
  age: 20,
  sex: '男'
}

• 应用
• 定义一个Person 接口，它来描述一个拥有 firstName 和 lastName 字段的对象，这两个元素的值均为string类型。（对函数 greeterinterface 的参数person对象的元素类型进行了限制。）

interface Person {
    firstName: string;
    lastName: string;
}

const greeterinterface = (person: Person) => {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

console.log(greeterinterface(user))

extends 关键字

在 TypeScript 中，通过 extends 关键字可以实现接口的继承。即用一个接口来扩展另一个接口的成员。这样可以避免重复定义或者让接口更加灵活。

interface Shape {
  name: string;
  area(): number;
}

interface Circle extends Shape {
  radius: number;
}

class MyCircle implements Circle {
  name = "My Circle";
  radius = 10;
  area() {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

const myCircle = new MyCircle();
console.log(myCircle.name); // "My Circle"
console.log(myCircle.area()); // 314.1592653589793

在上述代码中，定义了两个接口Shape和Circle。

接口Shape定义了name和area两个属性。

接口Circle继承了Shape接口（Circle也拥有了来自Shape接口的两个属性），并增加了radius属性

这就是 extends的使用，用于继承，并且在继承属性的基础上又新增了自己的属性

接下来，通过class关键字定义了一个MyCircle类，这个类通过接口继承，实现了接口的组合和复用。

类

• 在 TypeScript 中，类是面向对象编程的基础，它是一种抽象和封装了数据和行为的结构。类具有属性和方法，通常用于创建对象。

• 下面是一个简单的 TypeScript 类的示例：

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person("Tom", 18);
person.sayHello();

上面的代码中，定义了一个 Person 类，其中包括 name 和 age 两个属性，以及 sayHello 方法。在 constructor 构造函数中，通过 this 关键字来初始化 name 和 age 两个属性。sayHello 方法用于输出 Person 对象的信息。

在最后的代码中，创建了一个名为 person 的 Person 对象，调用其 sayHello 方法，输出 Hello, my name is Tom and I am 18 years old.。