#一、【TS】项目中常用到的类型声明

七种数据类型

 const num: number = 999;
 const str: string = 'asd';
 const bol: boolean = true;
 const nul: null = null;
 const undefin: undefined = undefined;
 const sym: symbol = Symbol('1');
 const big: bigint = 12n;

对象

注意属性的顺序： 只读类型 -> 必选属性 -> 可选属性 -> 不确定属性

interface IPerson {
    readibky id: string,
    name: string,
    age?: number,
    [propName:string]:unknown  // 其他不确定的任意个属性
}

cost person:IPerson = {
   id: '1',
   name: '张三',
   age: 12,
   say: function() {} 
}

接口继承

interface Modal {
    color: string
}
interface lightM extends Modal {
    opacity: number
}
 const lm:lightM = {
     color: 'red',
     opacity:0.4
 }

使用泛型声明对象结构（常用）Record<string,unknown>

const person2: Record<string, unknown> = {
    id: '1', 
    name: '张三',
}

数组

第一种形式：类型+[]

const persons1: string[] = ['张三', '李四', '王五']
const ages2: number[] = [1, 2, 3]
// 联合类型
const person3:(string | number)[] = ['张', 3]

数组

第二种形式：使用泛型Array<类型>

const persons2: Array<string> = ['张三', '李四', '王五']
const ages2: Array<number> = [1, 2, 3]
// 联合类型
const persons4: Array<string | number> = ['张', 3]

对象数组

interface PersonT {
    name: string,
    age: number
}
coont person5:PersonT[] = [{name:'wukewu,age:18}]
const person6:Record<string,number> = [{name:'wukewu,age:18}]

元组

已知长度和数组各项值类型的数组（严格的数组）
const tup1: [string, number] = ['hello', 0]
const tup2: [string, number] = ['hello', 0, 3] // 报错。源具有 3 个元素，但目标仅允许 2 个。

函数

// 没有返回值
function say1():void {}
// 返回字符串
function say2():void:string {}
// 有入参
function say3(name:string) :string {
    return name
}
// 无法结束的函数，如抛出异常、死循环
function say4():never {
    throw new Error('异常')
}

枚举

-   实际项目中经常会有根据不同状态展示不同文字的需求，通常状态都是固定的几种
-   使用枚举声明有意义的单词，代替没有意义的数字（减少魔法数字）
enum IStatus {
    Success = 0,
    Error = 1,
    Ing = 2
}
const defultSta:number = 0
if(default === IStatus.Success) {
    console.log('成功的操作');
}

也可以使用类似枚举的方法，将状态都列出来

type Status = 'Success' | 'Error'
const defaultSta1:Status = 'Success'

二、Vue中Provide的使用

// 在父组件注入后，子组件就可以用，用于父子组件的传值
// 引入
import {Vue,Inject,Provide,Component} from 'vue-property-decorator'
// 一、父组件提供（Provide）
@Provide() commonProvide = {
    rules:string => {
    
    },
    refreshHome:():void => {
        this.initHome()
    }   
}
// 子组件注入
@Inject commonProvider
this.commonProvider.refreshHome()

二、Vue中eventBus

// 我这项目本身是没有集成eventBus，然我自己集成了一个
// 一、创建一个eventBus文件，代码如下
import Vue from 'Vue'
export default new Vue
// 然后向Vue的eventBus正常使用即可
import Bus from '@src/utils/'
Bus.$emit('',a,b,c)
Bus.$on('',(a,b,c) => {
})
// 注意：如果是三兄弟传值用的是eventBus,要避免兄弟间传值的时候重复触发的问题(如果想要用bus 来进行页面组件之间的数据传递，需要注意亮点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。)
beforDestroy() {
    Bus.$off('')
}

三、Vue中minxins（混入）

// 引入要混入的代码
import myMixins '@src/mixins'
@Component({
    name: 'home',
    mixins: [myMins],
    componets: {}
})

四、swiper

// 坑一、 时隔四个月我又来踩坑了，我这个项目需求是在用户购买完东西后，值更新当前的购买状态，其余的东西不更新，在之前的做法是我更新了所有对象的值，相当于重新传来一个对象进去，然后再执行销毁mySwiper.destroy(true),这就导致整个轮播图重新渲染，
（!Object.keys(this.mySwiper.lengtg) && this.initSwiper())
// 之前我们的操作思路是操作原生的dom的，我们换一个思路，不操作dom，我们可以更新他的样式，来改变状态

// 坑二、 swiper点击事件失效（解决方法:可以用事件代理）
    // 获取当前的点击事件对象
    const dom = ev.target
    // 对点击的事件对象做过滤
    if(['rightBuy','img','rightUse',].includes(dom.className)) {
        // 表示按钮上绑定的数据集 （data-开头的属性）
        let index = +dom.dataset.index || 0
    }

四、拉起支付

// 1、创建一个支付文件去调客户端的支付方法
// 2、调接口，拉起客户端收银台