Vue.js 与 TypeScript(1) :项目配置、props标注类型、emits标注类型

news2024/11/6 9:53:25

        像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全,TypeScript 还改善了开发体验和效率。

一、项目配置

1、在项目中添加typescript

        在使用 npm create vue@lates t创建项目时有是否添加typescript选项。

        如果没有在创建项目时添加也可以用下面的命令在已有的项目中添加:

  • npm install -D typescript 最新的稳定版本
  • tsc --init生成tsconfig.json文件

2、使用typescript时import报错问题

        在tsconfig.json配置文件中添加配置避免使用import时报错问题:

{
  "compilerOptions": {
    /* 
        这里省略了其他配置
     */
    "noImplicitAny": false,
    "allowJs": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "@": ["./"]
    }
  },
  // include也需要配置以下:
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

        import图片时报错解决方案:使用import的形式引入图片,ts无法识别非代码资源;但是js中这种写法是没有问题的。

        我们需要新建一个images.d.ts的文件,文件中声明这个module(格式如下),而且这个文件只能放置在tsconfig.json文件中的include属性缩配置的文件夹下。只有这样,这类文件和ts文件才能被ts编译。文件内容如下:

/* images.d.ts文件 */
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

        注意该文件存放的的位置

二、为组件的 props 标注类型

        为子组件的属性指定类型:

<script setup lang="ts">
const props = defineProps({
  foo: {type: String, required: true},
  bar: Number
})
</script>

<template>
  {{ foo }} - {{ bar }}
</template>

        在父组件中使用:

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
import {ref} from "vue";
// 这里不是数值类型将会报错
const number = ref(0);
</script>

<template>
  <type-script foo="A" :bar="number"></type-script>
</template>

        这被称之为“运行时声明”,因为传递给 defineProps() 的参数会作为运行时的 props 选项使用。然而,通过泛型参数来定义 props 的类型通常更直接:

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

        这被称之为“基于类型的声明”。编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。在这种场景下,我们第二个例子中编译出的运行时选项和第一个是完全一致的。

        基于类型的声明或者运行时声明可以择一使用,但是不能同时使用。我们也可以将 props 的类型移入一个单独的接口中:

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

        这同样适用于 Props 从另一个源文件中导入的情况。该功能要求 TypeScript 作为 Vue 的一个 peer dependency。

<script setup lang="ts">
import type { Props } from './foo'

const props = defineProps<Props>()
</script>

1、Props 解构默认值

        当使用基于类型的声明时,我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决:

<script setup lang="ts">
export interface Props {
  msg?: string
  labels?: string[]
}

// 为 Props提供默认值
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})
</script>

<template>
  {{ msg }} - {{ labels }}
</template>

        这将被编译为等效的运行时 props default 选项。此外,withDefaults 帮助程序为默认值提供类型检查,并确保返回的 props 类型删除了已声明默认值的属性的可选标志。

2、非 <script setup> 场景下

        如果没有使用 <script setup>,那么为了开启 props 的类型推导,必须使用 defineComponent()。传入 setup() 的 props 对象类型是从 props 选项中推导而来。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- 类型:string
  }
})

3、复杂的 prop 类型

        通过基于类型的声明,一个 prop 可以像使用其他任何类型一样使用一个复杂类型:

<script setup lang="ts">
interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps<{
  book: Book
}>()
</script>

        对于运行时声明,我们可以使用 PropType 工具类型:

<script setup lang="ts">
import type { PropType } from 'vue'

interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps({
  book: Object as PropType<Book>
})
</script>

<template>
  {{ book }}
</template>

        在父组件中使用:

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
import {reactive} from "vue";
// 会进行类型检查
const book = reactive({
  title: "A",
  author: "B",
  year: 2024
});
</script>

<template>
  <type-script :book="book"></type-script>
</template>

三、为组件的 emits 标注类型

        在 <script setup> 中,emit 函数的类型标注也可以通过运行时声明或是类型声明进行:

<script setup lang="ts">
/*
// 运行时
const emit = defineEmits(['change', 'update'])

// 基于选项
const emit = defineEmits({
  change: (id: number) => {
    // 返回 `true` 或 `false`
    // 表明验证通过或失败
  },
  update: (value: string) => {
    // 返回 `true` 或 `false`
    // 表明验证通过或失败
  }
})

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
*/
// 3.3+: 可选的、更简洁的语法
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()
</script>

