TypeScript躬行记(2)——接口

简介:   在传统的面向对象语言中,接口(Interface)好比协议,它会列出一系列的规则(即对行为进行抽象),再由类来实现这些规则。而TypeScript中的接口更加灵活,除了包含常规的作用之外,它还能扩展其它的类、为对象的类型命名以及约束值的结构等,大大消除了许多潜在的错误。

一、属性


  TypeScript中的接口可通过声明属性和其类型来限制对象的结构。例如定义一个名为Person的接口,包含一个字符串类型的name属性和一个数字类型的age属性,如下所示。

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

  当声明一个Person类型的对象时,必须将两个属性都定义,并且类型也要与接口中的一致,如下所示。

let worker: Person = {
  name: "strick",
  age: 28
};

  一旦在worker对象中少定义某个接口中的属性或多一个在接口中未声明的属性,那么就会在编译阶段报错。注意,TypeScript的类型检查器不会比对属性在接口和对象中的定义顺序,只要名称和类型匹配,就能编译通过。

1)可选属性

  TypeScript允许接口中的属性定义为可选的,只要在属性名后跟问号(?),就能变为可选属性,如下所示。

interface Person {
  school?: string;
}

  可选属性既能预定义可能需要的属性,也能在捕获没有的属性时给出带有启发作用的错误提示,例如在创建worker对象时,定义一个schools属性(如下所示),在编译时就会报"'schools' does not exist in type 'Person'. Did you mean to write 'school'?"的错误。

let worker: Person = {
  schools: "university"
};

  由此可知,在对象中定义一个未在接口中声明的属性仍然是不允许的。

2)只读属性

  如果要让对象的某个属性只能在创建时被赋值,那么可以将readonly关键字作用于相应的接口属性,使其变为只读的,如下所示。

interface Person {
  readonly gender: string;
}

  由于gender是一个只读属性,因此不能在对象初始化后对其进行修改,如下所示。

let worker: Person = {    //正确
  gender: "男"
};
worker.gender = "女";     //错误

3)任意属性

  当接口需要包含任意属性时,可以通过索引的方式实现,如下所示,用方括号将索引名和索引类型包裹起来。

interface Person {
  [prop: string]: string;
}

  在使用Person类型时,可以传任意多个字符串类型的属性,如下所示。

let worker: Person = {
  name: "strick",
  gender: "男"
};

  注意,一旦声明了任意属性之后,那么必选属性和可选属性都得是其类型的子类型。在下面的示例中,由于可选的age属性的类型是number,不是string的子类型,因此在编译时会报错。

interface Person {
  name: string;                //正确
  age?: number;                //错误
  [prop: string]: string;
}

  TypeScript除了支持字符串类型的索引之外,还支持数字类型的索引,如下所示。

interface Person {
  [prop: number]: number;
}

  有一点需要注意,当在接口中同时定义字符串和数字两种类型的索引时,后者对应的值类型得是前者的子类型。因为这个原因,导致下面的代码无法在编译时通过。

interface Person {
  [prop: string]: string;
  [prop: number]: number;            //错误
}

  TypeScript之所以如此限制,是因为JavaScript会将数字自动转换成字符串后再去索引对象,例如用10和“10”两个值去索引,得到的结果是一样的,所以两种索引对应的值类型要保持一致。


二、继承


1)类继承接口

  与C#、Java等面向对象语言一样,TypeScript中的类也能继承接口,并且接口中的成员会让类强制实现。有了接口之后,它的任何更改都有可能导致编译错误,从而就能保证相关代码的同步。下面通过一个示例来演示类继承接口,首先创建一个名为Person的接口,包含name属性和getName()方法,如下所示。

interface Person {
  name: string;
  getName(): string;
}

  然后再创建一个名为Member的类,通过implements关键字继承Person接口,如下所示。在编译时,一旦发现类中缺少接口的属性或方法,就会马上报错。

class Member implements Person {
  name: string = "strick";
  getName() {
    return this.name;
  }
}

  类能继承多个接口,只要在类中实现它的成员,就能编译成功,如下所示,Member类继承了Person和Profile两个接口,限于篇幅原因,在其内部省略了name和getName()两个成员的实现。

interface Profile {
  school: string;
}
class Member implements Person, Profile {
  school: string = "university";
}

  注意,类不能实现接口中的所有成员,例如在接口中定义一个构造器,再用一个类通过构造函数来实现这个接口,此时编译将会失败,代码如下所示。

interface Person {
  new (name: string);
}
class Member implements Person {
  constructor(name: string) { }
}

  类包含静态和实例两部分,由于编译器只会对接口的实例部分进行类型检查,而constructor()函数属于类的静态部分,因此会被忽略,从而导致无法在类中找到匹配的成员来实现接口。

  如果要实现接口中的构造器,那么有两种方式可供选择。第一种是参数回调,如下代码所示,Member类不再直接继承Person接口,而是作为参数传递给createPerson()函数,并且其第一个参数被声明为Person类型。


class Member {
  constructor(name: string) { }
}
function createPerson(ctor: Person, name: string) {
  return new ctor(name);
}
createPerson(Member, "strick");


  第二种是类表达式,如下代码所示,将Man变量声明为Person类型,并把Member类赋给它。

let Man: Person = class Member {
  constructor(name: string) { }
}

2)接口继承接口

  接口之间也可相互继承,这样既能更细粒度的分割接口,也能最大化的重用代码。与类不同的是,只需将其它的接口成员复制过来,而不必实现它们。在下面的示例中,Square接口通过extends关键字继承了Shape接口。

interface Shape {
  background: string;
}
interface Square extends Shape {
  width: number;
}

  一个接口还可以继承多个其它接口,创建出一个合成接口,如下所示,extends后面跟了Shape和Border两个接口。

interface Border {
  color: string;
}
interface Ellipse extends Shape, Border {
  angle: string;
}

3)接口继承类

  当接口继承一个类时,它会继承类的所有成员(包括私有和受保护的成员),但不会去实现它们。以下面的TextBox接口为例,它继承了Control类。


class Control {
  private width: number;
  protected height: number;
}
interface TextBox extends Control {
  type: string;
}
class Tel implements TextBox {
  type: string = "tel";
}

  上例中的Tel类直接继承了TextBox接口,虽然实现了接口中的type属性,但仍然会报“Type 'Tel' is missing the following properties from type 'TextBox': width, height”的错误。因为Button接口继承的width和height两个属性也需要实现。为了避免出现这些错误,可以通过Control的子类来实现TextBox接口,如下所示。

class Password extends Control implements TextBox {
  type: string = "password";
}


相关文章
|
7月前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
65 0
|
7月前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
57 0
|
3月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
47 1
|
2月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
4月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
5月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
4月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
67 0
|
6月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
65 4
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
93 0