- All
- Angular
- CSS
- database
- GraphQL
- HTML
- JavaScript
- Next.js
- Node.js
- Python
- Ruby
- TypeScript
- WordPress
- WordPress主機
- WordPress外掛
- WordPress架設網站
- 前端筆記
- 後端筆記
- 演算法
- 網站原理
- 網站知識
- 資工
- 資料結構
- 開發工具
- 開箱
- 閒聊
All
- All
- Angular
- CSS
- database
- GraphQL
- HTML
- JavaScript
- Next.js
- Node.js
- Python
- Ruby
- TypeScript
- WordPress
- WordPress主機
- WordPress外掛
- WordPress架設網站
- 前端筆記
- 後端筆記
- 演算法
- 網站原理
- 網站知識
- 資工
- 資料結構
- 開發工具
- 開箱
- 閒聊
TypeScript 筆記 – 那些你可能不知道的 private 特性
2024-05-10
No Comments
一般來說,我們會預期 class 裡 private 的 property 在被實體化為 object 後,無法被存取,然而最近在研究 TypeScript 才發現,原來最常見的寫法其實是可以透過其他方法存取到這個 property 的。
TypeScript 筆記 – Enum
2024-04-28
No Comments
Enum 用來宣告一群 const,也就是一些不會變動的值,比較常用到的地方像是:處理狀態(success, processing, failed)、使用狀態(active, inactive, deleted)、角色(admin, general_user)等等。 1. Enum 使用時機 通常會用在表示一群 constant,以狀態為例,比較直觀的想法,會直接用字串來判斷邏輯: 這個方法可能會造成的問題是,當你在其他地方呼叫這個 function 時,如果有 typo 的話,可能就會有不預期的結果,ex: 考量到這個問題,通常會另外宣告變數來處理這個問題: 呼叫的時候就可以直接將這些變數作為 arguments 傳入: 然而當狀態慢慢增加時,需要宣告的變數也會慢慢增加,假設現在有十個狀態,就需要宣告十個變數,而你其實也無法限制其他工程師要傳入的 argument,即便宣告了變數,其他工程師還是可以直接傳 value 進去 function 做宣告:onFinishProcessing(‘process’) 。 當然你可能想到在 js 中可以用 object 搭配 Object.freeze() 來處理這個問題,後續會提到在 TypeScript 中用 Object 和 Enum 的差別,不過在 TypeScript 中我們會用 enum 來處理這個問題。 可以看到不但可以維持可讀性,還可以限制工程師在執行這個 function 的時候,只能傳入 Status enum 底下的 value,如果輸入其他 value 作為 argument 就會噴錯: 2. Enum 種類 2.1 Numeric Enum enum 的種類預設是 Numeric,也就是說在存取 enum 的 member 時,會按照順序從 0 開始,逐一遞增: 如果有指定 numeric value 的話,則會從該 value 逐一遞增 也可以從中間再賦值: 或是三個 value 都自定義: 只要 enum 裡每個 member 的 value 都是 numeric,就可以稱為 numeric enum 2.2 String Enum 和 numeric enum 一樣,只要 enum …
TypeScript 筆記 – Type Assertion(型別斷言)
2024-04-19
No Comments
在某些情況下,TypeScript 的 type 可能有多種 types 或是 type 比較不明確,Type assertion 用來告訴 TypeScript 某個 value 或 variable 是某個更具體的型別。
TypeScript 筆記 – Function Overloading
2024-04-17
No Comments
Function Overloading 是某些物件導向程式語言支援的語法,最常見的有 C++, C#, Java 等等,而 TypeScript 也支援 Function Overloading 的功能。這篇就來簡單筆記一下 TypeScript 中使用 Function Overloading 的方式。
JavaScript module – CommonJS, ES Module
2024-04-16
No Comments
在 JavaScript 中,主要有兩種方式來處理 module: CommonJS 以及 ES Module 1. CommonJS 1.1 使用 CommonJS 根據 Node.js 的文件,以下方法會將檔案視為 CommonJS module: extension name (副檔名) 為 .cjs package.json 的 type 屬性為 commonjs 沒有 package.json 或是 package.json 沒有設置 type 1.2 模組化一個變數 1.3 模組化多個變數 2. ES Module 2.1 使用 ES Module extension name (副檔名) 為 .mjs 在 package.json 的 type 設定為 module 2.2 模組化一個或多個變數 可以直接用 export const 的方式來 export 一個或多個變數 也可以直接 import 所有的變數,會變成一個 object 2.3 export default export default 可以指定預設要 export 的變數,但一個檔案只能 export default 一個變數,否則會噴錯: 錯誤用法: import 後面沒有被包在 {} 裡的變數,就會是 export default 的變數: 2.4 在 Node.js 使用 ES Module 3. 參考資料 Understanding CommonJS vs. ES Modules …
為什麼 js 中用 ES Module 的方式 import module 時,有時候需要 extension name (副檔名),有時候不用?
2024-04-13
No Comments
使用 ES Module 的方式 import module 時,有時候會需要 extension name,但我在工作上 import 的時候卻從來沒加過 extension name,好奇什麼時候會需要加 extension name,於是有了這篇文章的誕生。
Docker Desktop 殺手 – OrbStack 教學
2024-04-08
No Comments
OrbStack 是個可以完全用來取代 Docker Desktop 的工具,最大的優勢在於,可以更快的啟動 container,吃的資源也比 Docker Desktop 少,也支援 Kubernetes,一但用過就跟瑞凡一樣,回不去了。
Python 教學 9 – Python Mapping Type: dict
2023-09-04
No Comments
dict 是 Python 中的 mapping type,類似 js 中的 object,每一個 element 都由 key 和 value 組成。 1. 特性 每一個 item 都由 key 和 value 組成 object 內不會有重複的 key 如果新增的 key-value 已經有相同的 key 在 dict 內的話,新的 value 會蓋掉舊的 2. 宣告 dict 2.1 comma-separated list of key: value pairs within braces 可以用大括號宣告,每個 key-value pair 用 ‘:’ 來區隔 2.2 Dict Comprehension Comprehension 是 Python 中特殊的表示法,詳細介紹可以參考:Python Comprehension 語法 – List Comprehension, Set Comprehension, Dict Comprehension。 Dict Comprehension 的語法: {key: value for item in iterable (if condition)} 至於 iterable 的定義,可以參考這篇:Python Iterable Objects 介紹 2.3 type constructor: dict() 可以用 dict 的 type constructor 來宣告 dict object。 class dict(**kwargs) class dict(mapping, **kwargs) class dict(iterable, **kwargs) 使用 …
Python 教學 8 – Python Set Type: Set, Frozenset
2023-09-03
No Comments
Python set 和 frozenset 常用來表示一群不重複 element 的集合,這篇文章就來介紹一下 Python set 和 frozenset。 1. 特性 1.1 set, frozenset 的共通特性 object 內的 element 不會重複 沒有順序性 1.2 set, frozenset 的差別 set 和 frozenset 的差別其實就像 list 和 tuple 一樣,set 是 mutable,frozenset 是 immutable,宣告後就不能對其做其他操作。 2. 宣告 2.1 宣告 set 2.1.1 braces: {} 如果要宣告有 elements 的 set 的話,可以用大括號把 elements 包在裡面,但如果要宣告的 set 是空的話,就需要用 set type constructor,否則會變成 dict。 2.1.2 Set Comprehension Comprehension 是 Python 中特殊的表示法,詳細介紹可以參考:Python Comprehension 語法 – List Comprehension, Set Comprehension, Dict Comprehension。 Set Comprehension 的語法: {expression for item in iterable (if condition)} 至於 iterable 的定義,可以參考這篇:Python Iterable Objects 介紹 2.1.3 type constructor: set() 可以用 set 的 type constructor …