您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何使用TypeScript的TodoList”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“如何使用TypeScript的TodoList”文章能幫助大家解決問(wèn)題。
現(xiàn)代的框架教程目前再也不是寫(xiě)個(gè)hello world那么簡(jiǎn)單了,而是需要有一定基礎(chǔ)能力能夠做到數(shù)據(jù)綁定、遍歷、條件判斷等各種邏輯,而能完成這一系列內(nèi)容的,todolist就是個(gè)很好的實(shí)現(xiàn),比如react的教程、solijs教程都是以todolist為例
當(dāng)然,你如果想看各種框架實(shí)現(xiàn)todolist的話,你可以訪問(wèn)TodoMVC 這里面展示了各種框…
但是對(duì)于ts教程來(lái)說(shuō),只有官方的一些實(shí)例,并沒(méi)有一個(gè)很好的項(xiàng)目上的教程,也就是有關(guān)實(shí)戰(zhàn)的部分,很多同學(xué)在學(xué)習(xí)了ts之后,只會(huì)一些基礎(chǔ)的js類(lèi)型的設(shè)置,放在項(xiàng)目中就不清楚了,所以我們就出了這個(gè)教程
當(dāng)然在開(kāi)始之前,我們要了解這個(gè)教程不依賴任何的前端庫(kù),比如react,vue等,同時(shí)也為了節(jié)省時(shí)間,我們僅僅是放出一些關(guān)鍵的ts代碼,不需要將整個(gè)應(yīng)用都展示出來(lái),同樣能夠讓你知道ts的使用
一個(gè)tudolist對(duì)應(yīng)的數(shù)據(jù)是怎么樣的?就拿剛才的視圖來(lái)看的話,它應(yīng)該是一個(gè)對(duì)象數(shù)組,數(shù)據(jù)應(yīng)該是這樣的
[ { id: 1, text: '待辦事項(xiàng)1', done: false }, { id: 2, text: '待辦事項(xiàng)2', done: false }, { id: 3, text: '待辦事項(xiàng)3', done: false } ]
其中id是每一個(gè)代辦事項(xiàng)的唯一標(biāo)識(shí),text是事項(xiàng)名稱(chēng),done表示是否完成
當(dāng)我們點(diǎn)擊完成的時(shí)候,實(shí)際上就是每一項(xiàng)的done發(fā)生了變化,數(shù)據(jù)發(fā)生變化之后驅(qū)動(dòng)我們的視圖做出對(duì)應(yīng)的改變
對(duì)應(yīng)的上述的點(diǎn)擊事件,我們實(shí)現(xiàn)一下它的偽代碼,當(dāng)其點(diǎn)擊的時(shí)候,需要處理對(duì)應(yīng)的數(shù)據(jù),先使用js實(shí)現(xiàn)
function handleTodoItem(todo){ // 點(diǎn)擊的時(shí)候todo中的done的布爾值取反 return { ...todo, done: !todo.done } }
然后我們使用ts進(jìn)行優(yōu)化
type Todo = { id: number; text: string; done: boolean; } // 如果某個(gè)變量是todo類(lèi)型,可以這樣 const todoItem: Todo = { id: 1, text: '待辦事項(xiàng)1', done: false }
這樣ts類(lèi)型就是正常的,如果相應(yīng)的todoItem不匹配,則編譯就會(huì)發(fā)生錯(cuò)誤,可以讓錯(cuò)誤提前感知,并且如果項(xiàng)目中有配置的ts相關(guān),vscode中就會(huì)給出對(duì)應(yīng)的錯(cuò)誤信息
對(duì)應(yīng)到handleTodoItem這個(gè)方法中,應(yīng)該怎么寫(xiě)呢?
function handleTodoItem(todo: Todo): Todo { // 邏輯實(shí)現(xiàn) }
對(duì)于handleTodoItem這個(gè)函數(shù)來(lái)說(shuō),函數(shù)應(yīng)該是無(wú)副作用的,所以傳進(jìn)去的todo對(duì)象,不應(yīng)該發(fā)生變化,而是返回一個(gè)新的對(duì)象
比如這種方法,雖然能夠?qū)崿F(xiàn)同樣的內(nèi)容,但是它是有副作用的,改變了傳入的參數(shù),是不可取的
function handleTodoItem(todo: Todo):Todo { // 點(diǎn)擊的時(shí)候todo中的done的布爾值取反 todo.done = !todo.done return todo }
但是這種的ts并不會(huì)報(bào)錯(cuò),怎么辦?那就需要借助我們的ts進(jìn)行類(lèi)型校驗(yàn),你可以這樣
type Todo = { readonly id: number; readonly text: string; readonly done: boolean; }
當(dāng)你嘗試修改修改的話,就會(huì)發(fā)生ts錯(cuò)誤,不允許修改,因?yàn)門(mén)odo類(lèi)型是只讀的,當(dāng)然你也可以這樣設(shè)置對(duì)象中所有的屬性為只讀
type Todo = Readonly<{ id: number; text: string; done: boolean; }>
在ts中,這種Readonly的關(guān)鍵詞還有很多,比如Required,Partial等,如有需要,大家可自行搜索
對(duì)于已經(jīng)完成的list,我們需要將其進(jìn)行分類(lèi)篩選,比如我們要篩選出所有已經(jīng)完成的項(xiàng)目,那么表現(xiàn)就是一個(gè)數(shù)組,并且done為true
[ { id: 1, text: '待辦事項(xiàng)1', done: true }, { id: 2, text: '待辦事項(xiàng)2', done: true } ]
如何表示一個(gè)數(shù)組類(lèi)內(nèi)容呢?Todo[]
這種方式就能表示上述數(shù)據(jù),同樣的,函數(shù)的參數(shù)是不允許修改的,避免副作用,所以可以這樣
function completeTodoList( todos: readonly Todo[] ): Todo[] { // ... }
當(dāng)然,由于Todo的type中的done為boolean,但是在completeTodoList中done的值為true,所以我們需要重新定義一個(gè)類(lèi)型
type CompletedTodo = Readonly<{ id: number; text: string; done: true; }>
所以上述的方法就會(huì)變成
function completeTodoList( todos: readonly Todo[] ): CompletedTodo[] { // ... }
對(duì)于上面的Todo和CompletedTodo類(lèi)型,其中這兩個(gè)類(lèi)型的id和text都是重復(fù)的,我們可以刪除重復(fù)的邏輯,使用交叉類(lèi)型
舉個(gè)例子
type A = {a: number} type B = {b: string} type AandB = A & B // 結(jié)果為 // { // a: number // b: string // }
當(dāng)兩個(gè)類(lèi)型key相同時(shí),第二個(gè)key會(huì)覆蓋掉第一個(gè)的內(nèi)容
type A = {key: number} type B = {key: string} type AandB = A & B // 結(jié)果為 // { // key: string // }
那針對(duì)Todo和CompletedTodo類(lèi)型,我們想從Todo通過(guò)交叉類(lèi)型得到CompletedTodo,該怎么做呢?
type CompletedTodo = Todo & { readonly done: true }
是不是很簡(jiǎn)潔,并且去除了一些重復(fù)代碼
如果在Todo的基礎(chǔ)上,我們新增了一個(gè)功能,對(duì)應(yīng)的todo的優(yōu)先級(jí),使用priority這個(gè)字段表示
并且一共有三種優(yōu)先級(jí)
?。?!
!!
!
你可以priority: 2
這樣設(shè)置,展示為【?。 慨?dāng)然你也可以自定義,比如
{ priority: { custom: '緊急' } }
則展示為【緊急】,所以這時(shí)候數(shù)據(jù)變成了
[ { id: 1, text: '待辦事項(xiàng)1', done: false, priority: 1 }, { id: 2, text: '待辦事項(xiàng)2', done: false, priority: 2 }, { id: 3, text: '待辦事項(xiàng)3', done: false, priority: { custom: '緊急' } }, { id: 4, text: '待辦事項(xiàng)4', done: false }, ]
我們已經(jīng)有了Todo類(lèi)型,如何新增一個(gè)key呢?
上面我們之后交叉類(lèi)型通過(guò) &
連接,那聯(lián)合類(lèi)型則是通過(guò) |
連接,同樣的舉個(gè)例子
type Foo = number | string;
這表示Foo類(lèi)型可以是一個(gè)數(shù)字,也可以是一個(gè)string類(lèi)型,所以我們的priority類(lèi)型可以這樣設(shè)置
type Priority = 1 | 2 | 3 | { custom: string };
這個(gè)時(shí)候priority就是我們想要的內(nèi)容了,所以todo的類(lèi)型可以變一下
type Todo = Readonly<{ id: number; text: string; done: boolean; priority: Priority; }>
上面的priority這個(gè)屬性目前是必填的,但是這個(gè)屬性我們可以不寫(xiě),也就是todo可以沒(méi)有優(yōu)先級(jí),針對(duì)這種情況,我們可以使用可選屬性
type Todo = Readonly<{ id: number; text: string; done: boolean; priority?: Priority; }>
在對(duì)應(yīng)的地方添加一個(gè)?即可
那對(duì)應(yīng)的priority的數(shù)據(jù)有了,如何把1,2,3這種的轉(zhuǎn)成!??!的形式呢?
可以自定義一個(gè)函數(shù),也就是priorityToString
priorityToString(1) // ! priorityToString(2) // !! priorityToString(3) // ?。?! priorityToString({ custom: '緊急' }) // 緊急
情況比較少,可能你會(huì)這樣寫(xiě)
function priorityToString(priority: Priority): string { if(priority === 1){ return '!' }else if(priority === 2){ return '!!' }else if(priority === 3){ return '?。?!' }else{ return priority.custom } }
聯(lián)合類(lèi)型我們通過(guò)if條件進(jìn)行判斷的時(shí)候,它會(huì)自動(dòng)確認(rèn)每個(gè)if條件下的參數(shù)類(lèi)型,這也是聯(lián)合類(lèi)型的強(qiáng)大之處。
關(guān)于“如何使用TypeScript的TodoList”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。