这是一个创建于 2122 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 不为空。 |
Select Language