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

有哪些开源的应用了 typescript 的前端示例项目么

  •  
  •   muyiluop · 306 天前 · 2913 次点击
    这是一个创建于 306 天前的主题,其中的信息可能已经有所发展或是发生改变。

    主要想看看怎么用的,我看了几个 vue3+ts 的后台管理的代码,发现为啥都定义 interface。 纯粹的数据展示,我能理解定义成interface,像表单参数我想的应该是定义成 class吧,这样表单校验直接在对应的class里实现了,比如登录请求的参数,定一个LoginParam,密码的明文转密文方法、参数去除空格、类型转换、参数校验啥的这些相关的写在这个类里,然后封装个什么工具,适配 UI 的校验规则,页面上绑定这个对象。

    我对前端不太熟悉,只会套别人写好的,有样学样,复制粘贴。希望大家多指教指教,感谢。

    第 1 条附言  ·  305 天前
    再次感谢大家的回复指教!
    27 条回复    2023-08-11 11:55:35 +08:00
    july1995
        1
    july1995  
       306 天前 via iPhone
    同蹲一个高质量项目参考学习一下
    gowk
        2
    gowk  
       306 天前
    ruoxie
        3
    ruoxie  
       306 天前   ❤️ 2
    interface 和 class 不是同一类型的东西,编译后 class 依然存在,interface 就没有了。你想问的应该是为什么不用 class 去封装逻辑,也就是面对对象,而是函数式。然后跟 ts 没有什么关系了
    ruoxie
        4
    ruoxie  
       306 天前
    @gowk 接口返回类型没有,下一个
    shakukansp
        5
    shakukansp  
       306 天前
    建议看看 vuelidate
    不是很懂表单验证为什么要 class
    Belmode
        6
    Belmode  
       306 天前   ❤️ 5
    哈哈哈,Angular
    thinkershare
        7
    thinkershare  
       306 天前   ❤️ 1
    因为大家使用 TypeScript 在乎的是 Type 而不是 Class, 或者说大家只是喜欢使用带有文档的脚本语言, Web APIs 就是典型的 class 风格, 而大部分 JavaScript 是走到函数式风格,然后使用组合来实现复用. 核心还是前端暂时还不需要后端那样重度的封装.
    JohnH
        8
    JohnH  
       306 天前
    https://github.com/HalseySpicy/Geeker-Admin

    对比了一些星数更高的框架,个人比较喜欢这个风格。
    nulIptr
        9
    nulIptr  
       306 天前   ❤️ 1
    因为 typescript 不等于面向对象
    agdhole
        10
    agdhole  
       306 天前   ❤️ 1
    用 angular 吧,真正的 0 心智负担的框架。
    harrozze
        11
    harrozze  
       306 天前   ❤️ 1
    想了半天,我觉得还是琢磨一下怎么用 C 去实现面向对象编程,或者面向接口( interface )编程,这个问题就不再是个问题了。
    orzorzorzorz
        12
    orzorzorzorz  
       306 天前
    https://github.com/ant-design/ant-design
    虽然政治不正确,但我确实觉得这个用得还行,至少中规中矩,适合初学。
    Pastsong
        13
    Pastsong  
       306 天前   ❤️ 1
    class 很重,JS 作为一个很灵活的语言没有必要背这些 OOP 的包袱,面向 interface 编程是 OOP 的高级用法。JS 的简单 Object 就已经能完成很多工作了

    class LoginParam {
    validate(): boolean
    }

    完全可以用更轻量的

    interface LoginParam {}
    validate(param: LoginParam): boolean

    替代
    amlee
        14
    amlee  
       306 天前
    interface 写的多的程序,风格估计更偏函数式。可能你做后端,代码风格更偏面向对象吧。
    jiangzm
        15
    jiangzm  
       306 天前   ❤️ 1
    此 interface 非彼 interface

    typescript 中的 interface 仅是区别于 Type 的类型定义,虽然大部分时候两者的使用可以互换,但还是有些许差异
    class 是 es6 出的一个类型标识符,虽然 typescript 也有 class 写法实质还是 js 中的 class ,只不过对成员增加了一些修饰符

    类型定义可以看作是 doc ,不影响执行逻辑结果
    类型是值,class 前身就是 function
    Quarter
        16
    Quarter  
       305 天前 via Android   ❤️ 1
    定义 class 是一种面相对象的编写模式吧,但是写 interface 只是定义一下数据结构,和代码的本身逻辑是没有关系的,只是在使用和传递的时候更方便的知道这个数据的构成,换而言之,没有这个 interface 根本不影响代码运行,而 class 本身就是 es 语法,跟 ts 关系不大,属于写法的问题
    NICE20991231
        17
    NICE20991231  
       305 天前
    要找 model entity 这种用法吗,应该很少,基本就是写个类型...
    感觉现在的项目,数据都是由组件提供的,很少会转换参数了,遇到了手动处理一下,也没必要用模型
    nitmali
        18
    nitmali  
       305 天前
    Angular +1
    darkengine
        19
    darkengine  
       305 天前   ❤️ 1
    遇到跟 OP 一样的困惑,在 web 项目里用 TS 也是一样 interface 一把梭。但是有些需求,例如某种数据,里面有时间戳
    interface IEvent { timestamp: number },需要根据用户的配置输出格式化的时间字符串,如果用 class 来定义再加个 toString 之类的函数就很符合 OO 的做法。

    当前我的做法是封装一个辅助函数去解决 toString: (event: IEvent) => string ,或者更通用的 toString: (timestamp: number) => string
    ChefIsAwesome
        20
    ChefIsAwesome  
       305 天前   ❤️ 1
    https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html

    简单讲,js 很灵活,你想什么风格都行。但是前端开发者用 js ,绝大部分不是走 oop 路线的。
    nzbin
        21
    nzbin  
       305 天前
    既然提到表单了,那还是 Angular 吧,相关框架也有不少
    https://github.com/ng-matero/ng-matero
    wcao
        22
    wcao  
       305 天前   ❤️ 1
    hamsterbase
        23
    hamsterbase  
       305 天前 via Android   ❤️ 1
    你可以看看 vscode ,完全基于 oop 开发的。 把 ts 玩出花了

    https://github.com/hamsterbase/hamsterbase-highlighter

    或者看我的项目,把 vscode 的部分代码剥离,该造成了一个叫做 vscf 的框架。
    Leviathann
        24
    Leviathann  
       305 天前
    all you need is type
    agdhole
        25
    agdhole  
       305 天前
    @Pastsong 这可不是 oop 包袱,很标准的面向接口编程,c#里面可以 public interface ILoginParam {}
    moment082
        26
    moment082  
       305 天前
    可以看看我写的这个 https://github.com/xun082/react-cli
    939630029
        27
    939630029  
       260 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   881 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:24 · PVG 05:24 · LAX 14:24 · JFK 17:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.