vue3中ts定义对象,pinia中使用ts定义状态对象

引入

用惯了js,突然使用ts属实有点不习惯,这里介绍一下自己在vue3中使用ts初始化内容的一些小技巧

reactive中使用数组

例如下面所示的代码,我们就像写js代码一样定义一个空数组,但是ts自动推断的类型确是 never[] ,这样我们就给数组添加元素

const userInfo = reactive({
  name:"",
  age:18,
  likes:[]
});

userInfo.likes.push("game")

请添加图片描述

我们使用数组对象结合泛型即可解决这个问题,如下所示:

  • 可以看到代码提示推断出的类型是string数组,元素添加也完全没问题
likes:new Array<string>()

请添加图片描述

reactive中定义对象类型

就以上面的案例扩展,我们完全可以将userInfo抽象为一个接口,来规范各个属性,如下所示:

  • 这样使用,数组添加元素也完全没问题
interface IUserInfo {
  name: string;
  age: number;
  likes: Array<string>;
}

const userInfo = reactive<IUserInfo>({
  name: "",
  age: 18,
  likes: [],
});

userInfo.likes.push("game");

pinia中定义状态对象

如下所示,我们定义一个counter的状态管理,并且使用对象进行初始化

import { defineStore } from "pinia";
interface ICounterStore {
  counter: number;
  messages: Array<string>;
  map: Map<string, string>;
}

// 定义一个Store,名称要保证全局唯一
export const useCounterStore = defineStore("counterStore", {
  // 全局的状态
  state: (): ICounterStore => {
    return {
      counter: 0,
      messages: new Array<string>(),
      map: new Map<string, string>(),
    };
  },
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值