首页 >web前端 >js教程 >Type ✔ Vs Interface ❌:为什么在 TypeScript 中应该选择 Type 而不是 Interface。

Type ✔ Vs Interface ❌:为什么在 TypeScript 中应该选择 Type 而不是 Interface。

WBOY
WBOY原创
2024-08-09 07:18:52571浏览

Type ✔ Vs Interface ❌: Why you should chose type over interface in typescript.

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

  • 接口只能指定对象,但类型别名可以指定对象和其他一切。 假设我们有一个地址字段,并且您将使用类型定义其类型,如下所示:
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, 'name' | 'age'>

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

type Guest extends Omit<User, 'name' | 'age'> {}

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

  • 有时您需要描述元组。这是我们如何用类型别名来描述它
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']

又是丑陋的语法。

  • 使用类型别名,我们可以非常轻松地提取类型。
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。如果公司更喜欢类型而不是界面,那么你为什么不呢? ?

结论

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

以上是Type ✔ Vs Interface ❌:为什么在 TypeScript 中应该选择 Type 而不是 Interface。的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn