【TypeScript】TS接口interface类型（三）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【TypeScript】TS接口interface类型（三）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【TypeScript】接口interface类型（三）

【TypeScript】TS接口interface类型（三）,TypeScript实践应用,typescript,ubuntu,javascript

一、前言

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

二、语法定义

语法：使用 interface 关键字开头，定义类型对象，其中可以包含字符串和函数类型

典型的定义与使用参考下面：

interface Person {
  name: string;
  age: number;
  sayHi(): void;
}

const person: Person = {
  name: "Alice",
  age: 30,
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

三、具体使用及规则限制

3.1 可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

下面我们来给Person定义一个接口，其中有些属性是可选的

interface Person {
    name: string,
    age: number,
    studentNo?: string
}

let persn1: Person = {
    name: 'suwu150',
    age: 24,
    studentNo: '13240124'
}
let person2: Person = {
    name: 'suwu150',
    age: 24,
}

以上就是一个可选属性的添加，studentNo这个属性可以有，也可以不用赋值。我们编译后，能够看到如下结果：
【TypeScript】TS接口interface类型（三）,TypeScript实践应用,typescript,ubuntu,javascript
这个Person接口，也能作为参数传递给函数使用，其中也能按照可选参数进行处理。

3.2 只读属性

有时候我们需要指定一个属性只能在定义的时候赋值，其他情况下只能读取，不能再次修改，那就需要处理为只读属性。
可以通过在属性名前添加 readonly 关键字来指定只读属性，只读属性只能在创建的时候对其赋值，一旦创建完成，就再也不能更改

语法：readonly + 属性名

interface Person {
  readonly name: string,
      age: string
}

let person: Person = {
  name: 'suwu150',
  age: 28
};

person.name = '张三'; // Cannot assign to 'name' because it is a read-only property. 
person.age = 30;

编译器中编译运行，会发现

age 能够正常赋值，不会提示错误
name报错，提示是只读属性，不能够再次赋值

【TypeScript】TS接口interface类型（三）,TypeScript实践应用,typescript,ubuntu,javascript

3.3 可索引的类型

可索引类型具有一个_索引签名_，它描述了对象索引的类型，还有相应的索引返回值类型。

描述通过索引获取的元素或属性，形如 Score[0]、Score[‘name’]

简单看下索引值定义的🌰例子：

interface Score {
 [index: number]: number          
}

let score: Score = [23,65,99,20];

console.log(score);
console.log(score[2]);

我们定义了Score接口，具有索引签名。
以上表示当用 number 去索引 Score 接口时，会返回结果为number类型的值。

需要注意的是TypeScript支持两种索引签名： 字符串 和 数字。下面来看看使用数字索引和字符串索引的结果。

interface Person {
 [key: number]: number          
}

interface Student {
 [key: number]: string          
}

let person: Person = [23,65,99,20];
let student: Student = ['23','65','99','20'];

console.log(person);
console.log(student)
console.log(person[2]);
console.log(person['2']);
console.log(student[2]);
console.log(student['2']);

从上面的结果能够看出，字符串和数字获取到的是同一个值，这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。

3.4 函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

函数类型使用语法：

interface 接口名 {
  (参数名): 返回值;
}

可以看看简单的接口中使用函数类型的实例

interface SetName {
  (newName: string): string;
}

let setname: SetName;
setname = (name: string) => {
    console.log(name);
    return name
};

setname('new suwu150');

编译运行看看：

【TypeScript】TS接口interface类型（三）,TypeScript实践应用,typescript,ubuntu,javascript

在使用函数类型类型时，需要注意定义的参数名可以不一致，但参数类型得保持一致。

3.5 类类型

类类型是TypeScript中比较常规的一种类型，接口的使用也离不开类类型的使用。
和其他静态编译语言中类似，TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface Person {
  name: string
}

class Student implements Person {
  name = '';
  constructor(h: number, m: number) { }
}

以上就是一个典型的类类型的接口的使用，如果我们不在Student中初始化name，则会在编译阶段提示属性缺失
【TypeScript】TS接口interface类型（三）,TypeScript实践应用,typescript,ubuntu,javascript
同样的，不仅仅在接口中能够实现属性的定义，也能够定义方法。