前言

上一篇結束後已經將型別部分，大致上了解差不多了，鐵人文章也來到一半了。今天開始下半部的鐵人，會比較有趣嗎？ 讓我們繼續看下去。

認識 Interface

interface 是用來定義物件的資料型別。簡單來說，事先約定好某個物件會是什麼樣的資料格式，其屬性的型別為何。如果有違反這個規定，就會進行提醒有誤。

interface 第一個字母會是大寫，且只用來定義描述。

Interface 宣告

建立一個 PersonDetail 介面，並描述裡面的屬性 name、 phone、skills、checkDault 。

interface PersonDetail {
  name: string
  phone: number
  skills: string[]
  checkDault: (age: number) => void 
}

接下來定義一個變數 cy ，掛上 PersonDetail 規則。

// 正常運行
const cy: PersonDetail = {
  name: 'cy',
  phone: 123456789,
  skills: ['Ruby', 'JavaScript'],
  checkDault: (age) => (age < 18 ? console.log('Not adult') : console.log('Adult'))
}

console.log(cy)
// {
  name: 'cy',
  phone: 123456789,
  skills: [ 'Ruby', 'JavaScript' ],
  checkDault: [Function: checkDault]
}
cy.checkDault(20) // Adult

如果缺少屬性

如果型別錯誤

選用屬性(Optional Properties)

當我們有一些屬性不是必須的，這個時候我們可以在屬性名稱後面加上 ?，該屬性就可以賦予彈性給予。

interface PersonDetail {
  name: string
  phone: number
  skills?: string[]
  checkDault: (age: number) => void 
}

const cy: PersonDetail = {
  name: 'cy',
  phone: 123456789,
  // 少了 skills 屬性
  checkDault: (age) => (age < 18 ? console.log('Not adult') : console.log('Adult'))
}

從上面程式碼可以發現，少了 skills 屬性，依然不會噴錯

唯讀屬性(Readonly properties)

如果打算第一次賦值後，不再被修改，就可以使用 唯讀屬性 使用方始要在該屬性前面加上 readonly 即可。

interface PersonDetail {
  readonly name: string
  phone: number
  skills?: string[]
  checkDault: (age: number) => void 
}

const cy: PersonDetail = {
  name: 'cy',
  phone: 123456789,
  skills: ['Ruby', 'JavaScript'],
  checkDault: (age) => (age < 18 ? console.log('Not adult') : console.log('Adult'))
}

cy.name = 'CY' // 噴錯

結語

今天初步介紹 interface 的使用，還有如果有不同條件需求下該如何調整的方式，希望大家可以一起來嘗試看看，我們明天繼續努力能手之旅。