iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

TypeScript 能手養成之旅系列 第 15

# TypeScript 能手養成之旅 Day 15 介面(Interface)

前言

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

認識 Interface

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

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

Interface 宣告

建立一個 PersonDetail 介面,並描述裡面的屬性 namephoneskillscheckDault

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 的使用,還有如果有不同條件需求下該如何調整的方式,希望大家可以一起來嘗試看看,我們明天繼續努力能手之旅。


上一篇
TypeScript 能手養成之旅 Day 14 特殊型別(2) - Any & Unknown
下一篇
TypeScript 能手養成之旅 Day 16 類別(Class)
系列文
TypeScript 能手養成之旅16

尚未有邦友留言

立即登入留言