最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • Type ✔ Vs Interface ❌:为什么在 TypeScript 中应该选择 Type 而不是 Interface

    type ✔ vs interface ❌:为什么在 typescript 中应该选择 type 而不是 interface

    我找到了一个解决方案,您应该始终使用类型而不是接口。让我们来分析一下原因吧!!

    • 接口只能指定对象,但类型别名可以指定对象以及其他一切。
      假设我们有一个地址字段,并且您将使用类型定义其类型,如下所示:
    type address = string;
    const address: address = '123 hallway'
    

    但是你不能用这样的界面来做这样的事情:

    interface address = string; //error
    const address: address = '123 hallway'
    

    因为接口别名只能定义对象。如果我们想使用如下接口,我们需要完全改变结构:

    interface address {
        address: string;
    }
    const address: address = {
        address: '12 3 hallway'
    }
    

    这是接口的第一个问题。

    • 类型别名可以定义 union 类型,而接口别名则不能:
      让我们的用户可以有多个或单个地址:
    type address = string | string[] ;
    const address: address = '123 hallway'
    const newaddress: address= ['123 hallway', 'flag plaza']
    

    字符串 | string[] 称为 union 类型,地址可以是字符串,也可以是字符串数组

    你可以使用接口别名来做这样的事情。

    • 类型别名可以轻松使用实用类型。接口可以做到,但看起来会很难看,例如考虑一个用户对象:
    type user = {
        name: string;
        age: number;
        created_at: date;
    }
    

    现在,假设我们有一个访客对象,该对象尚未登录,但我们可以检查它的创建时间(首次登陆页面)。在这种情况下,guest 就像一个用户,但不是实际的用户。我们希望在来自 user in 类型别名的 guest 中拥有 create_at 属性,我们这样做:

         type guest = omit<user></user>

    从技术上讲,界面是可能的,但看看它是如何工作的:

    type guest extends omit<user> {}
    </user>

    它可以工作,但语法很丑陋,不是吗?

    • 有时你需要描述元组。这是我们如何用类型别名来描述它
    type address = [string, number, string] ;
    const address: address = ['hallway', 2, 'abdul plaza']
    

    但是有了界面,看看我们怎么做:

    type address extends array<number string> {
        0: string
        1: number;
        2: string;
    }
    
    const address: address = ['hallway', 2, 'abdul plaza']
    </number>

    又是丑陋的语法。

    • 使用类型别名,我们可以非常轻松地提取类型。
    const love_bonito ={
        level: 1,
        store_id: 'scad_12hdedhefgfeaa',
        country: ['us','pk','ind'],
        user: {
            user_id: "blah',
            username: 'nishat',
            likes: 421,
        },
    };
    
    // let's extract type for love_bonito
    type lovebonito = typeof love_bonito;
    
    // or even something inside love_bonito
    type user = typeof love_bonito.user;  
    

    这样做的好处是,如果我们现在的级别始终是 1 而没有其他,我们也可以这样做:

    const love_bonito ={
        level: 1,
        store_id: 'scad_12hdedhefgfeaa',
        country: ['us','pk','ind'],
        user: {
            user_id: "blah';
            username: 'nishat';
            likes: 421;
        },
    } as const
    
    // let's extract type for love_bonito
    type lovebonito = typeof love_bonito
    
    // or even something inside love_bonito
    type user = typeof love_bonito.user
    

    现在级别将被推断为 1,而不是任何数字。

    • 使用接口别名,您可以重新声明接口,
    interface Home {
        rooms: number;
        light_bulbs: 12;
        rented_to: "Abu Turab";
    }
    
    interface Home {
       fans: 16;
    }
    
    // final type 
    
    interface Home {
        rooms: 3;
        light_bulbs: 12;
        rented_to: "Abu Turab";
        fans: 16;
    }
    

    我们无法重新声明类型别名。你可能会想,“哦!sheraz,这里,这是界面的一个优点”,但实际上不是!!!

    在整个代码库中使用相同标识符的多个声明听起来很令人困惑。这对我来说真的很困惑。

    假设您正在与一个团队合作,您知道一个对象的类型(使用接口声明的类型),但是您团队中的某人重新声明并更改了它,您会怎么做。

    但是使用类型别名这个问题也得到解决。如果你重新声明一个类型,它会抛出一个错误

    重复的标识符

    • 库的名称是 typescript 而不是 interfacescript。这可能很时髦,但是是的,为什么公司选择将他们的库命名为 typescript 而不是 ibterfacescript。如果公司更喜欢类型而不是界面,那么你为什么不呢? ?

    结论

    总是更喜欢类型而不是接口。一些开发人员说接口加载速度比类型更快……但这发生在过去。现在,性能方面没有任何区别。在某些用例中您可能需要接口,但这并不意味着您应该始终使用接口。

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » Type ✔ Vs Interface ❌:为什么在 TypeScript 中应该选择 Type 而不是 Interface
    • 7会员总数(位)
    • 25846资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 293稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情