ts接口基础用法

文章介绍了TypeScript中的接口概念,包括如何定义接口、可选属性、只读属性的用法,以及如何通过接口定义函数。接口用于确保值的结构符合特定契约,允许有额外属性而不影响兼容性,并提供了类型安全的机制。
摘要由CSDN通过智能技术生成

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

先简单看个例子

interface User {
  name: string;
  age: number
}
let user:User = {name: 'fufu'} //Error

当我们使用接口定义结构时,如果声明的变量接口不同于接口,那就会报错。这里的不同于指的是必须含有接口定义的属性,不多不少。

interface User {
  name: string;
  age: number
}
let user:User = {name: 'fufu', age: 20} // ok

可选属性

但是我们时常定义完成后,并不是每次都能够拥有某个属性的,所以我们可以定义一个可选属性

interface User {
  name: string;
  age?: number
}
let user:User = {name: 'fufu'} // ok

绕开多余属性检查

很多时候,我们只需要满足我们接口定义的属性即可,不在意是不是存在多余的属性,实现的方式有三个:

1. 使用类型断言

interface User {
  name: string;
  age: number
}

let user:User = {name: 'fufu', age: 20, love: 'love' } as User

2. 添加索引签名

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

let user:User = {name: 'fufu', age: 20, love: 'love' }

3 利用类型兼容性


interface User {
  name: string;
}
const getVegetables = ({ name }: User) => {
  console.log(name);
  return name;
};
 
const user = { name: "fufu", size: 12 };
getVegetables(user);

上面的函数里面我们要求是需要一个User类型的对象当作参数,但是我们随机定义了一个包含User类型属性的普通对象后,赋值给变量再当作参数传递就通过了校验。

是因为直接将对象字面量传入函数,和先赋给变量再将变量传入函数,这两种检查机制是不一样的,后者是因为类型兼容性。简单地来说:如果 b 要赋值给 a,那要求 b 至少需要与 a 有相同的属性,多了无所谓。

只读属性

有时候,我们只希望某些属性是只读的,不能被随便修改,这个时候我们使用readonly 即可

interface User {
  readonly name: string;
}
let user:User = { name: "fufu" };
user.name = 'dandan' //Error

定义函数

接口除了用来定义对象外,还可以用来定义函数。

// 该接口定义了一个函数的参数个数,类型以及返回值。
interface AddFunc {
  (num1: number, num2: number): number;
}
let add:AddFunc = (n1:number, n2:number) => n1 + n2

你应该注意到了,实际定义函数的时候,名字是无需和接口中参数名相同的,只需要位置对应即可

偷了一张图片总结:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Axios来在Vue 3和TypeScript中调用后端接口。首先,确保你已经安装了Axios依赖,你可以通过运行以下命令来安装: ``` npm install axios ``` 接下来,在你的Vue组件中,你可以导入Axios并使用它来发送HTTP请求。在你的脚本部分,添加以下行: ```typescript import axios from 'axios'; // ... axios.get('/api/endpoint') .then(response => { // 处理成功响应 }) .catch(error => { // 处理错误响应 }); ``` 这是一个简单的示例,使用了Axios的GET方法来发送一个请求到`/api/endpoint`。你可以根据需要使用其他HTTP方法,比如POST、PUT、DELETE等。 如果你需要在请求中发送数据,你可以将数据作为第二个参数传递给Axios方法。例如,使用POST方法发送数据的示例: ```typescript axios.post('/api/endpoint', { data: 'example data' }) .then(response => { // 处理成功响应 }) .catch(error => { // 处理错误响应 }); ``` 这里的第二个参数是一个包含待发送数据的对象。 同时,你还可以为Axios添加全局配置,比如设置请求头或拦截器等。你可以在Vue应用的入口文件中进行配置,例如在`main.ts`文件中: ```typescript import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; // 设置基础URL axios.defaults.baseURL = 'https://api.example.com'; // 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 处理请求错误 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 处理响应错误 return Promise.reject(error); }); createApp(App).mount('#app'); ``` 这里的示例设置了基础URL,并添加了请求和响应拦截器,你可以根据需要进行修改。 这就是使用Axios在Vue 3和TypeScript中调用后端接口的基本方法。你可以根据你的具体需求进一步扩展和优化代码。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值