关于 vue 中写 ts 问题

[dxcqcv]

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)

[Vogan]

是 event 噢

[dokodream]

any

[dxcqcv]

@Vogan 是啊，怎么定义 ts ？

[ignatiusk]

建议你先学 ts

[keepfool]

https://www.zhihu.com/question/310485097/answer/591869966
如果要上 TS，请等待 vue3，vue2 用 TS 各种蹩脚

[dxcqcv]

@ignatiusk 当然是学过了

[dxcqcv]

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 = "放下"
}

写成这样不报错了，但感觉不太正规

[duan602728596]

event 类型应该是 InputEvent 吧，hook 还没研究。

[islxyqwe]

你这 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 }}

[islxyqwe]

一定要操作 DOM 的话，就必须自己断言 DOM 类型了，可以先 F12 看看获取的是什么类型，不然就只能 any 大法。
除了 canvas 之类的，应该没有什么特别需要直接操作 DOM 的

[dxcqcv]

@islxyqwe 每个列表的收起放下是动态生成的，动态生成 data 属性不会双向绑定，只能暂时先操纵 dom

[yaphets666]

你自己也知道不正规了...请参考楼上兄弟的写法. mvvm 框架中写代码基本是不接触 DOM 的

[dxcqcv]

@yaphets666 我是指这样的 ts 类型，并不是 dom 操作

[doommm]

第一个问题，vue-class-component 的文档中有说明 https://class-component.vuejs.org/guide/class-component.html#data

[islxyqwe]

@dxcqcv 动态生成的，说明内容也是状态，把内容都放到一个数组里再把收起放下逻辑封装成组件不就行了

[dxcqcv]

@doommm 我的意思是用了 data 后如何给 data 中的属性加 ts

[dxcqcv]

@islxyqwe 是可以，但我只是想知道这个 @click 中的 event 怎么定义 ts，我这个只是一个 demo

[islxyqwe]

@dxcqcv 事件使用的接口可以查 MDN，也可以打印出来 F12 看一下类型。一般 click 事件的接口使用的是 MouseEvent。

[dxcqcv]

@islxyqwe 现在的问题是 vue 里的 event 混杂了很多东西，单纯的 ts 无法推导，需要各种断言，感觉很不规范

[KuroNekoFan]

用 as 没问题，一个 object 没必要纯净，duck type is fine

[mufeng]

vue 2 写 ts 基本上类型推到就是废的

[gjquoiai]

https://blog.rexskz.info/issues-in-typescript-vue-component-lib.html

[shadeofgod]

handleCollapse<HTMLInputElement>(e: Event ) {}

[shadeofgod]

另外一个问题建议看文档 https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

[xiaojie668329]

赋值为 undefined 等于没赋值吧，可以 foo! 这样写告诉编译器这个变量将由 vue 进行初始化。

target. parentElement 不一定存在啊，所有的元素查找都可能为 null，你确定它一定存在，可以用类型断言。
简洁的写法：target.parentElement! 表示 parentElement 不为空。