关于 vue 中写 ts 问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1761 天前的主题，其中的信息可能已经有所发展或是发生改变。

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)

25 条回复 • 2020-03-04 21:25:01 +08:00

Vogan

2020-03-04 11:25:58 +08:00

是 event 噢

dokodream

2020-03-04 11:27:21 +08:00

any

dxcqcv

2020-03-04 11:27:44 +08:00

@Vogan 是啊，怎么定义 ts ？

ignatiusk

2020-03-04 11:30:33 +08:00

建议你先学 ts

keepfool

2020-03-04 11:42:21 +08:00

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

dxcqcv

2020-03-04 11:44:41 +08:00

@ignatiusk 当然是学过了

dxcqcv

2020-03-04 11:48:14 +08:00

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

2020-03-04 13:15:29 +08:00

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

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

islxyqwe

2020-03-04 13:34:24 +08:00

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

dxcqcv

2020-03-04 13:37:46 +08:00

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

yaphets666

2020-03-04 13:39:01 +08:00

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

dxcqcv

2020-03-04 14:24:06 +08:00

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

doommm

2020-03-04 15:18:53 +08:00

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

islxyqwe

2020-03-04 15:35:00 +08:00

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

dxcqcv

2020-03-04 15:37:23 +08:00

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

dxcqcv

2020-03-04 15:40:23 +08:00

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

islxyqwe

2020-03-04 16:10:54 +08:00

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

dxcqcv

2020-03-04 16:32:56 +08:00

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

KuroNekoFan

2020-03-04 17:49:19 +08:00

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

mufeng

2020-03-04 18:22:12 +08:00

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

gjquoiai

2020-03-04 20:14:40 +08:00

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

shadeofgod

2020-03-04 20:32:01 +08:00

handleCollapse<HTMLInputElement>(e: Event ) {}

shadeofgod

2020-03-04 20:36:56 +08:00

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

xiaojie668329

2020-03-04 21:25:01 +08:00 via iPhone

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

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