typescript 中声明一个类型, 是用 Interface 还是 Type 呢? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
bthulu
V2EX    程序员

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

  •  
  •   bthulu 2022-07-18 22:31:25 +08:00 4019 次点击
    这是一个创建于 1180 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    31 条回复    2022-11-16 02:39:58 +08:00
    xieqiqiang00
        1
    xieqiqiang00  
       2022-07-18 22:43:37 +08:00   1
    从来都是用 type ,没用过 Interface
    darkengine
        2
    darkengine  
       2022-07-18 22:50:53 +08:00
    我都是 interface 一把梭
    Dragonphy
        3
    Dragonphy  
       2022-07-18 22:55:02 +08:00
    typescript 对我来说就是多了个 interface
    zhuweiyou
        4
    zhuweiyou  
       2022-07-18 23:09:04 +08:00
    我定义结构用 interface ,类型别名用 type
    shakaraka
        5
    shakaraka  
    PRO
       2022-07-18 23:11:51 +08:00   1
    Interface 顾名思义,用来定义接口,当然用来定义 Object 也可以。
    Type 用来定义一个变量的类型。


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

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

    复杂类型用 interface

    ```ts
    export interface Model {
    id?: number;
    name?: string;
    }
    ```
    dcsuibian
        9
    dcsuibian  
       2022-07-18 23:34:15 +08:00
    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  
       2022-07-18 23:53:05 +08:00
    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  
       2022-07-18 23:57:55 +08:00
    @dcsuibian #9 很好奇为啥官方推荐 interface
    Chingim
        12
    Chingim  
       2022-07-19 00:16:01 +08:00 via iPhone
    “如果是声明 Type 的话, 其他地方随便用, 不需要 import 定义接口的文件”

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

    除非你有特殊需求,比如声明一些基本类型、或者做多个类型自动合并
    GiantHard
        24
    GiantHard  
       2022-07-19 14:08:24 +08:00
    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  
       2022-07-19 15:41:16 +08:00
    我都用 type ,然后 eslint 自动帮我改成 interface 。。。
    codehz
        26
    codehz  
       2022-07-19 15:48:11 +08:00
    interface 可以多次合并,这种放在诸如 dom api 这种可能有多个不同声明文件的就非常合适(
    但是 type 可以用 union 类型和 intersection 类型等高级类型,这个 interface 做不了(而且也不能“继承”这样的高级类型)
    realJamespond
        27
    realJamespond  
       2022-07-19 17:33:16 +08:00
    type 不好搞 generic, interface 比较好搞, 不搞泛型可以用 type
    Vaspike
        28
    Vaspike  
       2022-07-20 09:46:24 +08:00
    我的理解是 type 做别名比较合适,比如 map 里泛型是 string 和 map 就可以 type 声明后直接用
    interface 更多的是对象思想,如果你要把很多属性平级拼装那就用 interface
    yukinotech
        29
    yukinotech  
       2022-08-06 16:51:28 +08:00
    1. interface 里面可以用 this
    2. interface 可以 extends 另一个类型,比如 interface Props extends ViewProps {name:string}
    3. interface 可以多次声明,重载

    p.s 本人是能用 type 尽量用 type, 可能是需要和 class 打交道的场景基本为 0
    noyidoit
        30
    noyidoit  
       2022-11-15 23:23:17 +08:00
    @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  
       2022-11-16 02:39:58 +08:00
    @noyidoit 我也翻译不出来。
    但按我的理解这句话意思就是说:如果你是个选择困难症,那就用 interface ,interface 不满足要求了再用 type 。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1211 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 17:25 PVG 01:25 LAX 10:25 JFK 13:25
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86