2022-最新TypeScript教程(四)

目录

接口

接口中的任意属性 

接口和类型别名type的区别

1. 两者都可以用来描述对象或函数的类型

2.与接口不同,类型别名还可以用于其他类型,如基本类型(原始值)、联合类型、元组

3.接口可以定义多次,类型别名不可以

4.接口和类型别名的扩展

· 接口扩展接口 

· 类型别名扩展类型别名

· 接口扩展类型别名

· 类型别名扩展接口 


接口

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,除了可用于[对类的一部分行为进行抽象]以外,也常用于对「对象的形状(Shape)」进行描述。

interface Person {
    name: string;
    age: number;
}
let Du: Person = {
    name: 'Du',
    age: 23
};

我们定义了一个接口 Person,接着定义了一个变量 Du,它的类型是 Person。这样,我们就约束了 Du的形状必须和接口 Person 一致,少一些属性和多一些属性都是不允许的,接口一般首字母大写。

接口中的任意属性 

有时候我们希望一个接口中除了包含必选和可选属性之外,还允许有其他的任意属性,这时我们可以使用 索引签名 的形式来满足上述要求。 

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Du',
    class:'Web'
};

 这里注意:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集。在上例中,name和age都必须是any的子类型。

一个接口中只能有一个任意属性,如果接口中有多个类型的属性,则可以在任意属性中使用联合类型去定义:

interface Person {
    name: string;
    age?: number; // 这里真实的类型应该为:number | undefined
    [propName: string]: string | number | undefined;
}

let tom: Person = {
    name: 'Tom',
    age: 23,
    class: 'Web'
};

 在上述例子中,name和age的类型都是class联合类型的子集。

接口和类型别名type的区别

在大多数的情况下接口类型类型别名的效果等价,但是在某些特定的场景下这两者还是存在很大区别的。

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命名的数据定义数据模型。

type(类型别名)会给一个类型起个新名字。 type 有时和 interface 很像,但是type可以作用于原始值(基本类型),联合类型,元组以及其它任何类型。

1. 两者都可以用来描述对象或函数的类型

· interface:

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

· type: 

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2.与接口不同,类型别名还可以用于其他类型,如基本类型(原始值)、联合类型、元组

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

// dom
let div = document.createElement('div');
type B = typeof div;

3.接口可以定义多次,类型别名不可以

interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };

4.接口和类型别名的扩展

接口可以扩展类型别名,同理,类型别名也可以扩展接口。

接口的扩展就是继承,通过 extends 来实现。类型别名的扩展就是交叉类型,通过 & 来实现。

· 接口扩展接口 

interface PointX {
    x: number
}

interface Point extends PointX {
    y: number
}

 · 类型别名扩展类型别名

type PointX = {
    x: number
}

type Point = PointX & {
    y: number
}

 · 接口扩展类型别名

type PointX = {
    x: number
}
interface Point extends PointX {
    y: number
}

· 类型别名扩展接口 

interface PointX {
    x: number
}
type Point = PointX & {
    y: number
}

持续更新中......

你可能感兴趣的:(typescript,javascript,前端)