关于前端:一文说明白TypeScript-的接口

● 通过前两章的学习, 咱们基本上对于 TS 曾经入门了● 然而咱们会发现, 咱们如同对于类型限度还短少了一些内容● 这一张咱们持续学习

接口
● 初学者刚一听到这个名字, 可能不太好了解
● 接触过前后端交互的可能会对这个名字比拟迷茫, 容易凌乱
● 然而, 都不要纠结, 遗记你间接所有的所有, 他就是一个名字而已

● 就像这个玩意, 老婆饼, 老婆在哪里, 就是个名字而已

● 那么接口到底是干什么的呢 ?

○ 其实就是一个用来限度非根本数据的类型限度伎俩而已

● 咱们回顾之前的类型限度, 咱们发现

○ 对于 对象, 函数, 类 等内容并没有很好的限度形式

○ 难道真的没有, 并不是

○ 接口就是其中一个

接口初体验
● 来看上面这个例子
let user: {name: string} = {}

● 所以这一段代码就会提醒谬误

● 那么咱们就须要批改代码, 赋值的时候须要有一个 name 属性存在

let user: {name: string} = {name: '千锋大前端'}

● 这样就没有问题了

● 再持续看下一个例子

let user: {name: string} = {name: '千锋大前端'}
let person: {name: string} = {name: '前端培训界扛把子'}

● 咱们会发现 user 变量和 person 变量的类型限度应用的是截然不同的内容

○ 然而我须要逐次书写

○ 依照咱们程序员的懈怠特点来看, 这个货色为什么不能只写一遍呢 ?

○ 肯定是能够的

● 这个货色就叫做 接口

○ 咱们能够把这一种类型限度, 拿进去写成一个接口

○ 用起来就不便多了

● 接口的模式书写

interface Info {name: string}

let user: Info = {name: '千锋大前端'}
let person: Info = {name: '前端培训界扛把子'}

○ interface : TS 中定义接口的关键字○ Info : 接口名称(倡议首字母大写)● 是不是一下子恍然大悟了

接口的各类属性
根底接口属性
● 就是对接口内的各种属性进行数据类型限度

interface Info {
    name: string
    age: number
    gender: boolean
    hobby: string[]}

● 这个接口就是一个根底接口限度

○ 必须蕴含一个 name 属性, 而且是 string 类型

○ 必须蕴含一个 age 属性, 而且是 number 类型

○ 必须蕴含一个 gender 属性, 而且是 boolean 类型

○ 必须蕴含一个 hobby 属性, 而且是由 string 组成的数组

选填属性
● 咱们能够设置一些属性选填

interface Info {
    name: string
    age: number
    gender: boolean
    hobby: string[]
    city?: string
}

这里就是设置了一个可选属性

○ city 属性可有可无, 如果增加了 city 属性, 必须是 string 类型

只读属性
● 咱们也能够设置一些属性不容许被批改

● 就须要在接口内写属性的时候, 用到 readonly 关键字

interface Info {
    name: string
    age: number
    gender: boolean
    hobby: string[]
    city?: string
    readonly nationality: string
}

这样定义结束当前, nationality 属性值定义好当前就不能批改了

额定属性
● 到这里咱们会发现一个问题

○ 那就是我要是用接口限度一个数据, 那么必须要把所有可能会呈现的属性都写上

○ 然而万一我只能确定局部属性, 其余的不确定怎么办呢

● 这个时候能够用到额定属性

interface Info {
    name: string
    age: number
    gender: boolean
    hobby: string[]
    city?: string
    readonly nationality: string
    [props: string]: any
}

● 这就示意, 除了这里曾经列出来的属性, 还能够增加其余的键值对

○ 然而 key 必须是字符串类型

○ 值能够是任意类型

● 这个额定属性其实也不太倡议应用

○ 第一: 咱们最好精确的把握咱们本人写的数据类型限度

○ 第二: 这样一来, 咱们的限度其是意义就并不是很大了

索引型接口
● 索引型接口个别就是用接口去束缚一个数组

interface StringArray {[index: number]: string
}

● 咱们先来剖析这个接口

○ 用的是额定属性的形式

○ 能够增加任意个属性

○ 然而 key 必须是一个 number 类型

■ 如果是对象数据结构, 那么 key 只能是 string 类型

■ 数组数据类型, key 才是 number 类型

○ 值必须是一个 string

● 所以这个接口就限度了必须是一个由字符串组成的数组

● 其实这个就等价于咱们限定数组的形式是一样的

interface StringArray {[index: number]: string
}
let list: StringArray = ['hello']

// 等价于

let list2: string[] = [ 'world']

函数接口
● 咱们思考一下, 其实对于函数的限定无非就是两个局部

○ 参数

○ 返回值

● 所以一个函数接口就是限度好函数的参数和返回值就好了

