V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Smash
V2EX  ›  程序员

这两天在用 vue3+typescript 重构一个 vue2 项目,但是 props 的类型检查真的好弱...

  •  
  •   Smash · 2021-07-23 21:40:11 +08:00 · 4876 次点击
    这是一个创建于 1218 天前的主题,其中的信息可能已经有所发展或是发生改变。

    说是重构,基本上算是重写了.不过由于用了 tailwindcss,还好都只是写了些静态页面.

    今天正准备开始写逻辑,最后这 typescript 的支持程度,我真的是写不下去了.

    今天准备赶紧切换到 react.

    无意引战!!!

    无意引战!!!

    无意引战!!!

    只是我没搞懂为什么 vue3 对 typescript 的支持这么差...

    例如下面的写法,关于 props 类型检查,这种写法我看着真的蛋疼.

    export default defineComponent({
        props: {
            message: {
                type: Object as PropType<FlashInterface>,
                required: true
            }
        },
        setup(props) {
                // Stuff
            }
    });
    
    

    后来我又想了想,可能是因为.vue 模板的原因导致的,因为在<template>模板里面 this.$emit 都要被 vscode 红线报错.

    所以,如果要愉快的使用 vue3,我觉得 vue3+js 可能才是最好的选择.

    还有,我是业余前端,以上观点请轻喷.

    43 条回复    2021-07-26 17:59:35 +08:00
    lujjjh
        1
    lujjjh  
       2021-07-23 21:56:14 +08:00   ❤️ 1
    因为同样的问题放弃 Vue 3 了。但是这并非是 Vue 模板支持的问题,0000 提案里就有个 TypeScript-only props typing [1] / optional props declaration [2],但是后来因为 attribute fallthrough 的问题被 revert 掉了,最终变成只有 functional / stateless components 可以不需要定义 props [3]。

    [1]: https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#typescript-only-props-typing
    [2]: https://github.com/vuejs/rfcs/blob/8b8288bffd3a664533dda6afed1cc6b181ea919f/active-rfcs/0010-optional-props-declaration.md
    [3]: https://github.com/vuejs/rfcs/pull/154
    Biwood
        2
    Biwood  
       2021-07-23 21:59:49 +08:00
    一直觉得 Vue 跟 TypeScript 本身就很不搭,2.x 尝试过几次之后就再也不这么弄了。单说 props 这块东西,Vue 本身提供了 type 字段作为类型检测,导致跟 TypeScript 的类型检测功能有重叠。

    Vue 在易用性上做的很优秀,但是在扩展性上是不太行的,这可能就是鱼和熊掌不可兼得吧。
    Smash
        3
    Smash  
    OP
       2021-07-23 22:05:28 +08:00
    @lujjjh 最后一个链接,里面有个老哥给出了 vue3+tsx 的写法,看来我还可以抢救一下...
    shilianmlxg
        4
    shilianmlxg  
       2021-07-23 22:14:24 +08:00 via iPhone
    炒极想学 tailwindcss 的项目。求哪些项目可以学到实战项目里这个库的用法
    Smash
        5
    Smash  
    OP
       2021-07-23 22:21:10 +08:00
    @shilianmlxg 我写了一个通宵就上手了,开始要不断的看文档,多写就会记住那些 class 命名方式了.
    lujjjh
        6
    lujjjh  
       2021-07-23 22:28:40 +08:00   ❤️ 1
    @Smash tsx 应该也一样……我倒是不反感这种写法,但是要做类型运算就很麻烦。

    比如我想基于 ComponentA 和 ComponentB 写一个组件,Pick 一部分 ComponentA 的 props + 一部分 ComponentB 的 props 。似乎没有比较优雅的解法,尤其是 ComponentA 跟 ComponentB 都是外部组件的时候,要么自己再声明一遍这些类型,要么用黑科技自己组合 ComponentA.$props 和 ComponentB.$props……
    daguaochengtang
        7
    daguaochengtang  
       2021-07-23 22:47:37 +08:00   ❤️ 3
    你这都不算啥,试试 vuex+ts,你会感叹,这玩意究竟是个什么狗屎
    Sapp
        8
    Sapp  
       2021-07-23 22:52:42 +08:00
    vue3 应该是可以通过 babel 插件实现基本的 tsx 函数组件写法的,和 react 基本差不多,我记得阿里有个团队已经做过一个插件了,但是那个还是有些问题,比如我发现的他会把 非 props 声明的事件和属性都给绑定到子组件里的 dom 上(这个似乎是 vue 2.x 的特性),另外就是 children 的传入还是有些不同的,但是这个应该都能通过 babel 去实现,不过后来越来越懒得折腾了就没关注了
    BaiLinfeng
        9
    BaiLinfeng  
       2021-07-23 22:56:28 +08:00
    @daguaochengtang 狗屎哈哈哈哈
    DeWjjj
        10
    DeWjjj  
       2021-07-23 23:01:03 +08:00
    最近就因为这个原因在肝犀牛书和鬼知道。
    wunonglin
        11
    wunonglin  
       2021-07-23 23:28:36 +08:00
    很久以前我就说了。就算到了 vue3,对于 ts 的支持、工程化依然是坨屎。

    看了 vue 的源码,再看看 ng 的。一个字:唉
    doommm
        12
    doommm  
       2021-07-24 00:46:57 +08:00
    试试在每一个 prop 声明的结尾加上 `as const`

    ```
    props: {
    message: {
    type: Object as PropType<FlashInterface>,
    required: true
    } as const,
    },
    ```

    或者使用 `vue-types` 这个库来辅助声明 props,我看 ant-design-vue 基本都是用这个来声明 props 的,有一定改善
    doommm
        13
    doommm  
       2021-07-24 00:49:28 +08:00
    @daguaochengtang vuex5 要对 api 动刀了,可以去看看 rfc
    shilianmlxg
        14
    shilianmlxg  
       2021-07-24 01:01:07 +08:00 via iPhone
    @wunonglin 上次鱿大连麦当主播的时候 说 ts 对自己写 vue3 不够友好 想叫微软的人改正下源码 更服务于社区的大家。微软的人喜欢平躺不干 撒手掌柜。然后 vue3 在各种 hack 骚操作下诞生了
    wunonglin
        15
    wunonglin  
       2021-07-24 01:05:46 +08:00
    @shilianmlxg #14 哈哈哈哈哈哈。。
    shilianmlxg
        16
    shilianmlxg  
       2021-07-24 01:10:56 +08:00 via iPhone
    @daguaochengtang 至今 看不懂社区每一个 vuex + ts 的项目 较复杂的是怎么个出拳章法 ,发现 我错了,根本没章法可言 大多数技师都在摸索阶段 https://i.loli.net/2021/07/24/jeoXISCfOhVWlm2.jpg?width=245&height=232
    anguiao
        17
    anguiao  
       2021-07-24 01:28:10 +08:00
    现在有 script setup 了,组件属性可以直接用 TS 类型来写,大概会好一点。
    https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#type-only-propsemit-declarations
    最近才开始写 TS,还在摸索中。
    ericgui
        18
    ericgui  
       2021-07-24 01:51:26 +08:00
    @shilianmlxg 别学
    Smash
        19
    Smash  
    OP
       2021-07-24 02:20:07 +08:00
    @anguiao 这个 feature 已经 release 了吗?
    Smash
        20
    Smash  
    OP
       2021-07-24 02:20:26 +08:00
    从我发帖到现在,我已经用 react+tsx 把之前写的组件翻译了一大半了,之前才写好估计有 20 来个组件,已经翻译了 7,8 个了.

    准备休息了,明天继续.

    react+tsx 真香...
    anguiao
        21
    anguiao  
       2021-07-24 02:47:33 +08:00 via Android
    @Smash 3.2 会 release,快了
    gouflv
        22
    gouflv  
       2021-07-24 07:23:57 +08:00 via iPhone
    vue3 还只是 vue,所以别指望太多
    James369
        23
    James369  
       2021-07-24 08:10:34 +08:00
    那么结论是什么,vue 怎么和 ts 配合使用呢?
    stkstkss
        24
    stkstkss  
       2021-07-24 09:11:42 +08:00
    果然 vue 跟 ts 就是不搭 不管是 vue2 还是 vue3
    chouchoui
        25
    chouchoui  
       2021-07-24 09:20:37 +08:00 via iPhone
    记得还有个问题,如果 prop 对象的所有属性都是?: 在检查类型的时候这个 prop 的类型会变成 unknown

    写了几年 vue+ts 已经对类型问题看淡了,vuex 的类型甚至不想说脏话
    Oktfolio
        26
    Oktfolio  
       2021-07-24 10:33:02 +08:00
    我也是因为这种莫名其妙的写法放弃 Vue 的
    hronro
        27
    hronro  
       2021-07-24 10:53:23 +08:00
    ruoxie
        28
    ruoxie  
       2021-07-24 12:22:48 +08:00
    不会啊,除了 slot 用起来有点不习惯,跟写 react + ts +hooks 差不多 https://github.com/lowcoding/lowcode-vscode/blob/master/webview-vue-webpack/src/views/snippet/List/index.tsx
    Smash
        29
    Smash  
    OP
       2021-07-24 13:09:10 +08:00
    @ruoxie 你这个例子没用到 props
    suyingtao
        30
    suyingtao  
       2021-07-24 14:42:06 +08:00
    用 script setup + defineProps + ts 开发体验还是不错的。composition API 比 hooks 好用很多,几乎没有心智负担,注意一下 ref / unref 就可以了,不像 hooks 要自己考虑好 deps 还要自己写 memo,有点像自动挡和手动挡的区别。

    PS: script setup 在生产环境用的话,要更新 vue-loader 到 16.3.0 以上的版本,不然的话 build prod 模式会白页。
    beginor
        31
    beginor  
       2021-07-24 15:12:23 +08:00 via Android
    折腾来折腾去,最后还是 angular 最香
    Smash
        32
    Smash  
    OP
       2021-07-24 16:14:47 +08:00
    @beginor angular 每次创建组件都需要写一堆文件,我实在是受不了了,最开始就是尝试用 angular 重构的。速度太慢了。
    no1xsyzy
        33
    no1xsyzy  
       2021-07-24 19:34:51 +08:00
    vue3 正统是 svelte (
    beginor
        34
    beginor  
       2021-07-24 20:13:43 +08:00 via Android
    @Smash 可以在 angular.json 中设置 inlineTemplate inlineStyle 以及忽略 test, 这样一个组件一个文件
    beginor
        35
    beginor  
       2021-07-24 20:15:35 +08:00 via Android
    @Smash 那些文件也不用手写,都是用 ng 命令直接生成
    LeeReamond
        36
    LeeReamond  
       2021-07-25 06:21:06 +08:00
    话说用 ts 的必要性是啥
    gdtdpt
        37
    gdtdpt  
       2021-07-25 09:57:00 +08:00
    有个项目叫 direct-vuex,号称以 composition-api 和 ts 的方式使用 vuex,建议大家别用,坑多得根本填不完,写法也不优雅
    bojue
        38
    bojue  
       2021-07-25 10:06:01 +08:00
    @Smash #32 文件模本都是命令生成的,ng 也不慢,就是不知道服务端渲染支持度如何了
    lastisee
        39
    lastisee  
       2021-07-25 15:42:33 +08:00
    楼主有 react 加 typescript 的写法规范教程这些吗,比如阿里的 Java 编程规范这种,我的 interface 和 type 完全凭心情,type 也到处都在定义,我现在感觉写得有点不伦不类。
    sjhhjx0122
        40
    sjhhjx0122  
       2021-07-26 08:56:18 +08:00
    @gdtdpt 试试 pinia
    zhdsuperm
        41
    zhdsuperm  
       2021-07-26 14:08:11 +08:00
    @shilianmlxg https://hackertalk.net/ 这个用 tailwindcss 写的,可以看看
    nzbin
        42
    nzbin  
       2021-07-26 15:23:55 +08:00
    @Smash

    > angular 每次创建组件都需要写一堆文件,我实在是受不了了,最开始就是尝试用 angular 重构的。速度太慢了。

    angular 的自动化命令很方便啊,VSCode 的配套插件也很丰富
    strangeFish
        43
    strangeFish  
       2021-07-26 17:59:35 +08:00
    之前都没有 ts,react 和 vue 各有千秋。
    现在 react 用 ts 爽的飞起,vue 打不过了......
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1051 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 23:04 · PVG 07:04 · LAX 15:04 · JFK 18:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.