前言

本文章是我在團(tuán)隊(duì)日常開發(fā)中發(fā)現(xiàn)的一些問題的總結(jié)，有不對的地方歡迎大家指出，互相學(xué)習(xí)、共同進(jìn)步~~

類型不會復(fù)用

在日常開發(fā)中，一般我們對于每個接口都要定義好請求參數(shù)的類型和返回參數(shù)的類型。而對于一些比較常見的功能，我們一般會有固定的參數(shù)和一些固定的返回字段。

例如列表接口，我們一定會帶上page和rows,這個時候我們就可以先寫一個基礎(chǔ)的列表請求類型如:

interface ReqPage {
  current?: number;
  size?: number;
}

這樣在后續(xù)其他列表的請求參數(shù)，我們在定義的時候就可以繼承這個ReqPage去復(fù)用。 假設(shè)我們現(xiàn)在有一個UserList接口，我們定義請求參數(shù)的類型就可以這樣寫：

interface UserListParams extends ReqPage {
  name: string;
  id: string | number;
}

另外對象類型也有喜歡用type定義的小伙伴，那么對于type我們同樣可以復(fù)用，但是形式上稍微有點(diǎn)不同，還是上面的例子

type ReqPage =  { current?: number; size?: number };

type UserListParams = { 
    name: string;
    id: string | number;
} & ReqPage

對于返回參數(shù)的類型定義也一樣，后端接口一般有幾個字段例如creatTime, updateTime等是必定返回的，我們可以提前定義一個基類用于其他返回類型去繼承復(fù)用。

不會使用工具類型

TypeScipt內(nèi)部提供了很多工具類型，如：Partial、Pick、Exclude、Omit等

舉個在日常工作中經(jīng)常遇到的例子，還是后臺管理系統(tǒng)中常見的列表功能。一般我們的表格會有一些搜索字段，這個時候我們就可以用上我們的工具類型了。

假如我們現(xiàn)在有一個用戶列表，他的返回格式如下：

interface ResUser {
    name: string;
    id: string | number;
    age: number;
    grade: number;
}

如果我們要將name作為搜索條件，那么你的請求參數(shù)類型應(yīng)該怎么定義呢？我們可以使用工具類: Pick 或者 Exclude

type ReqUser = Pick<ResUser, "name"> & ReqPage;

如果搜索條件的字段較多的時候我們就可以考慮使用Exclude方法

個人認(rèn)為使用工具類有兩個好處：

1. 將兩個有關(guān)聯(lián)的類型關(guān)聯(lián)起來，而不是憑空創(chuàng)造一個新的類型。讓團(tuán)隊(duì)中的其他人知道她們是屬于一個功能模塊的。?

2. 增加復(fù)用性，而不是單純的copy yourself。

不會使用泛型

還是上面列表接口的例子，我們一般列表分頁接口的返回會包含幾個通用的字段，例如: records-當(dāng)前頁數(shù)的數(shù)據(jù), total-總頁數(shù)， pages-總頁數(shù)等等。但是對于不同的接口我們所需要定義的類型是肯定不一樣的，就是說records對應(yīng)的類型肯定是不同的。

這時候就有小伙伴想起上面的復(fù)用了。但是除此之外我們還有更好的方法實(shí)現(xiàn)-就是泛型。

// 分頁響應(yīng)參數(shù)
interface ResPage<T> {
  records: T[];
  current: number;
  size: number;
  total: number;
}

通過泛型我們就可以很好的定義。我個人認(rèn)為泛型就是一個 “類型變量”，它在代碼編寫階段可以代表多種類型，在實(shí)際使用時再確定具體類型。再看下面的例子：

function handle<T>(input: T): T {}

const author = "test"; // 使用 const 聲明，被推導(dǎo)為 "tst"

let authorAge = 18; // 使用 let 聲明，被推導(dǎo)為 number

handle(author); // 填充為字面量類型 "test"
handle(authorAge); // 填充為基礎(chǔ)類型 number

泛型對于我們開發(fā)中寫一些公用的基礎(chǔ)類型、公用方法、公用hooks很有用，大家可以多學(xué)習(xí)一下。

圖方便亂用any

相信AnyScript的名號大家都嗤之以鼻，但是在實(shí)際開發(fā)中，還是有很多場景會因?yàn)橐粫r的方便，而使用了any跳過校驗(yàn)。

// 片段1
const onChange = (value: any) => {
  emit("change", value);
};

// 片段2 
let provinceCode: any = "";

上面這兩段代碼都是我在我們團(tuán)隊(duì)的項(xiàng)目中找出來的，類似的代碼還有很多。

其實(shí)我覺得用any偷懶這個問題，并不是技術(shù)水平上的問題而是自己的態(tài)度問題。像上面例子中的provinceCode，我們有必要用any去定義類型嗎？

我們應(yīng)該在每次想使用any之前多問自己一下，這個類型真的無法定義嗎？能用unknown代替嗎？我相信就會有結(jié)果。

不會使用框架或組件庫里的類型

我的項(xiàng)目中常用到的是vue3,element-plus和uni-app等

舉個最簡單的例子，我發(fā)現(xiàn)有的開發(fā)小伙伴居然不知道vue3里面的ref,computed是可以定義類型的~~

// ref
const userName = ref<string>("");

// computed
const userName = computed<string>(() => {
    return "haha";
});

同樣的對element-plus,使用的時候可以多看下文檔，看下怎么定義類型：

對于一些第三方庫文檔上沒有的類型定義，可以自己翻查一下node_modules/types或者對應(yīng)第三方庫的d.ts文件。

舉個例子這是uni對應(yīng)的類型定義，看一下學(xué)習(xí)一下對于自己的水平也會大有提升。

不會使用枚舉和字面量類型

在項(xiàng)目中，我們可以定義一些枚舉，然后在定義新的類型時，可以使用這些枚舉使我們的類型更加準(zhǔn)確：

enum SideDeptFlagEnum {
  INSIDE = 1, // 內(nèi)部單位
  OUTSIDE = 2 // 外部單位
}

interface Dept {
    name: string;
    flag: SideDeptFlagEnum;
}

這樣子定義的話，我們在賦值的時候就會獲得準(zhǔn)確的提示。如果我們定義成普通的number類型的話，則無法校驗(yàn)是否1或者2.當(dāng)然我們也可以定義成字面量類型~~

寫在最后

其實(shí)t本質(zhì)上與js沒有區(qū)別，我們要把它當(dāng)作是一個工具，去幫助我們提升代碼的健壯性，不要產(chǎn)生抵觸情緒。既然用了就要用好，擁抱它。