interface SearchFunc {(x: number, y: string): string
}

● 剖析一波

○ 这个限度了须要有两个参数

■ 一个是 number 类型

■ 一个是 string 类型

○ 还限度了返回值

■ 必须是 string 类型

○ 那么这种数据类型, 就必定是函数了

● 然而这种接口个别用来限度 函数表达式

○ 对于申明式函数不实用

interface SearchFunc {(x: number, y: string): string
}

const fn: SearchFunc = function (x, y) {return x + y}

接口继承
● 接口也是能够实现继承的

● 同样是应用 extends 关键字

interface Person {
  name: string
  age: 18
}

// Student 接口继承自 Person 接口
interface Student extends Person {classRoom: number}

类接口
● 我为什么把 类接口 放在最初面呢, 因为他非常复杂

类的察看和剖析
● 咱们先来写一个简略的类剖析一下

class Student {constructor (name, age) {
        this.name = name
        this.age = age
    }

    sayHi () {console.log(`Hello, My name is ${ this.name}`)
    }
}

● 咱们来看一下, 如何能力对一个类做出限度

○ 限度好调用必须和 new 关键字连用

○ 类外面有一个 constructor 结构器, 须要承受参数并且限定返回的实例是一个什么样的对象

○ 咱们调用这个类的时候传递多少个参数, 别离是什么类型

○ 类的原型上有多少个办法

● 须要这么多维度能力限度好一个类类型数据

类接口
● 首先, 咱们先要来学习一个新的接口标准, 就叫做类接口

● 类接口是专门给类应用的

● 先来看一下

// 对象接口, 限度实例对象
interface StudentInstance {
    name: string
    age: number
}
// 类接口, 限度结构器
interface StudentConstructor {
    // 结构器的返回值必须要时一个合乎 StudentInstance 实例限度的对象
    new (name: string, age: number): StudentInstance
}

● 给一个类应用接口, 须要应用 implements 关键字

class Student implements StudentConstructor {constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
}

 看上去如同很好的样子, 也很简略的嘛

● 然而写完才发现, 全是谬误

● 我来帮你剖析一下

○ StudentConstructor 接口, 看似是一个类接口, 然而其实只是限度了 new 关键字 和 返回值类型, 不能说他是一个类, 更像是一个函数, 所以咱们那它去限度一个类显然不太好

○ Student 这个类, 不是函数, 是一个类, 外面的 constructor 才是一个结构器函数, 那么这个结构器在没有被调用的时候, 是没有实例的, 所以你没方法正当增加 name 和 age 属性

● 全都是问题, 那我怎么办

● 这个时候, 咱们要想更好的做出所有限度, 就须要借助工厂函数

○ 并且还须要两个接口

○ 一个限度实例对象

○ 一个限度结构器

● 先不焦急退出 TS 限度, 先把类写成工厂模式

// 定义工厂函数
// function createStudent(类, 参数 1, 参数 2) {}
function createStudent(ctro, name, age) {return new ctro( name, age)
}

● 也就是说, 咱们须要把类放进工厂函数内去调用即可

○ 咱们的工厂函数须要承受一个 类, 并且还要承受这个类须要的 参数

○ 在工厂函数内进行实例化操作, 而后返回来

● 接下来咱们就能够加上接口限度了

// 实例接口, 限度实例对象
interface StudentInstance {
  name: string
  age: number
  sayHi(): void}

// 类接口, 限度结构器
interface StudentConstructor {new (name: string, age: number): StudentInstance
}

// 工厂函数
function createStudent(ctro: StudentConstructor, name: string, age: number): StudentInstance {return new ctro( name, age)
}

○ 工厂函数的 ctro 参数, 必须要是一个满足 StudentConstructor 接口的类

○ 工厂函数的返回值必须是一个满足 StudentInstance 接口的实例对象

○ 通过这两点, 就限度了类的实例对象有的成员, 多了就不行

■ 因为工厂函数只能承受这些数据

■ 多了的话, 调用工厂函数就会出错了

● 最初书写类

// 实例接口, 限度实例对象
interface StudentInstance {
  name: string
  age: number
  sayHi(): void}

// 类接口, 限度结构器
interface StudentConstructor {new (name: string, age: number): StudentInstance
}

// 工厂函数
function createStudent(ctro: StudentConstructor, name: string, age: number): StudentInstance {return new ctro( name, age)
}

// 定义类
class Person implements StudentConstructor {
    name: string
    age: number

    constructor (name: string, age: number) {
      this.name = name
      this.age = age
    }

    sayHi ():void {}
}

// 开始应用
let s1 = createPerson(Student, '千锋大前端', 10)
console.log(s1)

● 这时候, 一个真正的对类的限度就实现了

● 的确是十分麻烦, 所以咱们在开发过程中绝对比拟少的对 类进行 限度

● 因为类其实自身就是一种限度