本篇LIst

什麼是介面？
定義一個介面
可選屬性介面
只讀屬性介面
可新增屬性介面
函式介面

什麼是介面

定義介面

// 1.定義一個介面

interface Person {
    pName: string;
    pAge: number;
    pSex: string;
  }
  
  let person: Person = {
    pName: "xiaoming",
    pAge: 18,
    pSex: "woman",
  };
  
  function printPerson(person: Person): void {
    console.log(`kkkkk${person.pName}`);
  }
  
 

可選屬性介面

// 2.介面-可選屬性

interface Circle {
  color: string;
  area: number;
}

interface CircleConfig {
  color?: string;
  radius?: number;
}

function createCircle(config: CircleConfig): Circle {
  let newCirlce: Circle = { color: "blue", area: 10 };
  if (config.color) {
    newCirlce.color = config.color;
  }
  if (config.radius) {
    newCirlce.area = config.radius;
    newCirlce.area = config.radius * config.radius * Math.PI;
  }
  return newCirlce;
}

let circle1: Circle = createCircle({ color: "red" });
let circle2: Circle = createCircle({ radius: 20 });
 

只讀屬性介面

// 3.只讀屬性-初始化之後不能修改

interface FullName {
  readonly firstName: string;
  readonly lastName: string;
}
let perName: FullName = { firstName: "liu", lastName: "dongyang" };

//4. ReadonlyArray 只讀陣列. 禁用修改陣列的方法，不予許進行修改
//不可以把只讀陣列賦給普通陣列，如果要賦值利用斷言進行轉化
let re: ReadonlyArray<number> = [1, 2, 3, 4, 5];
 

可新增屬性介面

//5.要傳入額外的屬性
// 利用斷言來跳過ts的型別檢查
let myCircle = createCircle({ color: "adad", black: "true" } as CircleConfig);

//字串索引簽名
interface Ecircle {
  color: string;
  radius: number;
  //字串索引簽名
  [propsName: string]: any;
}

//利用屬性檢查的是最外層的
let circleOption = { color: "red", radius: 12, ridusssss: 21 };
let mtCircle = createCircle(circleOption);

函式介面

//6. 函式型別
interface CompareFuc {
  (first: number, last: number): boolean;
}

let myCompare: CompareFuc = function (first: number, last: number): boolean {
  return first > last;
};

let myCompare2: CompareFuc = function (a: number, b: number): boolean {
  return a > b;
};
let myCompare3: CompareFuc = function (a, b) {
  return a > b;
};