使用TS开发小程序中遇到的问题

唐宋xy
本文介绍了使用TS开发小程序中遇到的问题相关内容,对大家解决问题具有一定的参考价值,需要的朋友们一起学习吧!

在使用ts开发小程序的过程中,遇到了一些开发工具和关于ts的使用上的一些问题,并记录解决方法

1. ts开发过程中类型指定问题 Type 'number | undefined' is not assignable to type 'number' 例如: const c: number = statistics.getLikeCount()

这样的类型指定是不允许的,提示后面返回值有可能是undefined,所以不能直接指定为number,所以需要考虑到undefined类型

解决方法: const c: number = statistics.getLikeCount() || 0  – 这样即可 或

const c = statistics.getLikeCount()
let c2 = c == null ? c : 0

2. 微信开发者工具保留控制台日志

在使用ts编译为js的过程中,有时候会出现一些错误,但是默认的微信开发者工具会直接清除控制台的日志,所以根本看不见问题在哪里

解决方法: 控制台-齿轮-presever log 控制台日志

3. ts开发小程序中设置data值

js版本设置data中的数据的语法:

this.setData({})

但是在ts中,这样写的话,会一直会有报错,表示可能会设置undefined值到data中,所以需要指定设置的data值为非空,才可以通过编译 解决方法:

//第一种方法:  在设置值的时候,加上!标示非空的数据
this.setData!({}) 
// 第二种方法:在上这一行上面加上`//@ts-ignore` 表示跳过ts检查, 注意:前面的// 是需要的
//@ts-ignore
_this.setData({ 
})

4. 在js中获取wxml中的data- 的数据

在小程序的wxml中好像是无法通过定义的方法传递参数,所以需要借助到一个属性: data-

例如:

<image src="..." bindtap="showVideoInfo" data-arrIndex="{{index}}"></image>

需要向showVideoInfo()方法传递参数,则需要通过data- 来传递参数,后面的arrIndex是自定义的,不过需要注意的是:在js中获取的时候,后面自定义的标识符必须要通过小写来获取

例如获取数据:

showVideoInfo(e: any) {
   // 获取到页面定义的索引,后面的自定义属性必须是小写
   const index: number = e.target.dataset.arrindex
 }

5. 设置页面的整体背景色

如果需要在wxss中设置当前页面的整体的背景色或者其他的设置,那么直接设置最外面的view属性是不合适的,这样只能设置这个view那么大的背景色,所以直接通过设置page的样式即可,代表当前页面

page {
  background-color: #000;
}

该文章版权属于唐宋xy
摘录自:https://blog.csdn.net/weixin_42054155/article/details/101112758

这篇关于使用TS开发小程序中遇到的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!