笔记
- 问题
- Parameter ‘xxx’ implicitly has an ‘any’ type的解决
- ts ref定义数组,数组遍历报错=>类型“never”上不存在属性“xx”
- ts项目computed定义数据
- Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.
- 函数-可选参数
- 一个函数没有返回值,此时在 TS 的类型中,应该使用 void 类型
- vue3+ts+setup,一键返回顶部
问题
Parameter ‘xxx’ implicitly has an ‘any’ type的解决
这句话翻译过来就是参数暗指是any类型
解决:tsconfig.json添加"noImplicitAny": false,
或者 “strict”: true,改为false
{"compilerOptions": {"strict": false, //<---或者修改这个"noImplicitAny": false // <-----}
}
ts ref定义数组,数组遍历报错=>类型“never”上不存在属性“xx”
const list= ref<transferListItem[]>([]);
//原先是ref([]);报错的,改成上面就行了
ts项目computed定义数据
//重点WritableComputedRef
const data:WritableComputedRef<transferListItem[]> = computed({get() {return leftData.value},set(newValue) {leftData.value=newValue}})import { computed, type WritableComputedRef } from 'vue'// 验证通过const textvalue: WritableComputedRef<string> = computed({get() {return store.textvalue},set(newValue: string) {return store.changeTextvalue(newValue)}})
Getting a value from the props
in root scope of <script setup>
will cause the value to lose reactivity.
报错内容翻译为 从’ setup() ‘的根范围的’ props '中获取一个值将导致该值失去反应性
这样翻译下来应该就能明白什么意思了,就是我们从props中获取父组件传递数据的时候,不管父组件传递的是不是响应式的数据,在接收的时候要把数据转换为响应式的
//改为这种格式即可const {option } = {...props }//举个例子:
let {leftBtnText,rightBtnText,leftTitleText,rightTitleText,placeholderLeft,placeholderRight } = { ...props}
函数-可选参数
// 可选参数:在可选参数名的后面添加 ?(问号)
function mySlice(start: number, end?: number): void {console.log('起始索引:', start, '结束索引:', end)
}
一个函数没有返回值,此时在 TS 的类型中,应该使用 void 类型
- 不写return
- 写return ,但是后面不接内容
- 写return undefined
// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}
// 如果指定 返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {// 此处返回的 undefined 是 JS 中的一个值return undefined
}
vue3+ts+setup,一键返回顶部
<div class="anchor-point wh" ref="wrapper" @scroll="onScroll"></div>//返回到顶部function backTo(){document.querySelector('.anchor-point').scrollTo({top:0,behavior:'smooth'})}