接口算是官方文檔里的第一個(gè)知識(shí)點(diǎn)了弥臼，這篇文章會(huì)簡單介紹 TypeScrip 里的接口。
類型
在說接口之前我們先來了解下 TypeScript 里的類型掺栅，因?yàn)樵诮涌诘氖褂煤皖愋兔懿豢煞帧?/p>
JS 類型
JS 有 7 種數(shù)據(jù)類型
- number
- string
- boolean
- object纳猪，里面包含 Array, Function, Date, Object, RegExp 等
- symbol，這是 ES 6 里的氏堤，主要用來表示一個(gè)東西是唯一的，實(shí)際上比較少用闪檬。好吧，根本沒用過粗悯。。横缔。
- null衫哥，表示空
- undefined，表示未定義
let bool: boolean = true
let str: string = 'Hi'
let num: number = 1.222
let obj: object = {name: 'Jack'}
let n: null = null
let u: undefined = undefined
TS 的新類型
any
如果在 TS 里沒有聲明類型炕檩，那么默認(rèn)就是 any 類型，這樣就直接一夜回到 JS 時(shí)代笛质。
let a: number = 1
a = 'Hello' // 報(bào)錯(cuò)
let a: any = 1
a = 'Hello' // OK
enum
枚舉類主要用來規(guī)定只能選 XXX 或者 YYY，如
enum Gender {
Male = 'Male',
Female = 'Female'
}
let gender: Gender = Gender.Male
gender = Gender.Female
console.log(gender) // 'Female'
gender = Gender.Woman // 報(bào)錯(cuò)
而如果不在 enum 里初始化跷究，那么 Male 和 Female 的值就會(huì)以數(shù)值的方式顯示敲霍。
enum Gender {
Male,
Female
}
let gender: Gender = Gender.Male
gender = Gender.Male
console.log(gender) // 0
gender = Gender.Female
console.log(gender) // 1
void
這個(gè)類型就是指空值，在 C 語言和 Java 里應(yīng)該是很常見的肩杈，一般用在函數(shù)的返回值里。
function fn(): void {
console.log('fn')
}
斷言
斷言的用法是主觀地認(rèn)為這個(gè)變量的類型是什么艘儒，如
let n: any = '123'
console.log(<string>n.split(''))
這里主觀地認(rèn)為 n 是一個(gè)字符串夫偶，但是聲明的時(shí)候確是 any 類型。如果主觀認(rèn)為錯(cuò)了翻斟，會(huì)報(bào)錯(cuò)说铃。
let n: any = 123
console.log(<string>n.split('')) // 報(bào)錯(cuò)
也可以用 as 來斷言敞斋。
let n: any = '123'
console.log((n as string).split(''))
這個(gè)一般可以用在表單組件的測試用例里，首先模擬用戶輸入非法類型，然后 expect(xxxx).to.拋出TS主觀錯(cuò)誤 就可以完成一個(gè)測試用例了阳柔。
接口基礎(chǔ)
現(xiàn)在回到我們的主題蚓峦。在學(xué)習(xí) Java 的時(shí)候我就覺得這個(gè)名字很難理解，不知道用來干嘛的暑椰，因?yàn)?Java 還有一個(gè)抽象類，兩者很像而且使用場景差不多避消，但是用法又有點(diǎn)差別召夹，真的煩。幸好 TS 里就只有接口监憎，還是容易理解一些。
接口簡單來說就是規(guī)定一些 “事”偷霉，在后臺(tái)中褐筛，接口指的是雙方規(guī)定的 API，在 TS 里接口一般指這個(gè)變量擁有什么東西瞒滴。
interface Shape {
head: string;
arm: string;
}
interface Human {
name: string;
age: number;
shape: Shape;
say(word: string): void;
}
let jack: Human = {
name: 'Jack',
age: 18,
shape: {
head: 'head',
arm: 'arm'
},
say(word: string) {
console.log(word)
}
}
jack.say('hi')
上面規(guī)定了類型為 Shape 的變量應(yīng)該有 head 和 arm赞警，而 Human 類型的應(yīng)該有 name, age, shape, say 屬性。其中還對函數(shù)以及 shape 做了一些規(guī)定世剖。
這就是接口笤虫，不過是一些規(guī)范而已祖凫。
接口里的屬性
接口除了對屬性類型做了規(guī)定酬凳，還能做以下規(guī)定
readonly
interface Human {
readonly name: string
}
let jack: Human = {
name: 'Jack'
}
jack.name = 'Ivan' // 報(bào)錯(cuò): name 是只讀的
這里指定 name 是只讀的，初始化后就不能再次賦值了宁仔。
可選
有時(shí)候我們不一定要設(shè)置對象里的某個(gè)屬性，接口里可以用 "?" 來表示一個(gè)屬性是否是可選的权埠。
interface Human {
gender: string,
age?: number
}
let jack: Human = {
gender: 'Male'
// 可以不賦值 age 屬性煎谍，因?yàn)槭强蛇x的
}
描述屬性
除此之外，我們還可以控制接口里屬性規(guī)定的寫法满俗，不懂作岖？看代碼。
interface Rect {
height: number;
width: number;
[propName: string]: number
}
這里規(guī)定 Rect 這個(gè)接口里 Key: Value 對只能是 Key 為 string 類型鳍咱，而 Value 為 number 類型。
函數(shù)接口
因?yàn)楹瘮?shù)也是對象蓄坏，所以我們也可以通過接口來對函數(shù)做“規(guī)定”丑念。
interface Fn {
(a: number, b: number): number;
}
let add: Fn = function(a: number, b: number): number {
return a + b
}
console.log(add(1, 2))
這里定義了 Fn 接口，規(guī)定了參數(shù)的類型為 number渔彰，返回值的類型為 number推正。
接口的繼承
就像 ES 6 的 class 一樣，接口也可以做繼承操作植榕，效果就是會(huì)繼承父接口的“規(guī)定”。
interface Animal {
move(): void;
}
interface Human extends Animal {
name: string;
age: number;
}
let jack: Human = {
age: 18,
name: 'Jack',
move() {
console.log('move')
}
}
Human 接口繼承了 Animal 里的 move 函數(shù)的“規(guī)定”炒瘸，所以在初始化 jack 變量時(shí)也要加上 move 函數(shù)，否則報(bào)錯(cuò)拐邪。