<template>
  <button @click="$emit('change',1)">按钮1</button>
  <button @click="$emit('update','a')">按钮2</button>
</template>

        在父组件中使用:

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
// 点击按钮1触发,获取传递的参数
function change(args) {
  console.log(args);
}
// 点击按钮2触发,获取传递的参数
function update(args) {
  console.log(args);
}

</script>

<template>
  <type-script @change="change" @update="update"></type-script>
</template>

        类型参数可以是以下的一种:

  1. 一个可调用的函数类型,但是写作一个包含调用签名的类型字面量。它将被用作返回的 emit 函数的类型。
  2. 一个类型字面量,其中键是事件名称,值是数组或元组类型,表示事件的附加接受参数。上面的示例使用了具名元组,因此每个参数都可以有一个显式的名称。

        我们可以看到,基于类型的声明使我们可以对所触发事件的类型进行更细粒度的控制。若没有使用 <script setup>defineComponent() 也可以根据 emits 选项推导暴露在 setup 上下文中的 emit 函数的类型:

import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['change'],
  setup(props, { emit }) {
    emit('change') // <-- 类型检查 / 自动补全
  }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1795020.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

USB (1)

再看USB 其实回过头看USB 是可以和无线 有线(internet) 可以和PCIe 甚至AXI类比的 它们共通处在于都是communication 有限通信 有7层网络协议 在USB也是分层的 不同的协议,依赖的介质不一样 这就要求相应的Physical层处理 USB的physical层是基于Serdes的,所以有串并/并串的…

组装服务器重装linux系统【idrac集成戴尔远程控制卡】

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

内网安全--隧道技术代理技术

注:本文仅做技术交流,请勿非法破坏... 目录 项目: 1-Ngrok 用法 2-Frp 用法 3-Nps 用法 4-Spp 用法 工具: windows下: Proxifier(推荐~) Sockscap ccproxy Linux下: Proxychains 用法 http://t.csdnimg.cn/88Ew7 隧道技术&#xff1a;解决不出网协议上线的问…

ARM Linux 驱动开发学习之字符设备驱动开发

Linux 中的设备驱动程序是连接硬件设备和操作系统之间的重要桥梁&#xff0c;确保硬件设备能够在操作系统控制下正常工作。在 Linux 中&#xff0c;设备驱动主要分为三大类&#xff1a;字符设备驱动、块设备驱动和网络设备驱动。下面我将详细解释这三类驱动的特点、用途和区别。…

激活函数对比

激活函数 sigmoid / tanh / relu / leaky relu / elu / gelu / swish 1、sigmoid 优缺点 1) 均值!0&#xff0c;导致fwxb求导时&#xff0c;方向要么全正要么全负 可以通过batch批量训练来缓解 2) 输入值大于一定范围梯度就会消失 3) 运算复杂 2、tanh 优缺点 1) 均值0 2)…

To C道路越走越夯实,1688彻底变身了?

在偌大的电商市场&#xff0c;消费者都是专业的“掘宝者”&#xff0c;热衷于发现各种新奇商品和采购新通路。 拼多多、1688等平台也正是在这种情况下&#xff0c;成为消费市场的“宠儿”。其中&#xff0c;1688的发展路径较为独特&#xff0c;据天眼查&#xff0c;其为源头厂…

苍穹外卖笔记-07-菜品管理-增加、删除、修改、查询分页还有菜品起售或停售状态

菜品管理 1 新增菜品1.1 需求分析与设计1.2 代码开发文件上传新增菜品实现 1.3 功能测试 2 菜品分页查询2.1 需求分析和设计2.2 代码开发设计DTO类设计VO类Controller层Service层Mapper层 2.3 功能测试 3 删除菜品3.1 需求分析和设计3.2 代码开发Controller层Service层Mapper层…

Apple开发者证书创建完整过程

1.创建CSR文件: 打开钥匙串访问程序 选择从证书颁发机构请求 创建证书 保存CSR文件到桌面 成功如下: 开始创建证书: 选择

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。

SDXL终于有了足够好的 Openpose 和 Scribble 模型可以使用了。 xinsir 发布的Openpose 和 Scribble 模型质量相当好&#xff0c;尤其是 Openpose。不过只支持姿态不支持面部。 再加上前几天的 Anyline 线条预处理器和 Canny 模型。SDXL 的生态在发布快一年的时候成熟了。 模…

