TypeScript 中的interface接口

使用接口約束類型

interface Girl {
  name: string;
  age: number;
  bust: number;
}

const screenResume = (girl: Girl) => {
  girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "進入面試");
  girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "胸圍是：" + girl.bust);
};
const girl = {
  name: "大腳",
  age: 18,
  bust: 94,
};

screenResume(girl);
getResume(girl);

接口和類型別名很像，但是類型別名可以直接給類型，比如string，而接口必須代表對象。

接口非必選值的定義

// 使用 ? 來標記可選值
interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
}
const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "胸圍是：" + girl.bust);
  girl.waistline && console.log(girl.name + "腰圍是：" + girl.waistline);
};

---

允許加入任意值

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
}
const girl = {
  name: "大腳",
  age: 18,
  bust: 94,
  waistline: 21,
  sex: "女",
};
const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "胸圍是：" + girl.bust);
  girl.waistline && console.log(girl.name + "腰圍是：" + girl.waistline);
  girl.sex && console.log(girl.name + "性別是：" + girl.sex);
};

接口里的方法

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
  say(): string;
}

const girl = {
  name: "大腳",
  age: 18,
  bust: 94,
  waistline: 21,
  sex: "女",
  say() {
    return "歡迎光臨 ，紅浪漫洗浴！！";
  },
};

接口和類的約束

class XiaoJieJie implements Girl {
  name = "劉英";
  age = 18;
  bust = 90;
  say() {
    return "歡迎光臨 ，紅浪漫洗浴！！";
  }
}

接口間的繼承

interface Teacher extends Girl {
  teach(): string;
}

---

參考：
技術胖——TypeScript從入門到精通（08. TypeScript中的interface接口）
技術胖——TypeScript從入門到精通（09. TypeScript中的interface接口 2）