Vue3.2 + TS 组合式API强类型支持

伊路顺峰 2023-03-28 原文

一开始使用TS不太习惯，但是用了一段时间，发现有类型的支持，书写起来真是爽歪歪，下面介绍几个TS初步上手时解决的类型支持的问题
1、父子组件通过prop传参，在子组件中强化类型支持
父组件向子组件传值，子组件通过 defineProps接收值，有两种方式可以强化类型：
1.1、在子组件中通过PropType 修饰，并传入泛型，这时候会发现，使用的时候写一个点，后面的属性就提示出来了

image.png

1.2、还可以定义一个type，在 defineProps 传入这个泛型type：

image.png

另外补充一下：如果要设置默认值需要使用withDefaults:

type Props = {
  dataInfo?: DataInfo;
};
// const props = defineProps<Props>();
withDefaults(defineProps<Props>(), {
  dataInfo: ()=> {return {title: '默认title',id: '默认值id'}}
})

2、vuex4 在项目中使用类型支持

image.png

用代码简单实现了一个改变登录状态的小demo
父组件切换登录状态，子组件更新登录状态

123123.gif

完整代码：
store->index.ts 文件

import { createStore, Store } from "vuex";

//从vue 中引入一个 InjectionKey 
import {InjectionKey} from 'vue'

//使用全局唯一的值创建一个injectionKey
export const injectionKey: InjectionKey<Store<State>> = Symbol()

export type State = {
    isLogin: boolean
}

export default createStore({
  state: {
    isLogin: false,
  },
  mutations: {
    changeLoginState(state, payload) {
        state.isLogin = payload
    },
  },
});

main.ts 文件

import { createApp } from 'vue'
import App from './App.vue'
import store, { injectionKey } from './store'

//插件安装时 作为参数传入 injectionKey
createApp(App).use(store, injectionKey).mount('#app')

Child.vue 文件

<template>
  <div style="background-color:#42b983;">
    <h2>这是子组件</h2>
    <h3>{{ dataInfo?.title }}</h3>
    <h3>id: {{ dataInfo?.id }}</h3>
    <h4>当前登录状态：{{isLogin ? '已登录' : '未登录'}}</h4>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps, PropType, toRefs } from "vue";
import { useStore } from "vuex";
import { injectionKey } from "../store";
export interface DataInfo {
  title: string;
  id: string;
}
//在组件中使用的时候 传入 injectionKey
const store = useStore(injectionKey)
const isLogin = computed(()=> store.state.isLogin)
const props = defineProps({
  dataInfo: Object as PropType<DataInfo>,
});
const { dataInfo } = toRefs(props);
</script>

App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
import Child, { DataInfo } from "./components/Child.vue";
import { reactive } from "vue";
import { useStore } from "vuex";
import { injectionKey } from "./store";

const store = useStore(injectionKey);

let state = reactive<{ dataInfo: DataInfo }>({
  dataInfo: { title: "这是标题", id: "123132123" },
});

const login = () => {
  store.commit("changeLoginState", true);
};

const logout = () => {
  store.commit("changeLoginState", false);
};
</script>
<template>
  <div style="background-color: #ffccff; width: 400px; height: 400px">
    <h2>这是父组件</h2>
    <button @click="login">登录</button>
    <button @click="logout">退出</button>
    <child :data-info="state.dataInfo"></child>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

有关Vue3.2 + TS 组合式API强类型支持的更多相关文章

ruby - Infinity 和 NaN 的类型是什么？ - 2
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？最佳答案您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
ruby - 检查方法参数的类型 - 2
我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？最佳答案使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)
ruby-on-rails - ActionController::RoutingError: 未初始化常量 Api::V1::ApiController - 2
我有用于控制用户任务的Rails5API项目，我有以下错误，但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目，以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc
ruby - Ruby 有 `Pair` 数据类型吗？ - 2
有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？最佳
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
ruby-on-rails - Mandrill API 模板 - 2
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2
我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

Vue3.2 + TS 组合式API强类型支持

有关Vue3.2 + TS 组合式API强类型支持的更多相关文章

随机推荐