TypeScript 中使用type与interface定义类型分别有什么区别?

在 TypeScript 中,使用 type interface 都可以用来定义自定义类型,但它们之间存在一些区别:

  1. 语法:
    • type使用 type 关键字定义类型别名,后跟自定义类型的名称
    • interface 使用 interface 关键字定义接口,后跟自定义类型的名称
  2. 用途:
    • type 主要用于创建类型别名,可以给现有的类型起一个新的名字,包括原始类型、联合类型、交叉类型、函数类型等
    • interface 用于描述对象的形状,包括对象的属性、方法、索引签名等,它更适合用来定义对象的结构
  3. 可拓展性:
    • type 具有更大的灵活性,可以合并多个类型声明,也可以使用交叉类型来组合多个类型
    • interface 可以被继承或者拓展其他接口,可以建立更清晰的接口继承关系
  4. 约束方式:
    • type 通常用于约束某一种类型,比如给一个复杂的联合类型起一个简单易懂的名称
    • interface 通常用于约束对象的结构,可以描述对象的属性和方法

总的来说,typeinterface 在很多情况下可以互相替代,但在某些特定的情况下,选择使用其中一个可能更合适。例如,当你需要描述一个对象的结构时,使用 interface 可能更直观;而当你需要定义一个复杂的类型别名时,使用 type 可能更方便。

 

延申:type 与 interface 两者类型复用时的区别

type定义的类型可以通过交叉类型(&)来进行复用,而interface定义的类型则可以通过继承(extends)来实现复用。值得注意的是,typeinterface定义的类型也可以互相复用。下面是一些简单的示例:

复用type定义的类型:

type Person = {
  name: string;
  age: number;
};

type Student = Person & {
  major: string;
};

复用interface定义的类型:

interface Person {
  name: string;
  age: number;
};

interface Student extends Person {
  major: string;
}

 interface复用type定义的类型:

type Person = {
  name: string;
  age: number;
};

interface Student extends Person {
  major: string;
}

type复用interface定义的类型:

interface Person {
  name: string;
  age: number;
};

type Student = Person & {
  major: string;
};

 

类型部分复用的情况:

比如我们经常在封装组件时,会定义组件的属性props类型,而有的组件props除少部分属性不一样其他属性都一样,这时候我们想复用之前定义的部分属性类型,例如下面这种代码情况

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 {
  a: string;
  b: string;
  d: string;
}

可以利用TypeScript提供的工具类型Omit来高效地实现这种复用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Omit<Props, 'c'> {
  d: string;
}

同样,工具类型Pick也可以用于实现此类复用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Pick<Props, 'a' | 'b'> {
  d: string;
}

OmitPick分别用于排除和选择类型中的属性,具体使用哪一个取决于具体需求。

 

组件属性定义是使用type还是interface

由于同名接口会自动合并,而同名类型别名会冲突,推荐使用interface定义组件属性。这样,使用者可以通过declare module语句自由扩展组件属性,增强了代码的灵活性和可扩展性。

interface UserInfo {
  name: string;
}
interface UserInfo {
  age: number;
}

const userInfo: UserInfo = { name: "张三", age: 23 };

 

posted @ 2024-05-15 20:46  Crazier_Z  阅读(43)  评论(0编辑  收藏  举报