iT邦幫忙

typescript相關文章
共有 673 則文章
鐵人賽 自我挑戰組 DAY 30

技術 Day 30:未完待續,不停地學習!

今年,是我第一次參加鐵人賽,而今天也是自我挑戰的達標日,但正如標題所寫的,達標對我而言只是一個階段,不代表結束。 這三十天的挑戰,讓我從一個完全的 Angula...

鐵人賽 Modern Web DAY 27

技術 Day27 :【TypeScript 學起來】Module 模組

在ES6前, 常用的模組概念是 CommonJS , require 引入模組與 exports 匯出模組。 到了 ES6 則新增了 import 與 exp...

鐵人賽 自我挑戰組 DAY 29

技術 Day 29:開始來學資料繫結:使用目前所學,來個簡單實作吧!(三)

我們前一篇,雖然有將需求二實作出來,但是看到 keyCode 已被淘汰的訊息,還是覺得有點不痛快。 上網搜尋了一下,找到一篇其他開發者分享的文章: [從 0 開...

鐵人賽 Modern Web DAY 26

技術 Day26 :【TypeScript 學起來】Class 與 Interface 的使用

我們在前面的時候有提過 interface 是用來定義物件的型別,對物件的形狀進行描述。在物件導向程式語言中,介面(Interfaces)是一個很重要的概念,它...

鐵人賽 自我挑戰組 DAY 28

技術 Day 28:開始來學資料繫結:使用目前所學,來個簡單實作吧!(二)

前一篇,我們完成了需求一: 當使用者在關鍵字搜尋這個 input 輸入文字時,要在輸入框的正下方顯示正在輸入的字元數。 今天我們要接著完成需求二: 當使用...

鐵人賽 Modern Web DAY 25

技術 Day25 :【TypeScript 學起來】Class 的繼承、修飾符、abstract、static

今天繼續筆記class,剩最後5天了!若有錯誤,歡迎留言指教,感恩的心。 extends 繼承 這個跟JavaScript相同, 使用 extends 繼...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27:開始來學資料繫結:使用目前所學,來個簡單實作吧!(一)

資料繫結的主題講了好幾天,那麼,就來小試身手一下,透過一個簡單的實作,把這幾天所學到的觀念,試著運用看看。 看看上圖框起來的 input,我們實作的需求如下:...

鐵人賽 自我挑戰組 DAY 24

技術 Day24 Modules & Namespaces

今天要來介紹 Module,寫 Module 的好處在於,可以把程式碼分成不同檔案來管理,會比較好維護,也能比較好閱讀。要把程式碼寫成模組有兩種做法,一種是 N...

鐵人賽 Modern Web DAY 24

技術 Day24 :【TypeScript 學起來】TypeScript 中使用 Class

今天來了解在 TypeScript 中使用 Class,Class Member 包含了: Fields 、 Readonly、Constructors、Me...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23 中場休息,來做點酷東西(完成了嗚嗚)

拖了這麼多天,終於完成了! 今天增加了拖曳的各個 interface還有事件,以及能把事件拖曳過去的區塊,另外監聽器的部分因為有兩個地方會用到,所以就抽出來寫成...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26:開始來學資料繫結:事件繫結(三)今天的 $event 有型別呢!

昨天我們有稍微提到,使用 $event 的 property 時,要注意大小寫的問題,雖然只是輕輕帶過,但是以往有寫過 JavaScript 的開發者,肯定有遇...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 中場休息,來做點酷東西(終於要完成了)

終於要把它做完了!!!今天做了兩件事 新增 ProjectItem class,讓每一次渲染時都能夠利用該 class 渲染專案清單 使用 getter 拿到...

鐵人賽 Modern Web DAY 22

技術 Day22 : 【TypeScript 學起來】Generic Function 泛型函式

上一篇介紹了 Generic 泛型, 其實這篇差不多意思 XDD 主要針對 Generic Function。若有錯誤,歡迎留言指教,感恩的心。 Gene...

鐵人賽 自我挑戰組 DAY 25

技術 Day 25:開始來學資料繫結:事件繫結(二)使用 $event 參數

前一篇我們談到了事件繫結的方法,在使用 事件繫結(Event binding) 的時候,我們要先有一個事件,並使用 小刮號() 來註冊,並傳入一個方法,而這個方...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21 中場休息,來做點酷東西(重構 class)

今天做了 重構程式碼,寫了一個基本的 component class 讓 ProjectInput class 和 ProjectList class 可以繼...

鐵人賽 Modern Web DAY 21

技術 Day21:【TypeScript 學起來】Generics 泛型

是說在社群到處都在爆雷的《魷魚遊戲》,我進度第一集,好想棄賽來追劇(我就廢然後謝謝沒看魷魚遊戲,不小心看到我文章的你~(還是你已經看完了 沒寫很好,當作筆記記...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24:開始來學資料繫結:事件繫結(一)

今天我們要來學習 Angular 第三種資料繫結的方法:事件繫結(Event binding)。 我們要達成的目標是,點擊網頁上的圖片,然後標題會隨之改變。...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 中場休息,來做點酷東西(型別修正跟除點小蟲)

今天做了幾件小事 定義 Project 的型別 class 增加 Project 的狀態 定義 Listener 的型別 增加新 Project...

鐵人賽 Modern Web DAY 20

技術 Day20 :【TypeScript 學起來】是 JavaScript 沒有的 Function Overloads(函式超載)

終於20天了,那個心情就是有點開心快結束了,但對後面10篇感到擔憂,既期待又怕無法完賽 XDD 好啦,講完廢話,今天要來講 Function Overload...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23:開始來學資料繫結:屬性繫結(二)

上一篇談到在 Angular 中使用 屬性繫結(Property binding) 的方法,也延伸了其他議題,就是 Property 及 Attribute 的...

鐵人賽 自我挑戰組 DAY 19

技術 Day 19 Libraries & TypeScript

前面中場休息的 Project 今天暫且休一天,來介紹一下可以在 JavaScript 跟 TypeScript 使用以及只有 TypeScript 能夠使用的...

鐵人賽 Modern Web DAY 19

技術 Day19 :【TypeScript 學起來】More on Functions

我們在前面 Day09 , 有簡單討論到 function,這篇就會來看一些更深入 function 的應用。 使用 function 關鍵字 最簡單定義...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22:開始來學資料繫結:屬性繫結(一)

Day 22:開始來學資料繫結:屬性繫結(一) 今天要來探討第二種資料繫結的方法:屬性繫結(Property binding)。 我們以上一篇 a 標籤的 hr...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21:開始來學資料繫結:文字插值

在連續開了幾天支線任務之後,我們將再次回到 Angular 開發的正軌,繼續我們第十六天之後的網頁開發主線,如果已經有忘記的朋友,附上主線任務的連結如下,幫助大...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 中場休息,來做點酷東西(狀態管理)

中場休息的第三天~繼續接著做 在取到值之後,接著要做的就是把它渲染到專案清單上啦!上面做的事情跟中場休息第一天做的事情一樣,把 Project list 的表...

鐵人賽 Modern Web DAY 18

技術 Day18: 【TypeScript 學起來】Narrowing Part 2

好 繼續來筆記 Narrowing, 還有哪些方法能進行 narrow 型別呢。 若有錯誤,歡迎留言指教,感恩的心。 使用 type predicates...

鐵人賽 自我挑戰組 DAY 17

技術 Day 17 中場休息,來做點酷東西(取值 & 驗證)

那我們繼續吧! 上面做了取得 DOM 元素,也就是三個 input 的值的動作: 在 class 設置 field 把抓取到的 DOM 元素存到相對應的 f...

鐵人賽 Modern Web DAY 17

技術 Day17: 【TypeScript 學起來】什麼是 Narrowing?

其實看官網看這篇的時候很想pass,有點看不下去XD,但還是做了筆記。若有錯誤,歡迎留言指教,感恩的心。 Narrowing Narrowing 指的是將某...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20:怎麼在 Angular 使用 sweatalert2

由於在未來的專案有機會使用到 sweetalert2,所以就藉這個機會來介紹一下如何在 Angular 環境裡使用 sweetalert2。 安裝 sweeta...

鐵人賽 Modern Web DAY 16

技術 Day16:【TypeScript 學起來】新增任意屬性的好方法:Index Signatures 索引簽名

在之前 interface 那篇文章, 認識到可以使用 Index Signatures, 發現他使用上有一些需要注意的地方,決定把他獨立一篇來寫。(然後心裡...