QA测试开发工程师面试题满分问答26: Cookie、Session、Token和JWT的定义、区别和使用场景

这是一个非常常见的面试题,需要全面掌握 Cookie、Session、Token 和 JWT 的定义和使用场景,以及它们之间的区别。下面是一个详细的满分回答: Cookie: 定义: Cookie 是一种存储在客户端(通常是浏览器)的小型文本文件,用于在客户端与服务器之间保持会话状态。使用场景: 常用于保存…

sqli-labs 靶场 less-5、6 第五关和第六关:判断注入点、使用错误函数注入爆库名、updatexml()函数

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 5 SQLI DUMB SERIES-5 判断注入点&#xff1a;1. 首先&#xff0c;尝试正常的回显内容&#x…

Halcon 双相机标定与拼图(一)

一、概述 最近有一个多相机标定的项目&#xff0c;大概是4个相机来标定&#xff0c;同一坐标系&#xff0c;然后拼接图&#xff0c;之前双相机标定的时候也大概看看&#xff0c;所以今天就找了那个halcon 案例多学一下&#xff0c;后面我打算做一个对位贴合的东西&#xff0c;…

FreeModBusRtu移植 --stm32L431RCT6(小熊派)

文章目录 前言一、移植前需要的工作二、修改点讲解1.串口中断2.定时器3.保持寄存器4.测试 总结 前言 最近需要做一个modbus485的传感器&#xff0c;主要是用来做从机。之前做过主机的是stm标准库&#xff0c;那这次做一个HAL的从机协议栈&#xff0c;方便大家直接获取数据。 移…

迈入智能新纪元:智慧机房运维系统引领行业变革

在数字化飞速发展的今天&#xff0c;机房作为信息时代的“心脏”&#xff0c;其稳定运行对于企业的业务连续性至关重要。然而&#xff0c;传统的机房运维模式面临着诸多挑战&#xff0c;如响应速度慢、故障定位难、资源浪费大等问题。智慧机房运维系统&#xff0c;它将以智能化…

裁判文书:司法公正的“名片”

在法治社会的建设中&#xff0c;裁判文书不仅是法院裁判活动的产物&#xff0c;更是司法公正的重要体现。今天&#xff0c;我们就来聊聊裁判文书上的那些知识&#xff0c;带大家走进这个充满法律智慧的领域。 一、什么是裁判文书&#xff1f; 裁判文书&#xff0c;是人民法院…

【乐吾乐2D可视化组态编辑器】在线使用,快速入门

一、在线使用 乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.com/ 二、步骤 本教程将带领你快速体验2D可视化编辑器的全流程开发。 1.创建图纸 进入2d编辑器主界面后&#xff0c;主界面最中心为图纸面板&#xff0c;默认为空图纸&#xff0c;在界面左侧为组…

Paperless-Ngx文档管理系统结合内网穿透实现随时远程搜索查阅文本

文章目录 前言1. 部署Paperless-ngx2. 本地访问Paperless-ngx3. Linux安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 前言 Paperless-ngx是一个开源的文档管理系统&#xff0c;可以将物理文档转换成可搜索的在线档案&#xff0c;从而减少纸张的使…

工业级物联网边缘网关解决方案-天拓四方

随着工业4.0时代的到来&#xff0c;越来越多的企业开始寻求智能化升级&#xff0c;以提高生产效率、降低运营成本并增强市场竞争力。然而&#xff0c;在实际的转型升级过程中&#xff0c;许多企业面临着数据孤岛、设备兼容性差、网络安全风险高等问题&#xff0c;这些问题严重制…

Google Guice超轻量级依赖注入容器

Google Guice是Goolge开源的一款超轻量级依赖注入容器&#xff0c;超轻量的特点主要体现在&#xff1a;可与其它依赖注入容器混合使用&#xff0c;例如和Spring/Spring Boot的IOC容器混合使用&#xff1b;不需要任何配置信息&#xff0c;只需要引入几个有限的依赖包即可以使用&…

容器化实践:DevOps环境下的容器交付流程

DevOps的兴起是为了应对市场和消费者对技术应用的不断增长的需求。它的目标是构建一个更快的开发环境&#xff0c;同时保持软件的高质量标准。DevOps还致力于在敏捷开发周期中提升软件的整体品质。这一目标的实现依赖于多种技术、平台和工具的综合运用。 结合容器化技术与DevO…