為什么用todolist

現(xiàn)代的框架教程目前再也不是寫個(gè)hello world那么簡(jiǎn)單了，而是需要有一定基礎(chǔ)能力能夠做到數(shù)據(jù)綁定、遍歷、條件判斷等各種邏輯，而能完成這一系列內(nèi)容的，todolist就是個(gè)很好的實(shí)現(xiàn)，比如react的教程、solijs教程都是以todolist為例

當(dāng)然，你如果想看各種框架實(shí)現(xiàn)todolist的話，你可以訪問TodoMVC 這里面展示了各種框…

todolist的ts化

但是對(duì)于ts教程來說，只有官方的一些實(shí)例，并沒有一個(gè)很好的項(xiàng)目上的教程，也就是有關(guān)實(shí)戰(zhàn)的部分，很多同學(xué)在學(xué)習(xí)了ts之后，只會(huì)一些基礎(chǔ)的js類型的設(shè)置，放在項(xiàng)目中就不清楚了，所以我們就出了這個(gè)教程

當(dāng)然在開始之前，我們要了解這個(gè)教程不依賴任何的前端庫(kù)，比如react，vue等，同時(shí)也為了節(jié)省時(shí)間，我們僅僅是放出一些關(guān)鍵的ts代碼，不需要將整個(gè)應(yīng)用都展示出來，同樣能夠讓你知道ts的使用

數(shù)據(jù)到視圖

一個(gè)tudolist對(duì)應(yīng)的數(shù)據(jù)是怎么樣的？就拿剛才的視圖來看的話，它應(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)名稱，done表示是否完成

當(dāng)我們點(diǎn)擊完成的時(shí)候，實(shí)際上就是每一項(xiàng)的done發(fā)生了變化，數(shù)據(jù)發(fā)生變化之后驅(qū)動(dòng)我們的視圖做出對(duì)應(yīng)的改變

實(shí)現(xiàn)handleTodoItem

對(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類型，可以這樣
const todoItem: Todo = {
  id: 1,
  text: '待辦事項(xiàng)1',
  done: false
}

這樣ts類型就是正常的，如果相應(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)該怎么寫呢？

function handleTodoItem(todo: Todo): Todo {
  // 邏輯實(shí)現(xiàn)
}

readonly

對(duì)于handleTodoItem這個(gè)函數(shù)來說，函數(shù)應(yīng)該是無副作用的，所以傳進(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)行類型校驗(yàn)，你可以這樣

type Todo = {
  readonly id: number;
  readonly text: string;
  readonly done: boolean;
}

當(dāng)你嘗試修改修改的話，就會(huì)發(fā)生ts錯(cuò)誤，不允許修改，因?yàn)門odo類型是只讀的，當(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)行分類篩選，比如我們要篩選出所有已經(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ù)組類內(nèi)容呢？Todo[]這種方式就能表示上述數(shù)據(jù)，同樣的，函數(shù)的參數(shù)是不允許修改的，避免副作用，所以可以這樣

function completeTodoList(
  todos: readonly Todo[]
): Todo[] {
  // ...
}

當(dāng)然，由于Todo的type中的done為boolean，但是在completeTodoList中done的值為true，所以我們需要重新定義一個(gè)類型

type CompletedTodo = Readonly<{
  id: number;
  text: string;
  done: true;
}>

所以上述的方法就會(huì)變成

function completeTodoList(
  todos: readonly Todo[]
): CompletedTodo[] {
  // ...
}

交叉類型

對(duì)于上面的Todo和CompletedTodo類型，其中這兩個(gè)類型的id和text都是重復(fù)的，我們可以刪除重復(fù)的邏輯，使用交叉類型

舉個(gè)例子

type A = {a: number}
type B = {b: string}
type AandB = A & B
// 結(jié)果為
// {
//   a: number
//   b: string
// }

當(dāng)兩個(gè)類型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類型，我們想從Todo通過交叉類型得到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類型，如何新增一個(gè)key呢？

聯(lián)合類型

上面我們之后交叉類型通過 & 連接，那聯(lián)合類型則是通過 | 連接，同樣的舉個(gè)例子

type Foo = number | string;

這表示Foo類型可以是一個(gè)數(shù)字，也可以是一個(gè)string類型，所以我們的priority類型可以這樣設(shè)置

type Priority = 1 | 2 | 3 | { custom: string };

這個(gè)時(shí)候priority就是我們想要的內(nèi)容了，所以todo的類型可以變一下

type Todo = Readonly<{
  id: number;
  text: string;
  done: boolean;
  priority: Priority;
}>

可選屬性

上面的priority這個(gè)屬性目前是必填的，但是這個(gè)屬性我們可以不寫，也就是todo可以沒有優(yōu)先級(jí)，針對(duì)這種情況，我們可以使用可選屬性

type Todo = Readonly<{
  id: number;
  text: string;
  done: boolean;
  priority?: Priority;
}>

在對(duì)應(yīng)的地方添加一個(gè)?即可

數(shù)據(jù)轉(zhuǎn)視圖

那對(duì)應(yīng)的priority的數(shù)據(jù)有了，如何把1，2，3這種的轉(zhuǎn)成?。?！的形式呢？

可以自定義一個(gè)函數(shù)，也就是priorityToString

priorityToString(1)
// ！
priorityToString(2)
// ??！
priorityToString(3)
// ！?。?
priorityToString({ custom: '緊急' })
// 緊急

情況比較少，可能你會(huì)這樣寫

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)合類型我們通過if條件進(jìn)行判斷的時(shí)候，它會(huì)自動(dòng)確認(rèn)每個(gè)if條件下的參數(shù)類型，這也是聯(lián)合類型的強(qiáng)大之處

總結(jié)

基本上我們項(xiàng)目中用到的一些知識(shí)點(diǎn)這里都概括了，通過一個(gè)簡(jiǎn)單的項(xiàng)目，將ts的一些基本類型給大家做了一個(gè)簡(jiǎn)要的說明

參考：ts.chibicode.com/todo/

以上就是項(xiàng)目中使用TypeScript的TodoList實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript TodoList使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論