typeScript 核心基礎之接口interface

Posted on by

前言：

在面向對象語言中，接口是一個很重要的概念，它是對行為的抽象。接口也叫 interface 。

在 js 中沒有接口這個概念，它是新增的。該如何定義呢？下面來一起學習吧

1、接口定義

接口的作用：

  • 在面向對象編程中，接口是一種規范的定義，它定義瞭行為和動作規范；
  • 在程序設計內，接口起到一種限制和規范的作用；

接口一般使用 interface 關鍵字來定義，名字首字母需要大寫。在項目中定義接口的時候，一般在名字前加一個大寫 I 字母，能夠快速識別該類型是接口。如：

interface IPerson{
 name: string
 age: number
 sex: string
}

接口的主要作用就是用來進行約束對象的規范，如：

interface IPerson{
 name: string
 age: number
 sex: string
}
let webPerson: IPerson = {
 name:"倩倩",
 age:18,
 sex:'girl'
}

使用上述 IPerson 定義對象的時候，上述三個屬性都是必加的，如果漏掉一個就會有錯誤提示。那如果某些屬性有些對象有，有些對象沒有呢？比如職業。

接口成員也可以是缺省的，定義的時候使用 "?" ，如：

interface IPerson{
 name: string
 age: number
 sex: string
 work?: string
}

但是在特殊情況下，有些人有飲食忌諱，大多數沒有，有些人有特殊愛好，大多數也沒有，此時這個屬性不能具體，此時就可以添加任意屬性，使用 propName 來定義，如：

interface IPerson{
 name: string
 age: number
 sex: string
 work?: string
 [propName:string]: any
}
let webPerson: IPerson = {
 name:"倩倩",
 age:18,
 sex: 'girl',
 hobby: "跳舞",
 refuse:"不吃羊肉"
}

添加任意屬性之後，可以添加任意多個特殊屬性。

2、接口繼承

接口和類一樣，接口也可以相互繼承。能夠從一個接口裡復制成員到另一個接口裡，可以靈活地將接口分割到可重用的模塊裡面。繼承的時候使用 extends 關鍵字。如：

interface IPerson{
 name: string
 age: number
 sex: string
 work?: string
 [propName:string]:any
}
interface IAdult extends IPerson{
 isHaveChildren: boolean
 isBoss: boolean
}
let Tom: IAdult = {
 isBoss: false,
 isHaveChildren: false,
 name: '倩倩',
 age: 20,
 sex: "girl"
}

一個接口可以繼承一個或多個接口，多個接口之間使用逗號 "," 分割。如：

interface IPerson{
 name: string
 age: number
 sex: string
}
interface IAdult extends IPerson{
 isBoss: boolean
}
interface elderly extends IPerson, IAdult{
 isRetire:boolean 
}

接口的繼承也就是接口的擴展，接口擴展就是多添加瞭一些約束，一個接口可以擴展多個接口。

3、類實現接口

在 typeScript 中，接口可以繼承類，這樣接口就具有瞭類的所有成員，同時這個接口隻能引用這個類或者它的字類的實例。如：

class Person{
 name:string;
 age: number
 constructor(name: string, age: number) {
  this.name = name
  this.age = age
 }
}
interface IAdult extends Person{
 married:boolean
}
let Tom: IAdult = {
 name: "Tom",
 age: 20,
 married: true
}
console.log(Tom);

接口繼承一個類類型時，它會繼承類的成員但不包括其實現。

到此這篇關於typeScript 核心基礎之接口interface的文章就介紹到這瞭,更多相關typeScript 接口interface內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：