Typescript基礎(chǔ)語法2--interface

我們在之前講過給變量進行類型聲明,Typescript會對值所具有的結(jié)構(gòu)進行類型檢查叠纷。在Typescript里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約崩泡。
之前罕容,我們講過給一個變量聲明對象類型是這樣的:

var obj : {name : string}

但是有了接口后泡挺,我們可以

interface dabao {
       name : string;
       age : num
}
var obj : dabao = {
      name : 'cxh',
      age : 12;
}

上面接口描述對象必須包含一個string類型的name屬性以及一個number類型的age屬性迫皱。
可選屬性
接口里的屬性不全都是必需的摊腋。 有些是只在某些條件下存在妄痪,或者根本不存在

interface dabao {
      name : string;
      age ?: number;
}
var obj : dabao = {
     name : 'cxh'
}

只讀屬性
一些對象屬性只能在對象剛剛創(chuàng)建的時候修改其值哈雏。 你可以在屬性名前用 readonly來指定只讀屬性:

interface dabao {
      readonly  name : string;
      readonly age : number;
}
var obj : dabao = {
      name : 'cxh'
}
obj.name = 'xiaobao' //error

ReadonlyArray<T>
ReadonlyArray<T>類型與Array<T>相似,只是把所有可變方法去掉了衫生,因此可以確保數(shù)組創(chuàng)建后再也不能被修改:

let  dabao  :  ReadonlyArray<number>  = [1,2,3];
let  dabao[2] = 3 //error
let  dabao.length = 10 //error

屬性檢查
假如我們傳入

interface dabao {
    name ?: string;
    age ?: number
}

目的是得到可選name和age屬性的對象裳瘪,但是當(dāng)我們定義多余的屬性時,typescript會進行多余的檢查罪针,例如:

interface dabao {
    name ?: string;
    age ?: number;
}

let obj : dabao = {
    name : 'cxh';
    height : 180
} 
//error  'height ' not expected in type 'dabao' 

如果想要繞開檢查彭羹,有兩種方式:
第一

let  obj   =  <dabao>{
      name : 'cxh',
      height :180
}

第二

interface dabao {
    name ?: string;
    age ?: number;
    [propName: string] : any;
}
let obj : dabao = {
      name : 'cxh',
      height : 180
}

函數(shù)類型

interface dabao {
      (name : string,age : number) : boolean
}
var fnc : dabao = function(name : string,age:number) : boolean{
      return true
}

可索引的類型
可索引類型具有一個 索引簽名,它描述了對象索引的類型泪酱,還有相應(yīng)的索引返回值類型派殷。 讓我們看一個例子:

interface dabao {
      [index:number] : string
}
let array: dabao;
array  = ['cxh','ccc'];

上面例子里还最,我們定義了dabao接口,它具有索引簽名毡惜。 這個索引簽名表示了當(dāng)用 number去索引dabao時會得到string類型的返回值拓轻。
共有支持兩種索引簽名:字符串和數(shù)字。 可以同時使用兩種類型的索引经伙,但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型扶叉。 這是因為當(dāng)使用 number來索引時,JavaScript會將它轉(zhuǎn)換成string然后再去索引對象帕膜。
例如:

interface dabao{
  [index: string]: number;
  length: number;    // 可以辜梳,length是number類型
  name: string         // 錯誤,`name`的類型與索引類型返回值的類型不匹配
}

類實現(xiàn)接口

interface  dabao {
      setName (n: string)
}

class Dabao implements dabao {
      name : string;
      setTime(n : string) {
              this.name = n
      }
}

接口描述了類的公共部分泳叠,而不是公共和私有兩部分作瞄。 它不會幫你檢查類是否具有某些私有成員。

接口繼承接口

interface xiaobao {
      name : string;
}
interface dabao extends xiaobao {
      age : number;
}

let obj = <dabao>{
      name : 'cxh',
      age : 18,
      height : 180
}  
console.log(obj)

Paste_Image.png

混合類型

interface dabao {
      setName(n : string);
      age : number;
      (height : number) : string;
}
var obj : dabao;
console.log(obj = <dabao>function(height){ return '1'+height})
console.log(obj.age = 12)
console.log(obj.setName = function(name:string) : string{return 'nihao'})

Paste_Image.png

接口繼承類

class Control {
    private state : any;
}
interface SelectableControl extends Control {
    select(): string;
}
class Button  implements SelectableControl{

}
Paste_Image.png
class Control {
    private state : any;
}
interface SelectableControl extends Control {
    select(): string;
}
class Button  implements SelectableControl{
       select(): string {return ''}
}
Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末危纫,一起剝皮案震驚了整個濱河市宗挥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌种蝶,老刑警劉巖契耿,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異螃征,居然都是意外死亡搪桂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門盯滚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來踢械,“玉大人,你說我怎么就攤上這事魄藕∧诹校” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵背率,是天一觀的道長话瞧。 經(jīng)常有香客問我,道長寝姿,這世上最難降的妖魔是什么交排? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮饵筑,結(jié)果婚禮上埃篓,老公的妹妹穿的比我還像新娘。我一直安慰自己翻翩,他們只是感情好都许,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布稻薇。 她就那樣靜靜地躺著,像睡著了一般胶征。 火紅的嫁衣襯著肌膚如雪塞椎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天睛低,我揣著相機與錄音案狠,去河邊找鬼。 笑死钱雷,一個胖子當(dāng)著我的面吹牛骂铁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播罩抗,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼拉庵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了套蒂?” 一聲冷哼從身側(cè)響起钞支,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎操刀,沒想到半個月后烁挟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡骨坑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年撼嗓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欢唾。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡且警,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出匈辱,到底是詐尸還是另有隱情振湾,我是刑警寧澤杀迹,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布亡脸,位于F島的核電站,受9級特大地震影響树酪,放射性物質(zhì)發(fā)生泄漏浅碾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一续语、第九天 我趴在偏房一處隱蔽的房頂上張望垂谢。 院中可真熱鬧,春花似錦疮茄、人聲如沸滥朱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽徙邻。三九已至排嫌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缰犁,已是汗流浹背淳地。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留帅容,地道東北人颇象。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像并徘,于是被迫代替她去往敵國和親遣钳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 10,957評論 6 13
  • { "Unterminated string literal.": "未終止的字符串文本麦乞。", "Identifi...
    一粒沙隨風(fēng)飄搖閱讀 10,555評論 0 3
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理耍贾,服務(wù)發(fā)現(xiàn),斷路器路幸,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 煙雨神魂 第一章 煙雨樓(1) 民國六年荐开,軍閥混戰(zhàn)。各路軍閥...
    一切皆無名閱讀 203評論 0 0
  • 11-26星期六11:41地鐵八號線 練完瑜伽課回家的路上简肴,阿秀買了螃蟹和蝦等我回去吃晃听。今天的瑜伽課上的很給力,老...
    魏雨self閱讀 252評論 1 0