TS引用外部变量时@Props()括号里面到底要不要写类型

最新推荐文章于 2024-09-27 13:14:07 发布
最新推荐文章于 2024-09-27 13:14:07 发布
阅读量1.3k 收藏
点赞数
文章标签： ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45060976/article/details/109693412
版权
本文探讨了在Vue中使用@Props时，为何需要指定类型如`@Props(Boolean)xxx!:boolean;`。不指定类型会导致Vue将变量默认视为字符串，可能引发类型错误。解释了类型定义对于避免隐式类型转换和确保组件数据正确性的重要性。
摘要由CSDN通过智能技术生成

TS引用外部变量时@Props()括号里面到底要不要写类型

示例如下：

@Props() xxx!:boolean;

这种写法会造成bug。

应该写成:

@Props(Boolean) xxx!:boolean;

为什么呢？这里我们就得说一下括号里面的Boolean了：

  1. 括号里面的Boolean是在跟Vue说xxx的类型是Boolean（运行时的类型）

  2. 如果不写括号里面的Boolean，那么Vue就不知道xxx的类型是什么了，默认把xxx当作字符串来处理。

  3. 因此，当你给xxx传值时，Vue会自动的将其转化为字符串，而我们预期的xxx应该时Boolean，这就会出现BUG。

卡门726
关注
TypeScript报错信息表（备注）
Lee的博客
05-01 1万+
code 类型 英文描述 中文描述 1002 错误 Unterminated string literal. 未终止的字符串文本。 1003 错误 Identifier expected. 应为标识符。 1005 错误 '{0}' expected. 应为“{0}”。 1006 错误 A file cannot have a reference to itself. 文件不能引用自身。 1009...
vue+TypeScript构建第一个项目
Lee的博客
04-27 9954
安装项目 因为本机vue脚手架是2.0,webpack3.0版本所以本文只适用vue/cli2.0版本。 //新建项目 vue init webpack vue-ts 后面一系列路由，测试单元配置忽略。 //新建项目后我们安装ts npm install typescript ts-loader --save-dev //安装一下官方插件 npm i vue-class-c...
【Vue3】使用TS来声明 props 的类型
小安驾到的博客
07-04 778
使用TS来声明 props 的类型的几种常用方法
TS定义组件Props的类型与默认值
weixin_45155922的博客
11-26 1936
今天在开发中，突然想到，平时定义组件的props时，在引入了ts后，常用于定义他的类型或者默认值，看了一下官方文档，对组件props的定义提供了几种方法。用法3： 使用类型声明时的默认 props 值，vue官方为我们提供了。用法2：针对类型的 props声明，props 可以通过给。用法1：只定义默认值,直接使用defineProps就可以。传递纯类型参数的方式来声明。
Vue3通透教程 TS为组件的props标注类型
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 1833
当 Props 的类型比较复杂时，可以使用type或interface来定义类型。props: {profile: {},// 在这里使用 Props});
ts定义IProps类型，给Props（object类型的属性）赋值默认值的方式
weixin_41285537的博客
04-06 3911
ts定义IProps类型，给Props（object类型的属性）赋值默认值的方式
ts 模板库文件_在ts文件中使用模板引用变量的方法
weixin_33593741的博客
12-24 962
ViewChildimport{Component,ViewChild,AfterViewInit}from'@angular/core';//假设的。这里引入你用到的table组件类import{TableComponent}from'PrimeNG'@Component({selector:'app-xxx',templateUrl:'./xxx.component...
TS-引用类型
weixin_45636198的博客
06-01 1249
TS中的数据值分为原始值和引用值两种类型。原始值即最简单的数据，而引用值则是有多个值构成的复合对象。原始值和引用值的声明方式类似，都需要创建常量或变量，然后对其赋值。其不同之处是，在变量或常量保存之后，可以对这个值进行的操作有所区别。
ts学习笔记
叹之
12-15 1125
简介 TypeScript 是JavaScript 的超集，对js提供了类型标注，使得静态推断成为可能，让一些错误在运行之前就可以被诊断出来。 TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。 安装 // 全局安装 npm install -g typescript // 查看版本号 tsc -V 编译代码 // 使用ts编译xxx.ts文
export 和 export default 的差别
weixin_45664005的博客
03-17 267
export用于规定模块的对外接口，当外部文件需要使用该组件时，需要使用export输出。（可以用于输出变量、函数、类）export default 为默认输出，一个模块只能有一个，因此import导入时，因为唯一性不需要使用大括号。export default 可以任意指定输出名称，也可以不指定，import时可以用任意名称。export 必须指定输出名称，import输入时必须和输出名称一致或使用as关键字指定。export 可以有多个，import引入时需要使用大括号。
高级前端一面常考react面试题总结
beifeng11996的博客
12-15 599
setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，不会减少原来的状态。而replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。
vue3使用ts，父组件如何给子组件的props指定类型?
最是人间留不住，朱颜辞镜花辞树。
12-24 993
嘿嘿
Typescript 中引用全局变量
王永存
06-07 2901
在写ts的项目的时候可能会有一些window下的全局变量
TS的@prop传参和接受方式
chabaimgg的博客
09-15 463
【代码】TS的prop传参和接受方式。
vue + ts 项目中Prop的用法
热门推荐
zxl1990_ok的博客
01-28 1万+
要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet 首先安装： npm i -D vue-property-decorator @Prop(options: (PropOptions | Constructor[] | Constructor) = {}) @Prop装饰器接收一个参数，这个参数可以有三种写法： PropOptions ，包含以下选项：type(类型), required(必填), def...
vue ts使用Prop向子组件传值
pig_pig32的博客
03-05 2328
vue ts使用Prop向子组件传值 在父组件中想要给子组件传值，可以在子组件使用 :parentName(子组件通过@Prop获取该值的变量名)=‘parentName’（想要传的值），这样，在子组件里可以通过 @Prop({ default: “default value” }) parentName!: string;获取父组件传过来的值了。 父组件 <template> <div> <div class="parent"> <h
TS的用法
JankoY的博客
08-10 445
TypeScript 好处 类型提示：更智能的提示 编译时报错：还没运行代码就知道自己写错了 类型检查：无法点出错误的属 TypeScript 说明 @Prop prop数据类型声明 @Prop(Number) xxx:number | undefined // Prop 告诉 Vue xxx不是data 是prop // Number 告诉Vue xxx 运行时 是个number // xxx 是 属性名 // number | undefined 告诉TS xxx的编译时类型 @Component 装
组件传递数据——props（父传子）
weixin_46372993的博客
08-03 5921
props的用法（1）Parent组件：< template > < h3 > {{ message }} < Child /> //3、显示Child组件内容 < script > import Child from './Child.vue';//1、导入Child组件 export default {data() {return {Child } //2、注入Child组件 }
vue中props的默认写法
z1761419224的博客
04-13 521
vue中props的默认写法 props: { // 字符串 stringType: { type: String, default: () => '' }, // 数值 numberType: { type: Number, default: 0 } // 布尔值 booleanType: { type: Boolean, default: true } // 数组 arrayType: { type: Array, default: () =&
React组件props类型检测：使用prop-types详解
"本文主要探讨如何使用prop-types这个第三方库来对React组件的props中的变量进行类型检测，以此提升代码的稳定性和可维护性。在JavaScript的灵活性带来的问题背景下，文章通过生动的比喻，强调了类型检测的重要性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值