前端知识点---前端里的接口

文章目录

- 1. 接口（Interface）作为对象的类型定义：
- - ① 接口是对象的模版, 类也是对象的模版可以定义对象的属性跟类型
  - - 1. 接口是对象的模板：
    - 2. 类是对象的模板
  - ②类可以被具体实现可以new一个类, 接口只能用来定义类型接口没法被具体实现没法new一个
- 2. 接口（API Interface）作为服务端交互的接口：
- 3. 总结：

1. 接口（Interface）作为对象的类型定义：

① 接口是对象的模版, 类也是对象的模版可以定义对象的属性跟类型

1. 接口是对象的模板：

接口就像是一张纸上的设计图，它描述了一个对象应该具备什么功能和属性，但它并没有告诉你具体怎么做。接口只是定义了名字和类型，没有具体的内容。

比如，你设计一个"动物"的接口，告诉别人这个动物需要有name和sound()，但并没有说明怎么发出声音。

interface Animal {name: string;  // name是一个字符串类型的属性sound(): void;  // sound是一个方法，具体的实现由具体的动物来做
}

这个接口只是告诉你，“每个动物都应该有名字和发出声音的功能”。它是一个蓝图，别人可以根据这个蓝图来实现一个具体的类。

2. 类是对象的模板

类就像是工厂，它不仅定义了对象应该有哪些属性和方法，还给出了具体的做法，就是属性怎么初始化，方法具体是怎样实现的。

比如，你有一个Dog类，它按照接口Animal的设计来实现具体的功能。Dog类不仅定义了名字，还定义了狗怎么叫。

class Dog implements Animal {name: string;constructor(name: string) {this.name = name;}sound() {console.log("Woof!");}
}const dog = new Dog("Buddy");
dog.sound();  // 输出: Woof!

Dog类给出了name属性的具体做法（用constructor初始化名字），
Dog类实现了sound()方法，具体告诉狗怎么叫（打印“Woof!”）。

其中name = this.name的解释:

想象你在制作一张身份证，你有一个模板，这个模板告诉你身份证应该有姓名，年龄，性别等信息。你每次做一个身份证时，都会用这个模板来填写这些信息。

类是模板（模具）
类就像是身份证的模具，它定义了每个身份证（对象）应该具备的内容（属性）

class IDCard {name;  // 姓名age;   // 年龄constructor(name, age) {this.name = name;  // 把你传入的姓名给当前身份证对象this.age = age;    // 把你传入的年龄给当前身份证对象}
}

这里，IDCard 类是身份证的模板，模板上定义了“姓名”和“年龄”，但是还没有填写具体内容。

this 代表当前身份证
在构造函数里，this 代表当前正在制作的身份证。每次你用 new IDCard() 创建一个新的身份证时，this 就是那个新的身份证。
this.name = name; 是什么？
当你使用 new IDCard(“张三”, 30) 创建一个新的身份证时，“张三” 和 30 是你给这张身份证提供的信息。

this.name 代表的是当前身份证的名字（每个身份证都有名字）。
name 是你传给构造函数的参数，就是你传进来的名字（比如 “张三”）。
this.name = name; 就是把你传进来的名字（“张三”）写到当前身份证的名字这一栏。
例子：

class IDCard {name;  // 姓名age;   // 年龄constructor(name, age) {this.name = name;  // 这个是把"张三"填到身份证的名字栏this.age = age;    // 这个是把30填到身份证的年龄栏}
}const myCard = new IDCard("张三", 30);  // 创建一张身份证，名字是"张三"，年龄是30
console.log(myCard.name);  // 输出: 张三
console.log(myCard.age);   // 输出: 30

总结：
this 就是“当前身份证”。
name 是你传入的值（比如 “张三”）。
this.name = name; 把你传进来的名字 “张三” 填到“当前身份证”的名字栏。

②类可以被具体实现可以new一个类, 接口只能用来定义类型接口没法被具体实现没法new一个

类

class Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}const person1 = new Person("Alice");
person1.sayHello();  // 输出: Hello, my name is Alice

接口

interface Person {name: string;sayHello(): void;
}// 不能这样实例化接口
// const person1 = new Person();  // 错误，不能实例化接口class PersonImpl implements Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}const person1 = new PersonImpl("Alice");
person1.sayHello();  // 输出: Hello, my name is Alice

2. 接口（API Interface）作为服务端交互的接口：

在前端开发中，“接口”也可以指 API 接口，即前端与后端之间通过 HTTP 请求（如 GET、POST）进行数据交换的约定和规则。API 接口通常是通过 HTTP 协议暴露的 URL，前端通过发送请求（通常是 AJAX 请求）向后端接口发送数据或获取数据。

输入https://api.bilibili.com/x/web-interface/archive/stat?bvid=BV视频号

在这里插入图片描述
可以看到观看人数, 点赞数等数据

示例（API 调用）：

fetch('https://api.example.com/user').then(response => response.json()).then(data => console.log(data));

在这个例子中，https://api.example.com/user 是一个后端提供的 API 接口，前端通过 fetch 请求访问该接口获取用户数据。

API 接口通常有以下几个部分：

URL：API 接口的地址，通常包含路径和查询参数。
请求方法：如 GET、POST、PUT、DELETE，表示对数据进行的操作。
请求头：用来携带身份认证信息或其他请求设置。
请求体：在进行 POST 或 PUT 请求时，发送给服务器的数据。
响应：从服务器返回的数据，通常是 JSON 格式，前端可以通过响应数据进行进一步处理。

3. 总结：

接口作为类型定义：用于指定对象的结构和类型，确保代码类型安全，特别是在 TypeScript 中使用。
API 接口：指前端与后端进行数据交互的接口，通过 HTTP 请求来获取或发送数据。
在前端开发中，接口（无论是类型定义还是 API 调用）都是非常重要的概念，它们帮助定义如何处理数据和如何与其他系统进行交互。