接口的使用

如果我們有一個(gè)函數(shù)，這個(gè)函數(shù)接受一個(gè) person 對象，然后返回它的某個(gè)屬性，這時(shí)會(huì)發(fā)現(xiàn)它報(bào)錯(cuò)了：

image.png

interface Person{
    name: string;
    age: number;
}
const getName = (person: Person) => person.name;

可選屬性：

interface Person{
    name: string;
    age?: number;
}
const getName = (person: Person) => person.name;
console.log(getName({name: "haha"}));

只讀屬性

interface Person{
    name: string;
    age?: number;
    readonly isMale: boolean;
}

只讀屬性只能在對象剛剛創(chuàng)建的時(shí)候修改其值

函數(shù)

一般是在接口內(nèi)部描述函數(shù)：

interface Person{
    name: string;
    age?: number;
    readonly isMale: boolean;
    say: (words: string) => string;
}

或者先用接口描述函數(shù)類型：

interface Say {
    (words: string) : string;
}
interface Person{
    name: string;
    age?: number;
    readonly isMale: boolean;
    say: Say;
}

額外的屬性檢查

interface SquareConfig {
    color?: string;
    width? : number;
}
function getSquare(config: SquareConfig): { area: number }{
  ...
}
getSquare({ width: 10, height: 5 }); //Error

當(dāng)我們傳入了一個(gè)任何“目標(biāo)類型”都不包含的屬性height時(shí)，會(huì)觸發(fā)額外的屬性檢查，并報(bào)出一個(gè)錯(cuò)誤。
繞開這些檢查有三種方法：

• 使用類型斷言

getSquare({ width: 10, height: 5 } as SquareConfig ); 

• 添加一個(gè)字符串索引簽名

interface SquareConfig {
    color?: string;
    width?: number;
    [proName:string]: any;
}
getSquare({ width: 10, height: 5, opacity: 1 }); 

這表示的是SquareConfig可以有任意數(shù)量的屬性，并且只要它們不是color和width，那么就無所謂它們的類型是什么。

• 將字面量賦值給另外一個(gè)變量

interface SquareConfig {
    color?: string;
    width? : number;
}
function getSquare(config: SquareConfig): { area: number }{
  ...
}
let params = {
    width: 10,
    height: 5,
    opacity: 1
}
let square = getSquare(params)

本質(zhì)上是轉(zhuǎn)化為 any 類型，一般不建議采用這種方法。

可索引的類型

interface stringArray{
    [index: number] : string
}
let arr1: stringArray = [1,2,3]; // Error
let arr2: stringArray = ["1","2","3"]; // OK

interface User {
    [name: string]: number;
}
let ages: User = {
    "dingdabao": 25,
    "lubenwei": 30
}

接口繼承

interface Animal {
    height: number;
    weight: number;
}
interface People {
    name: string;
    age: number;
}
//接口支持多繼承
interface Student extends People,Animal {
    study: () => void;
}