※ 設計模式與程式架構(二)

閱讀時間約 2 分鐘

※ TypeScript範例說明:

interface ITest {
test1: string
test2: number

print: (arg: string[]) => boolean
}

class Test implements ITest {
public test1: string
public test2: number

constructor(test1: string, test2: number) {
this.test1 = test1
this.test2 = test2
}

print = (arg: string[]) => {
console.log(this.test1, this.test2, arg)
// return !!arg.length
return Boolean(arg.length)
}
}

const testIns = new Test("hello world", 123)
console.info(testIns.print(["33"])) 

※ Interface介紹:

  • Interface 被稱作介面或是接口。
  • 描述結構:interface 是用來描述物件的結構,定義了哪些Property(屬性)和Method(方法)必須存在。
  • 不包含實作:interface 只描述屬性和方法,並不包含任何具體的實作細節。
  • 用於約定:interface 就像是一個契約,強制實現它的 class 必須按照這個契約來實現所有的Property(屬性)和Method(方法)。否則就會發生錯誤,無法正確編譯。

 簡單來說Interface 只做描述,不做動作。

※ Class介紹:

  • 實作細節:class 則是具體的實現,定義了物件的具體行為和狀態。它不僅描述了物件應該有什麼樣的屬性和方法,還包括這些方法的具體實現。
  • 實現 Interface:Class 使用 implements 關鍵字來指定要實作的介面(interface)。這意味著class 必須提供 interface 中定義的所有屬性和方法的具體實現。

※ Implements介紹:

  • implements 關鍵字用於類來實現介面(interface)。
  • 目的是確保類(Class)包含介面中所有定義的屬性和方法,否則 TypeScript 編譯器會報錯。

※ Public介紹:

  • 如果希望屬性或方法對所有使用者完全公開時使用 public 修飾符。
  • 預設值:Class 內描述的 Property(屬性) 預設是 Public。

※ Constructor介紹:

  • 用於在建立類的實例時初始化物件。
  • 每個類只能有一個構造函數(constructor)。

