本文總結(jié)一下使用TypeScript開(kāi)發(fā)應(yīng)用程序的一點(diǎn)小經(jīng)驗(yàn)。說(shuō)之前，推薦一個(gè)VSCODE立即執(zhí)行TS代碼的插件quokka.js,

使用方式，ctrl+shipt+p,輸入關(guān)鍵字quokka

回車(chē)之后，輸入代碼之后會(huì)立即執(zhí)行

1. 開(kāi)發(fā)之前確定實(shí)體類(lèi)型

在正式編碼之前，如果沒(méi)有接口文檔的話，最好能拿到數(shù)據(jù)字典，根據(jù)數(shù)據(jù)字典定義一下項(xiàng)目中實(shí)體類(lèi)型，例如數(shù)據(jù)字典中有用戶表，企業(yè)表，我們就可以新建一個(gè)types文件夾，把對(duì)應(yīng)的類(lèi)型放到不同的文件中，目錄如下：

types
    user.ts
    corp.ts
    ...

推薦使用interface定義實(shí)體類(lèi)型，比type語(yǔ)義化更好

interface User{
    id:string
    name:string
}

2. 請(qǐng)求接口時(shí)只需要定義自己需要用到的字段

定義類(lèi)型時(shí)只需要定義自己需要用到的字段，沒(méi)用的字段不需要定義。因?yàn)楹蠖朔祷氐臄?shù)據(jù)是什么類(lèi)型，需要前端來(lái)指定類(lèi)型然后TS做判斷，如果前端不指定類(lèi)型，TS根本沒(méi)辦法判斷。

例如后端返回的數(shù)據(jù)如下：

user:{
    id:1,
    name:'xiaoming',
    sex:0
}

定義的類(lèi)型如下：

interface User{
    id:number,
    name:string
}

這種情況下，TS只會(huì)檢查user中有沒(méi)有id和name，對(duì)于sex是忽略的

3. 使用枚舉類(lèi)型

像性別（男女），管理員類(lèi)型（超管、普通用戶），會(huì)員類(lèi)型（普通用戶，VIP，超級(jí)VIP）這種類(lèi)型的數(shù)據(jù)結(jié)構(gòu)適合用枚舉類(lèi)型來(lái)定義,枚舉類(lèi)型也可以作為值來(lái)使用。

舉個(gè)栗子：

//使用枚舉類(lèi)型來(lái)定義會(huì)員類(lèi)型
enum UserType{
    Common=0,
    VIP=1,
    SuperVIP=2
}
class User{
    id:string
    name:string
    type:UserType
}
let  userList:User[]=[]

userList.push({
    id:'001',
    name:'Jack',
    type:UserType.SuperVIP //枚舉類(lèi)型定義的類(lèi)型可以作為值來(lái)使用
})

枚舉類(lèi)型也可以是字符串，舉例如下，用法同上

enum UserType{
    Common='DiaoSi',
    VIP='LowBVIP',
    SuperVIP='SuperVIP'
}

4. DOM元素的類(lèi)型要正常給

對(duì)于DOM元素，不要給any，人家是有類(lèi)型的。
一般來(lái)說(shuō)，所有的標(biāo)簽都繼承自HTMLElement，然后不同標(biāo)簽有不同的類(lèi)型,這個(gè)類(lèi)型往往是套路化的，例如video元素的類(lèi)型就是HTMLVideoElement,div元素的類(lèi)型是HTMLDivElement,canvas元素的類(lèi)型是HTMLCanvasElement，以此類(lèi)推。其實(shí)常用的類(lèi)型并不多，簡(jiǎn)單列一下：

let element:HTMLElement=null

let video:HTMLVideoElement=null

let div:HTMLDivElement=null

let canvas:HTMLCanvasElement=null

let e:Event =null //事件對(duì)象  e.target

一定要給DOM元素類(lèi)型，這樣你才能收獲代碼提示

這里補(bǔ)充一個(gè)上傳文件時(shí)類(lèi)型怎么給,給Input元素綁定了onChange方法，方法如下：

onChange(event: Event): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [file] = event.target.files;
  }
}

5.對(duì)象的類(lèi)型要怎么給

有一個(gè)函數(shù)，接收對(duì)象作為參數(shù)，類(lèi)型要怎么給？

首先，不要給any，不要?jiǎng)硬粍?dòng)就給any，較Low,想想對(duì)象包含啥，一個(gè)key，一個(gè)value。key的話肯定是個(gè)string類(lèi)型，value要看具體需求，有可能你的value只能是數(shù)字或者字符串，那就 number|string,如果啥都可以，那就給any吧

//定義對(duì)象的類(lèi)型,key一般是string，value可以按照需求給
interface ObjType{
	[key:string]:any
}
function deepCopy(obj:ObjType){
    for(let key in obj){
        console.log(obj[key])
    }

}

let obj={name:"Jack"}
deepCopy(obj)

6.結(jié)構(gòu)賦值時(shí)類(lèi)型怎么給

你有一個(gè)函數(shù)，接收一個(gè)對(duì)象，在對(duì)象中對(duì)參數(shù)進(jìn)行解構(gòu)，結(jié)構(gòu)得到的對(duì)象屬性的類(lèi)型要怎么給，代碼如下：

const user={
    name:'Jack',
    age:10,
    friends:[{id:0,name:'Peter',connect:100},{id:1,name:'Alice',connect:69}]
}

interface Friend{
    id:number,
    name:string,
    connect:number
}


function handleFriends({friends}){//friends的類(lèi)型要怎么給
    friends.map(item=>item.connect)
}

思考10秒鐘，

10

9

8

7

6

5

4

3

2

1

放答案：

interface Friend{
    id:number,
    name:string,
    connect:number
}

function handleFriends({friends}:{friends:Friend[]}){
    friends.map(item=>item.connect)
}

這種在react hooks用的較多。

總結(jié)

到此這篇關(guān)于TypeScript開(kāi)發(fā)小技巧分享的文章就介紹到這了,更多相關(guān)TypeScript開(kāi)發(fā)小技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論