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

typescript 中声明一个类型, 是用 Interface 还是 Type 呢?

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

    Interface 的话, 其他地方用到的时候, 还得 import 定义接口的文件. 如果是声明 Type 的话, 其他地方随便用, 不需要 import 定义接口的文件. 看起来是 Type 方便多了, 但为什么官方说要尽量用 Interface?

    31 条回复    2022-11-16 02:39:58 +08:00
    xieqiqiang00
        1
    xieqiqiang00  
       134 天前   ❤️ 1
    从来都是用 type ,没用过 Interface
    darkengine
        2
    darkengine  
       134 天前
    我都是 interface 一把梭
    Dragonphy
        3
    Dragonphy  
       134 天前
    typescript 对我来说就是多了个 interface🤣
    zhuweiyou
        4
    zhuweiyou  
       134 天前
    我定义结构用 interface ,类型别名用 type
    wunonglin
        5
    wunonglin  
       134 天前   ❤️ 1
    Interface 顾名思义,用来定义接口,当然用来定义 Object 也可以。
    Type 用来定义一个变量的类型。


    如果定义 Object 的话,但是还是建议用 Class 代替 Interface ,因为在运行时也有作用,instanceof 可以在运行时判断类型,从而达到不同的 Class 可以做不同的事,就不必老是用 obj.type === xxx 了
    Kaciras
        6
    Kaciras  
       134 天前
    优先 Interface ,只在别名和运算时采用 Type
    Leviathann
        7
    Leviathann  
       134 天前
    type
    官方说用 interface 是因为官方一直尽量避免宣传类型语言这个存在但是写出来比较别扭的东西
    比如要用 extends 模拟三目里的 equals 的部分
    beginor
        8
    beginor  
       134 天前 via Android
    简单类型用 type

    ```ts
    export type Visibility = 'visible' | 'none';
    ```

    复杂类型用 interface

    ```ts
    export interface Model {
    id?: number;
    name?: string;
    }
    ```
    dcsuibian
        9
    dcsuibian  
       134 天前
    For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

    来自官方手册:
    https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
    Jasonwxy
        10
    Jasonwxy  
       134 天前
    https://pro.ant.design/zh-CN/docs/type-script#%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%8E%A8%E8%8D%90%E7%94%A8-type-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8-interface-
    Jasonwxy
        11
    Jasonwxy  
       134 天前
    @dcsuibian #9 很好奇为啥官方推荐 interface🤔
    Chingim
        12
    Chingim  
       134 天前 via iPhone
    “如果是声明 Type 的话, 其他地方随便用, 不需要 import 定义接口的文件”

    这句话是什么意思?为什么用 type 就不需要 import 就可以直接用了?
    DOLLOR
        13
    DOLLOR  
       134 天前
    type 声明同名的 type 会报错,提示重复标识符。
    interface 声明同名 interface 会发生合并,这往往是非预期行为,会造成迷惑。
    所以我选择 非必要,不 interface 。
    dcsuibian
        14
    dcsuibian  
       134 天前 via Android
    @Jasonwxy
    我个人认为:interface 比 type 更能体现出面相对象的思想,而 type 则更能体现出 ts 结构化类型的特点。
    nonone
        15
    nonone  
       134 天前
    type 灵活啊 可以各种范形
    Trim21
        16
    Trim21  
       134 天前 via Android
    很好奇为什么你声明的 type 不用导入…
    AyaseEri
        17
    AyaseEri  
       134 天前
    interface 与 type 混用会导致 IDE 推断的时候只展示类型名称,不展示类型的定义内容。
    但是又得做体操,所以我选择 type
    DICK23
        18
    DICK23  
       134 天前
    type 也需要导入啊。
    interface 支持重载,type 就不行
    Yeen
        19
    Yeen  
       134 天前
    如果熟悉老旧的 com 规范的话,可以对 interface 本身有更深入的理解
    mudssky
        20
    mudssky  
       134 天前
    我一般用的都是 interface ,都是 js 对象类型的。
    其他类型我会用 type
    主要是我更喜欢 extends 语法,不太喜欢用那个交叉类型
    Qcui
        21
    Qcui  
       134 天前
    比较倾向 interface ,做扩展、继承更符合直观一些
    dssxzuxc
        22
    dssxzuxc  
       134 天前
    都能用的情况下用 interface ,不得不用 type 的时候再用 type
    daliusu
        23
    daliusu  
       134 天前
    interface 声明结构
    type 声明类型

    除非你有特殊需求,比如声明一些基本类型、或者做多个类型自动合并
    GiantHard
        24
    GiantHard  
       134 天前
    Interface 在编译性能上的优势: https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections

    > However, and as soon as you need to compose two or more types, you have the option of extending those types with an interface, or intersecting them in a type alias, and that's when the differences start to matter.

    Interface 在编译错误友好性上的优势: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

    > Prior to TypeScript version 4.2, type alias names may appear in error messages, sometimes in place of the equivalent anonymous type (which may or may not be desirable). Interfaces will always be named in error messages.
    qianxi0410
        25
    qianxi0410  
       134 天前
    我都用 type ,然后 eslint 自动帮我改成 interface 。。。
    codehz
        26
    codehz  
       134 天前
    interface 可以多次合并,这种放在诸如 dom api 这种可能有多个不同声明文件的就非常合适(
    但是 type 可以用 union 类型和 intersection 类型等高级类型,这个 interface 做不了(而且也不能“继承”这样的高级类型)
    realJamespond
        27
    realJamespond  
       133 天前
    type 不好搞 generic, interface 比较好搞, 不搞泛型可以用 type
    Vaspike
        28
    Vaspike  
       133 天前
    我的理解是 type 做别名比较合适,比如 map 里泛型是 string 和 map 就可以 type 声明后直接用
    interface 更多的是对象思想,如果你要把很多属性平级拼装那就用 interface
    yukinotech
        29
    yukinotech  
       116 天前
    1. interface 里面可以用 this
    2. interface 可以 extends 另一个类型,比如 interface Props extends ViewProps {name:string}
    3. interface 可以多次声明,重载

    p.s 本人是能用 type 尽量用 type, 可能是需要和 class 打交道的场景基本为 0
    noyidoit
        30
    noyidoit  
       14 天前
    @dcsuibian 我在 handbook 看到了这句话,没看明白这个 heuristic 于是搜索到了这里 XD ,您知道这里的 heuristic 是什么意思吗?我查了词典解释是"proceeding to a solution by trial and error or by rules that are only loosely defined",中文就仨字:启发式,不太明白这跟 interface 有什么联系
    dcsuibian
        31
    dcsuibian  
       14 天前
    @noyidoit 我也翻译不出来。
    但按我的理解这句话意思就是说:如果你是个选择困难症,那就用 interface ,interface 不满足要求了再用 type 。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4656 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 53ms · UTC 09:27 · PVG 17:27 · LAX 01:27 · JFK 04:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.