※ Print介紹:

  • 呼叫 print 方法來查看輸出和返回值。
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 何謂Typescript? Typescript是Microsoft開發出來的一種JavaScript的擴展程式語言。 ※ 為什麼選擇 TypeScript? 靜態型別: 在執行程式碼之前就能避免許多錯誤。 幫助開發人員更快發現型別使用上的問題。 有效提升開發應用程式的效率。 輕鬆
    ※ OPP第三大核心-多型 ※ 多型的基本定義: 多型是利用繼承的特性,讓不同的子類別可以實現相同的介面,但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性,避免了複雜的條件判斷式,同時促進了代碼的重用。 class Animal { makeSound() {
    ※ OPP第一大核心-封裝 封裝的精神在於將「方法」、「屬性」和「邏輯」包裝在類別裡面,透過類別的實例來實現。這樣外部物件不需要了解內部的實現細節,只需要知道如何使用該類別提供的接口即可。換句話說,封裝是將內部細節隱藏起來,只暴露必要的部分給使用者。 封裝的核心概念是,使用者如果想要接觸資料,只
    ※ class類別 什麼是class? class是創造consturctor function時的語法糖,本質上與使用function創造物件(object)的行為沒有不同。 class的作用: 用來定義、描述要創造的物件(object)具有那些屬性、行為的一個表達式。就像是「車子的設計圖
    ※ 模板字串(template literal): 使用「``」作為語法,作為字串拼接。 呈現多行內容。 const multiLineString = `This is a string that spans multiple lines.` console.log(multiLineStr
    ※ ES6 變數宣告介紹: 在ES6中,推薦使用let和const取代原有的var來宣告變數。 ※ var的特點: 勢力範圍(scope)只有兩種:function、global(全域部分)。 勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。 可以在宣告變數之前就使用。
    ※ 何謂Typescript? Typescript是Microsoft開發出來的一種JavaScript的擴展程式語言。 ※ 為什麼選擇 TypeScript? 靜態型別: 在執行程式碼之前就能避免許多錯誤。 幫助開發人員更快發現型別使用上的問題。 有效提升開發應用程式的效率。 輕鬆
    ※ OPP第三大核心-多型 ※ 多型的基本定義: 多型是利用繼承的特性,讓不同的子類別可以實現相同的介面,但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性,避免了複雜的條件判斷式,同時促進了代碼的重用。 class Animal { makeSound() {
    ※ OPP第一大核心-封裝 封裝的精神在於將「方法」、「屬性」和「邏輯」包裝在類別裡面,透過類別的實例來實現。這樣外部物件不需要了解內部的實現細節,只需要知道如何使用該類別提供的接口即可。換句話說,封裝是將內部細節隱藏起來,只暴露必要的部分給使用者。 封裝的核心概念是,使用者如果想要接觸資料,只
    ※ class類別 什麼是class? class是創造consturctor function時的語法糖,本質上與使用function創造物件(object)的行為沒有不同。 class的作用: 用來定義、描述要創造的物件(object)具有那些屬性、行為的一個表達式。就像是「車子的設計圖
    ※ 模板字串(template literal): 使用「``」作為語法,作為字串拼接。 呈現多行內容。 const multiLineString = `This is a string that spans multiple lines.` console.log(multiLineStr
    ※ ES6 變數宣告介紹: 在ES6中,推薦使用let和const取代原有的var來宣告變數。 ※ var的特點: 勢力範圍(scope)只有兩種:function、global(全域部分)。 勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。 可以在宣告變數之前就使用。
    你可能也想看
    Google News 追蹤
    Thumbnail
    接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
    Thumbnail
    🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
    Thumbnail
    樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
    Thumbnail
    觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
    Thumbnail
    代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
    Thumbnail
    策略模式將多種演算法封裝於獨立的策略類別中,每個策略類別都實現了一個共同的介面。這種設計允許使用者在系統運行時動態選擇和切換演算法,以達成相同的目的。
    MVC是一種物件導向設計模式,將應用程式分成Model、View和Controller。是在1979年被提出,主要是要解決下列問題: 維護「長存儲存媒體」(Persistent Storage)的資料 維護執行流程的邏輯控制 顯示使用者所需的資訊和使用介面 Model 實作儲存應用程式
    Thumbnail
    所有的 CSS 設計模式都是為了維持可讀性、好維護、易擴充這幾個目標,今天就來談談 BEM 設計模式,並搭配 Sass 中的 SCSS 來介紹,並探討在各種情境下該如何使用 BEM。
    Thumbnail
    MongoDB非常擅長查詢大量的數據並經常更新這些資訊, 在多數的情況之下, 我們只要查詢資訊最新的狀態, 那假設我們需要查詢資料的上一個狀態呢? 如果我們需要一些文檔版本控管功能時怎麼辦呢? 這就是我們可以使用版本控管設計模式的地方了。 這個模式之下會保存文檔的歷史版本, 我們就不用導入另外一個版
    Thumbnail
    fast endpoints 是一個支援 .NET 6 以上(Nuget 版本清單) 的 API 輕量框架,雖以簡單與高性能為主打,但也提供了很多常用的功能實現,如 Swagger 整合、Jwt 認證、Api 版本控制、APi 速率限制、Api 回應快取…很適合以此為基礎打造 Api 服務。
    Thumbnail
    小心設計模式別亂用 📷 介紹 設計模式就是過去的人,根據常見的軟體設計的問題,提出的解決方案。 設計模式總共有23種,根據情境分成三大類型,建立型、結構型、行為型。 建立型模式(Creational Patterns) 簡單工廠(Simple Factory) 工廠方法(Factory) 抽象工廠
    Thumbnail
    我是部落客,也要設計產品服務區嗎? 是的!Winnie建議你在自己的部落格網站上放上自己設計的產品服務區! 有一些人可能會認為自己只是純粹寫部落格分享自己的想法,並尚未準備提供產品或服務,或是認為自己的人氣還不夠,即使推出產品或服務也不會有人購買,所以就不先設計「產品服務區」了,但我還是非常推薦..
    Thumbnail
    接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
    Thumbnail
    🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
    Thumbnail
    樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
    Thumbnail
    觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
    Thumbnail
    代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
    Thumbnail
    策略模式將多種演算法封裝於獨立的策略類別中,每個策略類別都實現了一個共同的介面。這種設計允許使用者在系統運行時動態選擇和切換演算法,以達成相同的目的。
    MVC是一種物件導向設計模式,將應用程式分成Model、View和Controller。是在1979年被提出,主要是要解決下列問題: 維護「長存儲存媒體」(Persistent Storage)的資料 維護執行流程的邏輯控制 顯示使用者所需的資訊和使用介面 Model 實作儲存應用程式
    Thumbnail
    所有的 CSS 設計模式都是為了維持可讀性、好維護、易擴充這幾個目標,今天就來談談 BEM 設計模式,並搭配 Sass 中的 SCSS 來介紹,並探討在各種情境下該如何使用 BEM。
    Thumbnail
    MongoDB非常擅長查詢大量的數據並經常更新這些資訊, 在多數的情況之下, 我們只要查詢資訊最新的狀態, 那假設我們需要查詢資料的上一個狀態呢? 如果我們需要一些文檔版本控管功能時怎麼辦呢? 這就是我們可以使用版本控管設計模式的地方了。 這個模式之下會保存文檔的歷史版本, 我們就不用導入另外一個版
    Thumbnail
    fast endpoints 是一個支援 .NET 6 以上(Nuget 版本清單) 的 API 輕量框架,雖以簡單與高性能為主打,但也提供了很多常用的功能實現,如 Swagger 整合、Jwt 認證、Api 版本控制、APi 速率限制、Api 回應快取…很適合以此為基礎打造 Api 服務。
    Thumbnail
    小心設計模式別亂用 📷 介紹 設計模式就是過去的人,根據常見的軟體設計的問題,提出的解決方案。 設計模式總共有23種,根據情境分成三大類型,建立型、結構型、行為型。 建立型模式(Creational Patterns) 簡單工廠(Simple Factory) 工廠方法(Factory) 抽象工廠
    Thumbnail
    我是部落客,也要設計產品服務區嗎? 是的!Winnie建議你在自己的部落格網站上放上自己設計的產品服務區! 有一些人可能會認為自己只是純粹寫部落格分享自己的想法,並尚未準備提供產品或服務,或是認為自己的人氣還不夠,即使推出產品或服務也不會有人購買,所以就不先設計「產品服務區」了,但我還是非常推薦..