2、变量定义为 undefined,无法被 Vue 进行数据监控
@Component
class MyComp extends Vue {
foo = undefined //无效
bar = null //有效
data() {
return {
baz : undefined // 有效
}
}
}
如果有需要在 data hooks 里定义 ts,应该怎么定义?比如需要定义 baz 的类型
handleCollapse(e: HTMLElement ) {
// const targetEl = e.target as HTMLInputElement
const targetEl = e.target
const contentEl = targetEl.parentElement.nextSibling
@click 事件中的 e 应该怎么定义?试了都不行,
(property) Node.parentElement: HTMLElement | null
Object is possibly 'null'.Vetur(2531)
1
Vogan 2020-03-04 11:25:58 +08:00
是 event 噢
|
2
dokodream 2020-03-04 11:27:21 +08:00
any
|
4
ignatiusk 2020-03-04 11:30:33 +08:00
建议你先学 ts
|
5
keepfool 2020-03-04 11:42:21 +08:00
https://www.zhihu.com/question/310485097/answer/591869966
如果要上 TS,请等待 vue3,vue2 用 TS 各种蹩脚 |
7
dxcqcv OP handleCollapse(e: MouseEvent ) {
const targetEl = e.target as HTMLInputElement const contentEl = targetEl.parentElement?.nextSibling as HTMLElement if(contentEl.style.display === "none") { contentEl.style.display = "block" targetEl.innerHTML = "收起" } else { contentEl.style.display = "none" targetEl.innerHTML = "放下" } 写成这样不报错了,但感觉不太正规 |
8
duan602728596 2020-03-04 13:15:29 +08:00
event 类型应该是 InputEvent 吧,hook 还没研究。
|
9
islxyqwe 2020-03-04 13:31:18 +08:00
你这 vue 用起来感觉还不如用 jquery,都有了 MVVM 还要手动调用副作用方法改变 DOM,先提取出状态来啊
比如 (template) <div class="collapse"> <div class="label" @click="statusA = !statusA ">{{statusA ?'收起':'放下'}}</div> <div class="content" :style="statusA ?'display:none':'display:block'">blah blah blah</div> </div> (script) data(){return { statusA: false }} |
10
islxyqwe 2020-03-04 13:34:24 +08:00
一定要操作 DOM 的话,就必须自己断言 DOM 类型了,可以先 F12 看看获取的是什么类型,不然就只能 any 大法。
除了 canvas 之类的,应该没有什么特别需要直接操作 DOM 的 |
12
yaphets666 2020-03-04 13:39:01 +08:00
你自己也知道不正规了...请参考楼上兄弟的写法. mvvm 框架中写代码基本是不接触 DOM 的
|
13
dxcqcv OP @yaphets666 我是指这样的 ts 类型,并不是 dom 操作
|
14
doommm 2020-03-04 15:18:53 +08:00 1
第一个问题,vue-class-component 的文档中有说明 https://class-component.vuejs.org/guide/class-component.html#data
|
17
dxcqcv OP |
18
islxyqwe 2020-03-04 16:10:54 +08:00
@dxcqcv 事件使用的接口可以查 MDN,也可以打印出来 F12 看一下类型。一般 click 事件的接口使用的是 MouseEvent。
|
19
dxcqcv OP @islxyqwe 现在的问题是 vue 里的 event 混杂了很多东西,单纯的 ts 无法推导,需要各种断言,感觉很不规范
|
20
KuroNekoFan 2020-03-04 17:49:19 +08:00
用 as 没问题,一个 object 没必要纯净,duck type is fine
|
21
mufeng 2020-03-04 18:22:12 +08:00
vue 2 写 ts 基本上类型推到就是废的
|
22
gjquoiai 2020-03-04 20:14:40 +08:00
|
23
shadeofgod 2020-03-04 20:32:01 +08:00
handleCollapse<HTMLInputElement>(e: Event ) {}
|
24
shadeofgod 2020-03-04 20:36:56 +08:00
|
25
xiaojie668329 2020-03-04 21:25:01 +08:00 via iPhone
赋值为 undefined 等于没赋值吧,可以 foo! 这样写告诉编译器这个变量将由 vue 进行初始化。
target. parentElement 不一定存在啊,所有的元素查找都可能为 null,你确定它一定存在,可以用类型断言。 简洁的写法:target.parentElement! 表示 parentElement 不为空。 |