TypeScript 之 interface 和 type 的区别

结论:

1、可以声明的数据类型

type 可以修饰任何类型 (值类型和引用数据类型)

TypeScript 之 interface 和 type 的区别_第1张图片

interface 只能修饰引用类型 (对象、数组、函数)

//interface 声明对象属性
interface ins {
  a: string;
  b?: number; //可选项
}

// interface声明函数作为对象属性的三种写法
interface ins1 {
  fun: () => string;
}
interface ins2 {
  fun(): string;
}
interface ins3 {
  fun: { (): string };
}
let i: ins3 = {
  fun: () => "444",
};

//声明独立函数
interface C {
  (): string;
}
//等于
type fun = () => string;
let f: C = () => "333";

2、是否可以重复声明 

重名的 interface 自动合并,如果属性的类型冲突报错

TypeScript 之 interface 和 type 的区别_第2张图片

 如果重名的 type 报错,自能声明一个

TypeScript 之 interface 和 type 的区别_第3张图片

3、是否可以扩展

interface 通过 extends 实现

TypeScript 之 interface 和 type 的区别_第4张图片

 type 通过 & 实现  (交叉类型)

TypeScript 之 interface 和 type 的区别_第5张图片

4.是否可以枚举 (快速复制另一个类型)

interface 不支持枚举

TypeScript 之 interface 和 type 的区别_第6张图片

type可以:

TypeScript 之 interface 和 type 的区别_第7张图片

场景:

// server data
let mockData = {
  a: "3",
  b: 2,
  c: {
    s: 6,
    j: [1, 8, 4],
  },
  d: [{ a: 2 }, { a: 3 }],
};
//插件 json to ts      
interface RootObject {
  a: string;
  b: number;
  c: C;
  d: D[];
}
interface D {
  a: number;
}
interface C {
  s: number;
  j: number[];
}
// component use
// import RootObject from   myType.ts
type copyType = {
  [k in keyof RootObject]: RootObject[k];
};

5. 是否可以使用 this

interface 可以使用,type不可以

TypeScript 之 interface 和 type 的区别_第8张图片

interface C {
  add(): this;
}
class ins implements C {
  constructor() {}
  add() {
    return this;
  }
}

6、方法是否可以重载

java概念:

重写:子类对父类同名方法进行重写,返回值和形参都不能改变,当需要在子类中调用父类的被重写方法时,要使用 super 关键字。

重载:一个类可以有多个同名方法,但是方法的参数个数不能相同,实例调用时可以根据参数不同执行不同的逻辑,返回类型可以相同也可以不同。每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。

方法的重写(Overriding)和重载(Overloading)是java多态性的不同表现,重写是父类与子类之间多态性的一种表现,重载可以理解成多态的具体表现形式。

  • (1)方法重载是一个类中定义了多个方法名相同,而他们的参数的数量不同或数量相同而类型和次序不同,则称为方法的重载(Overloading)。
  • (2)方法重写是在子类存在方法与父类的方法的名字相同,而且参数的个数与类型一样,返回值也一样的方法,就称为重写(Overriding)。
  • (3)方法重载是一个类的多态性表现,而方法重写是子类与父类的一种多态性表现。

与java不同的是: 

ts 的重载只能用 同一个方法体 实现 ,同名接口合并时,如果同名方法有不同的类型声明,那么会发生函数重载。而且,后面的定义比前面的定义具有更高的优先级。

interface A {
  f(): number;
  f(x: boolean): boolean;
  f(x: string, y: string): string;
}

function MyFunc(): number;
function MyFunc(x: boolean): boolean;
function MyFunc(x: string, y: string): string;
function MyFunc(
  x?:boolean|string, y?:string
):number|boolean|string {
  if (x === undefined && y === undefined) return 1;
  if (typeof x === 'boolean' && y === undefined) return true;
  if (typeof x === 'string' && typeof y === 'string') return 'hello';
  throw new Error('wrong parameters');  
}

const a:A = {
  f: MyFunc
}

你可能感兴趣的:(typeScript,typescript)