為什么用todolist

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

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

todolist的ts化

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

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

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

一個tudolist對應(yīng)的數(shù)據(jù)是怎么樣的？就拿剛才的視圖來看的話，它應(yīng)該是一個對象數(shù)組，數(shù)據(jù)應(yīng)該是這樣的

[
  {
    id: 1,
    text: '待辦事項1',
    done: false
  },
  {
    id: 2,
    text: '待辦事項2',
    done: false
  },
  {
    id: 3,
    text: '待辦事項3',
    done: false
  }
]

其中id是每一個代辦事項的唯一標(biāo)識，text是事項名稱，done表示是否完成

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

實現(xiàn)handleTodoItem

對應(yīng)的上述的點擊事件，我們實現(xiàn)一下它的偽代碼，當(dāng)其點擊的時候，需要處理對應(yīng)的數(shù)據(jù)，先使用js實現(xiàn)

function handleTodoItem(todo){
  // 點擊的時候todo中的done的布爾值取反
  return {
    ...todo,
    done: !todo.done
  }
}

然后我們使用ts進行優(yōu)化

type Todo = {
  id: number;
  text: string;
  done: boolean;
}
// 如果某個變量是todo類型，可以這樣
const todoItem: Todo = {
  id: 1,
  text: '待辦事項1',
  done: false
}

這樣ts類型就是正常的，如果相應(yīng)的todoItem不匹配，則編譯就會發(fā)生錯誤，可以讓錯誤提前感知，并且如果項目中有配置的ts相關(guān)，vscode中就會給出對應(yīng)的錯誤信息

對應(yīng)到handleTodoItem這個方法中，應(yīng)該怎么寫呢？

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

readonly

對于handleTodoItem這個函數(shù)來說，函數(shù)應(yīng)該是無副作用的，所以傳進去的todo對象，不應(yīng)該發(fā)生變化，而是返回一個新的對象

比如這種方法，雖然能夠?qū)崿F(xiàn)同樣的內(nèi)容，但是它是有副作用的，改變了傳入的參數(shù)，是不可取的

function handleTodoItem(todo: Todo):Todo {
  // 點擊的時候todo中的done的布爾值取反
  todo.done = !todo.done
  return todo
}

但是這種的ts并不會報錯，怎么辦？那就需要借助我們的ts進行類型校驗，你可以這樣

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

當(dāng)你嘗試修改修改的話，就會發(fā)生ts錯誤，不允許修改，因為Todo類型是只讀的，當(dāng)然你也可以這樣設(shè)置對象中所有的屬性為只讀

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

在ts中，這種Readonly的關(guān)鍵詞還有很多，比如Required，Partial等，如有需要，大家可自行搜索

分類

對于已經(jīng)完成的list，我們需要將其進行分類篩選，比如我們要篩選出所有已經(jīng)完成的項目，那么表現(xiàn)就是一個數(shù)組，并且done為true

[
  {
    id: 1,
    text: '待辦事項1',
    done: true
  },
  {
    id: 2,
    text: '待辦事項2',
    done: true
  }
]

如何表示一個數(shù)組類內(nèi)容呢？Todo[]這種方式就能表示上述數(shù)據(jù)，同樣的，函數(shù)的參數(shù)是不允許修改的，避免副作用，所以可以這樣

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

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

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

所以上述的方法就會變成

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

交叉類型

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

舉個例子

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

當(dāng)兩個類型key相同時，第二個key會覆蓋掉第一個的內(nèi)容

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

那針對Todo和CompletedTodo類型，我們想從Todo通過交叉類型得到CompletedTodo，該怎么做呢？

type CompletedTodo = Todo & {
  readonly done: true
}

是不是很簡潔，并且去除了一些重復(fù)代碼

新增功能

如果在Todo的基礎(chǔ)上，我們新增了一個功能，對應(yīng)的todo的優(yōu)先級，使用priority這個字段表示

并且一共有三種優(yōu)先級

?。。?/p>

?。?/p>

！

你可以priority: 2這樣設(shè)置，展示為【??！】當(dāng)然你也可以自定義，比如

{
  priority: {
    custom: '緊急'
  }
}

則展示為【緊急】，所以這時候數(shù)據(jù)變成了

[
  {
    id: 1,
    text: '待辦事項1',
    done: false,
    priority: 1
  },
  {
    id: 2,
    text: '待辦事項2',
    done: false,
    priority: 2
  },
  {
    id: 3,
    text: '待辦事項3',
    done: false,
    priority: {
      custom: '緊急'
    }
  },
  {
    id: 4,
    text: '待辦事項4',
    done: false
  },
]

我們已經(jīng)有了Todo類型，如何新增一個key呢？

聯(lián)合類型

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

type Foo = number | string;

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

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

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

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

可選屬性

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

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

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

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

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

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

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

情況比較少，可能你會這樣寫

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條件進行判斷的時候，它會自動確認(rèn)每個if條件下的參數(shù)類型，這也是聯(lián)合類型的強大之處

總結(jié)

基本上我們項目中用到的一些知識點這里都概括了，通過一個簡單的項目，將ts的一些基本類型給大家做了一個簡要的說明

參考：ts.chibicode.com/todo/

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

最新評論