这是一个创建于 839 天前的主题，其中的信息可能已经有所发展或是发生改变。
主要想看看怎么用的，我看了几个 vue3+ts 的后台管理的代码，发现为啥都定义 interface。 纯粹的数据展示，我能理解定义成interface，像表单参数我想的应该是定义成 class吧，这样表单校验直接在对应的class里实现了，比如登录请求的参数，定一个LoginParam，密码的明文转密文方法、参数去除空格、类型转换、参数校验啥的这些相关的写在这个类里，然后封装个什么工具，适配 UI 的校验规则，页面上绑定这个对象。
我对前端不太熟悉，只会套别人写好的，有样学样，复制粘贴。希望大家多指教指教，感谢。
第 1 条附言 2023-06-27 09:51:31 +08:00
再次感谢大家的回复指教！
 | 1 july1995 2023-06-26 18:12:52 +08:00 via iPhone 同蹲一个高质量项目参考学习一下 |
 | 2 gowk 2023-06-26 18:26:36 +08:00 |
 | 3 ruoxie 2023-06-26 18:28:33 +08:00  2 interface 和 class 不是同一类型的东西，编译后 class 依然存在，interface 就没有了。你想问的应该是为什么不用 class 去封装逻辑，也就是面对对象，而是函数式。然后跟 ts 没有什么关系了 |
 | 5 shakukansp 2023-06-26 18:31:34 +08:00 建议看看 vuelidate 不是很懂表单验证为什么要 class |
 | 6 Belmode 2023-06-26 18:36:13 +08:00 5 哈哈哈，Angular |
 | 7 thinkershare 2023-06-26 18:46:44 +08:00 1 因为大家使用 TypeScript 在乎的是 Type 而不是 Class, 或者说大家只是喜欢使用带有文档的脚本语言, Web APIs 就是典型的 class 风格, 而大部分 Javascript 是走到函数式风格,然后使用组合来实现复用. 核心还是前端暂时还不需要后端那样重度的封装. |
 | 8 JohnH 2023-06-26 18:56:55 +08:00 |
 | 9 nulIptr 2023-06-26 21:26:47 +08:00 1 因为 typescript 不等于面向对象 |
 | 10 agdhole 2023-06-26 21:40:50 +08:00 1 用 angular 吧，真正的 0 心智负担的框架。 |
 | 11 harrozze 2023-06-26 22:22:16 +08:00 1 想了半天，我觉得还是琢磨一下怎么用 C 去实现面向对象编程，或者面向接口（ interface ）编程，这个问题就不再是个问题了。 |
 | 12 orzorzorzorz 2023-06-26 23:11:34 +08:00 https://github.com/ant-design/ant-design 虽然政治不正确，但我确实觉得这个用得还行，至少中规中矩，适合初学。 |
 | 13 Pastsong 2023-06-26 23:21:09 +08:00 1 class 很重，JS 作为一个很灵活的语言没有必要背这些 OOP 的包袱，面向 interface 编程是 OOP 的高级用法。JS 的简单 Object 就已经能完成很多工作了 class LoginParam { validate(): boolean } 完全可以用更轻量的 interface LoginParam {} validate(param: LoginParam): boolean 替代 |
 | 14 amlee 2023-06-26 23:28:22 +08:00 interface 写的多的程序，风格估计更偏函数式。可能你做后端，代码风格更偏面向对象吧。 |
 | 15 jiangzm 2023-06-27 02:45:54 +08:00 1 此 interface 非彼 interface typescript 中的 interface 仅是区别于 Type 的类型定义，虽然大部分时候两者的使用可以互换，但还是有些许差异 class 是 es6 出的一个类型标识符，虽然 typescript 也有 class 写法实质还是 js 中的 class ，只不过对成员增加了一些修饰符 类型定义可以看作是 doc ，不影响执行逻辑结果 类型是值，class 前身就是 function |
 | 16 Quarter 2023-06-27 07:46:40 +08:00 via Android 1 定义 class 是一种面相对象的编写模式吧，但是写 interface 只是定义一下数据结构，和代码的本身逻辑是没有关系的，只是在使用和传递的时候更方便的知道这个数据的构成，换而言之，没有这个 interface 根本不影响代码运行，而 class 本身就是 es 语法，跟 ts 关系不大，属于写法的问题 |
 | 17 NICE20991231 2023-06-27 07:48:57 +08:00 要找 model entity 这种用法吗，应该很少，基本就是写个类型... 感觉现在的项目，数据都是由组件提供的，很少会转换参数了，遇到了手动处理一下，也没必要用模型 |
 | 18 nitmali 2023-06-27 08:24:45 +08:00 Angular +1 |
 | 19 darkengine 2023-06-27 08:43:57 +08:00 1 遇到跟 OP 一样的困惑，在 web 项目里用 TS 也是一样 interface 一把梭。但是有些需求，例如某种数据，里面有时间戳 interface IEvent { timestamp: number }，需要根据用户的配置输出格式化的时间字符串，如果用 class 来定义再加个 toString 之类的函数就很符合 OO 的做法。 当前我的做法是封装一个辅助函数去解决 toString: (event: IEvent) => string ，或者更通用的 toString: (timestamp: number) => string |
 | 20 ChefIsAwesome 2023-06-27 09:22:30 +08:00 1 https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html 简单讲，js 很灵活，你想什么风格都行。但是前端开发者用 js ，绝大部分不是走 oop 路线的。 |
 | 21 nzbin 2023-06-27 09:29:20 +08:00 既然提到表单了，那还是 Angular 吧，相关框架也有不少 https://github.com/ng-matero/ng-matero |
 | 22 meetqyx 2023-06-27 09:33:28 +08:00 1 |
 | 23 hamsterbase 2023-06-27 09:37:28 +08:00 via Android 1 你可以看看 vscode ，完全基于 oop 开发的。 把 ts 玩出花了 https://github.com/hamsterbase/hamsterbase-highlighter 或者看我的项目，把 vscode 的部分代码剥离，该造成了一个叫做 vscf 的框架。 |
 | 24 Leviathann 2023-06-27 09:52:41 +08:00 all you need is type |
| 25 agdhole 2023-06-27 10:02:23 +08:00 @Pastsong 这可不是 oop 包袱，很标准的面向接口编程，c#里面可以 public interface ILoginParam {} |
 | 26 moment082 2023-06-27 16:19:34 +08:00 可以看看我写的这个 https://github.com/xun082/react-cli |
 | 27 panyang 2023-08-11 11:55:35 +08:00 试一试 V3 Admin Vite https://github.com/un-pany/v3-admin-vite |
Select Language