ts中接口和的使用和作用封装

(function () {
    // 接口是一个类,
    // 定义一个类中应该包含那些属性和方法,
    // 同时接口也可以当成类型声明去使用
    // 接口是可以重复声明的 合为类的全部。
    // 接口可以在定义类的时候去限制类的结构,
    // 接口中的属性都不能有实际的值
    // 接口只定义对象的接口,而不考虑实际值,
    // 在接口中所有的方法都是抽象方法
    interface myInter {
        name: string

        sayHello(): void
    }

    interface myInter {
        age: number
    }

    class Cat implements myInter {
        name: string
        age: number

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

        sayHello() {
            console.log(`${this.name}(${this.age})跟你打了招呼,苗喵喵`)
        }
    }

    let cat = new Cat('钢弹', 2)
    cat.sayHello()

})()

参考视频:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=19&spm_id_from=pageDriver

ts中封装的使用

(function () {
    //简化用法
    class Person {
        constructor(public  name: string, public age: number) {}
    }
    let person = new Person('孙悟空',19)
    console.log(person.name,person.age)

    //    set get
    class Cat {
        constructor( private _name:string) {}
        get name():string{
            console.log('get方法执行了。。')
            return this._name
        }
        set name (value:string){
            this._name = value
        }
    }
    let cat  = new Cat('钢弹')
    cat.name = '卢比'
    console.log(cat.name)
})()

遇到了问题
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue3和TypeScript封装axios,可以按照以下步骤: 1. 安装axios和@types/axios: ```bash npm install axios @types/axios --save ``` 2. 在src目录下新建api目录,创建api.ts文件,定义全局的axios实例: ```typescript import axios, { AxiosInstance, AxiosRequestConfig } from 'axios' const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) // 请求拦截器 service.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送请求之前做些什么 return config }, (error: any) => { // 对请求错误做些什么 Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( (response: any) => { // 对响应数据做点什么 return response.data }, (error: any) => { // 对响应错误做点什么 return Promise.reject(error) } ) export default service ``` 3. 在api目录下创建一个api接口文件,定义所有的接口: ```typescript import service from './api' export const getTodoList = () => { return service.get('/todo/list') } export const addTodo = (data: any) => { return service.post('/todo/add', data) } export const updateTodo = (data: any) => { return service.post('/todo/update', data) } export const deleteTodo = (id: number) => { return service.post(`/todo/delete/${id}`) } ``` 4. 在组件调用api接口: ```typescript import { defineComponent } from 'vue' import { getTodoList } from '@/api/api' export default defineComponent({ setup() { const fetchTodoList = async () => { try { const res = await getTodoList() // 处理数据 } catch (error) { // 处理异常 } } return { fetchTodoList } } }) ``` 这样就完成了axios的封装使用。需要注意的是,由于Vue3使用了Composition API,所以定义的组件需要使用`defineComponent`函数。另外,由于TypeScript的类型检查,需要在api接口定义每个接口的参数类型和返回类型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值