超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

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

類型不會(huì)復(fù)用

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

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

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

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

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

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

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

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

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

不會(huì)使用工具類型

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

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

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

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

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

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

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

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

1. 將兩個(gè)有關(guān)聯(lián)的類型關(guān)聯(lián)起來(lái)，而不是憑空創(chuàng)造一個(gè)新的類型。讓團(tuán)隊(duì)中的其他人知道她們是屬于一個(gè)功能模塊的。
2. 增加復(fù)用性，而不是單純的copy yourself

不會(huì)使用泛型

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

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

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

通過(guò)泛型我們就可以很好的定義。我個(gè)人認(rèn)為泛型就是一個(gè) “類型變量”，它在代碼編寫階段可以代表多種類型，在實(shí)際使用時(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

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

圖方便亂用any

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

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

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

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

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

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

不會(huì)使用框架或組件庫(kù)里的類型

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

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

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

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

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

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

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

不會(huì)使用枚舉和字面量類型

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

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

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

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

寫在最后

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