V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dxcqcv
V2EX  ›  Vue.js

关于 vue 中写 ts 问题

  •  
  •   dxcqcv · 2020-03-04 11:22:06 +08:00 · 5600 次点击
    这是一个创建于 1709 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    Vogan  
       2020-03-04 11:25:58 +08:00
    是 event 噢
    dokodream
        2
    dokodream  
       2020-03-04 11:27:21 +08:00
    any
    dxcqcv
        3
    dxcqcv  
    OP
       2020-03-04 11:27:44 +08:00
    @Vogan 是啊,怎么定义 ts ?
    ignatiusk
        4
    ignatiusk  
       2020-03-04 11:30:33 +08:00
    建议你先学 ts
    keepfool
        5
    keepfool  
       2020-03-04 11:42:21 +08:00
    https://www.zhihu.com/question/310485097/answer/591869966
    如果要上 TS,请等待 vue3,vue2 用 TS 各种蹩脚
    dxcqcv
        6
    dxcqcv  
    OP
       2020-03-04 11:44:41 +08:00
    @ignatiusk 当然是学过了
    dxcqcv
        7
    dxcqcv  
    OP
       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
        8
    duan602728596  
       2020-03-04 13:15:29 +08:00
    event 类型应该是 InputEvent 吧,hook 还没研究。
    islxyqwe
        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 }}
    islxyqwe
        10
    islxyqwe  
       2020-03-04 13:34:24 +08:00
    一定要操作 DOM 的话,就必须自己断言 DOM 类型了,可以先 F12 看看获取的是什么类型,不然就只能 any 大法。
    除了 canvas 之类的,应该没有什么特别需要直接操作 DOM 的
    dxcqcv
        11
    dxcqcv  
    OP
       2020-03-04 13:37:46 +08:00
    @islxyqwe 每个列表的收起放下是动态生成的,动态生成 data 属性不会双向绑定,只能暂时先操纵 dom
    yaphets666
        12
    yaphets666  
       2020-03-04 13:39:01 +08:00
    你自己也知道不正规了...请参考楼上兄弟的写法. mvvm 框架中写代码基本是不接触 DOM 的
    dxcqcv
        13
    dxcqcv  
    OP
       2020-03-04 14:24:06 +08:00
    @yaphets666 我是指这样的 ts 类型,并不是 dom 操作
    doommm
        14
    doommm  
       2020-03-04 15:18:53 +08:00   ❤️ 1
    第一个问题,vue-class-component 的文档中有说明 https://class-component.vuejs.org/guide/class-component.html#data
    islxyqwe
        15
    islxyqwe  
       2020-03-04 15:35:00 +08:00
    @dxcqcv 动态生成的,说明内容也是状态,把内容都放到一个数组里再把收起放下逻辑封装成组件不就行了
    dxcqcv
        16
    dxcqcv  
    OP
       2020-03-04 15:37:23 +08:00
    @doommm 我的意思是用了 data 后如何给 data 中的属性加 ts
    dxcqcv
        17
    dxcqcv  
    OP
       2020-03-04 15:40:23 +08:00
    @islxyqwe 是可以,但我只是想知道这个 @click 中的 event 怎么定义 ts,我这个只是一个 demo
    islxyqwe
        18
    islxyqwe  
       2020-03-04 16:10:54 +08:00
    @dxcqcv 事件使用的接口可以查 MDN,也可以打印出来 F12 看一下类型。一般 click 事件的接口使用的是 MouseEvent。
    dxcqcv
        19
    dxcqcv  
    OP
       2020-03-04 16:32:56 +08:00
    @islxyqwe 现在的问题是 vue 里的 event 混杂了很多东西,单纯的 ts 无法推导,需要各种断言,感觉很不规范
    KuroNekoFan
        20
    KuroNekoFan  
       2020-03-04 17:49:19 +08:00
    用 as 没问题,一个 object 没必要纯净,duck type is fine
    mufeng
        21
    mufeng  
       2020-03-04 18:22:12 +08:00
    vue 2 写 ts 基本上类型推到就是废的
    shadeofgod
        23
    shadeofgod  
       2020-03-04 20:32:01 +08:00
    handleCollapse<HTMLInputElement>(e: Event ) {}
    shadeofgod
        24
    shadeofgod  
       2020-03-04 20:36:56 +08:00
    xiaojie668329
        25
    xiaojie668329  
       2020-03-04 21:25:01 +08:00 via iPhone
    赋值为 undefined 等于没赋值吧,可以 foo! 这样写告诉编译器这个变量将由 vue 进行初始化。

    target. parentElement 不一定存在啊,所有的元素查找都可能为 null,你确定它一定存在,可以用类型断言。
    简洁的写法:target.parentElement! 表示 parentElement 不为空。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1293 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:48 · PVG 01:48 · LAX 09:48 · JFK 12:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.