TypeScript实例讲解（五）

接上一篇：TypeScript实例讲解（四）

本篇内容：深入 interface 接口。

interface 接口

interface 使用

interface 用于定义通用的类型。我们约定接口首字母大写以表示区分。

// 例 1
// 定义一个接口 User
interface User {
    name: string
    age: number
}
// 定义一个变量
const bear: User = {
  name: 'bear',
  age: 20
}

上面我们使用 interface 语法定义了一个接口 User，接口约束了变量 bear 必须要有 name 和 age 两个属性，不允许属性缺失或溢出。

// 例 2
// 同样定义一个接口 User
interface User {
    name: string
    age: number
}
// 定义函数一
const getUserName = (user: User): string => {
    return user.name
}
// 定义函数二
const setUserName = (user: User, name: string): void => {
    user.name = name
}

我们同样定义一个接口 User以及 getUserName 和 setUserName 两个函数。

// 调用函数 getUserName (方式一)
const user = {name: 'bear', age: 10}
getUserName(user)                     // bear

// 调用函数 getUserName (方式二)
getUserName({name: 'bear', age: 10})  // 提示错误

注意，我们用不同方式传参给函数，得到两种不同的结果。方式一通过缓存变量的形式传入没有报错，得到正确的结果。方式二通过字面量的形式传入则会提示错误。原因是当以字面量的形式直接传递对象时，TypeScript 会进行强校验。

interface 修饰符

一、可选修饰符（ ? ）

// 例 3
interface User {
    name: string,
    age?: number
}

如果希望某个或某些属性可有可无，我们可以使用?修饰符表示。

二、只读修饰符（ readonly ）

// 例 4
interface User {
    readonly name: string,
    age: number
}

如果希望某个或某些属性只能读取，我们可以使用readonly修饰符表示。

三、任意属性（ [ ] ）

// 例 5
interface User {
    name: string,
    age: number,
    [propName: string]: any
}

如果我们允许包含额外的属性，可以使用上面例5中的方法。

interface 继承

// 例 6
interface User {
    name: string
}
interface student extends User {
    study(): string
}

通过 extends 语法可以实现接口继承。上面例6中接口 student 约束了必须包含 name 属性，还必须包含自己的 study() 方法。

interface 和 type 的区别

接口（interface）与类型别名（type）的区别是：interface只能代表一个对象，无法代表基础类型。我们默认能用接口定义的类型就用接口定义，实在不行才用类型别名。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。