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

[Smash]

说是重构,基本上算是重写了.不过由于用了 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 可能才是最好的选择.

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

[lujjjh]

因为同样的问题放弃 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]

一直觉得 Vue 跟 TypeScript 本身就很不搭，2.x 尝试过几次之后就再也不这么弄了。单说 props 这块东西，Vue 本身提供了 type 字段作为类型检测，导致跟 TypeScript 的类型检测功能有重叠。

Vue 在易用性上做的很优秀，但是在扩展性上是不太行的，这可能就是鱼和熊掌不可兼得吧。

[Smash]

@lujjjh 最后一个链接,里面有个老哥给出了 vue3+tsx 的写法,看来我还可以抢救一下...

[shilianmlxg]

炒极想学 tailwindcss 的项目。求哪些项目可以学到实战项目里这个库的用法

[Smash]

@shilianmlxg 我写了一个通宵就上手了,开始要不断的看文档,多写就会记住那些 class 命名方式了.

[lujjjh]

@Smash tsx 应该也一样……我倒是不反感这种写法，但是要做类型运算就很麻烦。

比如我想基于 ComponentA 和 ComponentB 写一个组件，Pick 一部分 ComponentA 的 props + 一部分 ComponentB 的 props 。似乎没有比较优雅的解法，尤其是 ComponentA 跟 ComponentB 都是外部组件的时候，要么自己再声明一遍这些类型，要么用黑科技自己组合 ComponentA.$props 和 ComponentB.$props……

[daguaochengtang]

你这都不算啥，试试 vuex+ts,你会感叹，这玩意究竟是个什么狗屎

[Sapp]

vue3 应该是可以通过 babel 插件实现基本的 tsx 函数组件写法的，和 react 基本差不多，我记得阿里有个团队已经做过一个插件了，但是那个还是有些问题，比如我发现的他会把 非 props 声明的事件和属性都给绑定到子组件里的 dom 上（这个似乎是 vue 2.x 的特性），另外就是 children 的传入还是有些不同的，但是这个应该都能通过 babel 去实现，不过后来越来越懒得折腾了就没关注了

[BaiLinfeng]

@daguaochengtang 狗屎哈哈哈哈

[DeWjjj]

最近就因为这个原因在肝犀牛书和鬼知道。

[wunonglin]

很久以前我就说了。就算到了 vue3，对于 ts 的支持、工程化依然是坨屎。

看了 vue 的源码，再看看 ng 的。一个字：唉

[doommm]

试试在每一个 prop 声明的结尾加上 `as const`

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

或者使用 `vue-types` 这个库来辅助声明 props，我看 ant-design-vue 基本都是用这个来声明 props 的，有一定改善

[doommm]

@daguaochengtang vuex5 要对 api 动刀了，可以去看看 rfc

[shilianmlxg]

@wunonglin 上次鱿大连麦当主播的时候 说 ts 对自己写 vue3 不够友好 想叫微软的人改正下源码 更服务于社区的大家。微软的人喜欢平躺不干 撒手掌柜。然后 vue3 在各种 hack 骚操作下诞生了

[wunonglin]

@shilianmlxg #14 哈哈哈哈哈哈。。

[shilianmlxg]

@daguaochengtang 至今 看不懂社区每一个 vuex ＋ ts 的项目 较复杂的是怎么个出拳章法 ，发现 我错了，根本没章法可言 大多数技师都在摸索阶段 https://i.loli.net/2021/07/24/jeoXISCfOhVWlm2.jpg?width=245&height=232

[anguiao]

现在有 script setup 了，组件属性可以直接用 TS 类型来写，大概会好一点。
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#type-only-propsemit-declarations
最近才开始写 TS，还在摸索中。

[ericgui]

@shilianmlxg 别学

[Smash]

@anguiao 这个 feature 已经 release 了吗?

[Smash]

从我发帖到现在,我已经用 react+tsx 把之前写的组件翻译了一大半了,之前才写好估计有 20 来个组件,已经翻译了 7,8 个了.

准备休息了,明天继续.

react+tsx 真香...