快捷導(dǎo)航

關(guān)于TypeScript開發(fā)的6六個(gè)實(shí)用小技巧分享

更新時(shí)間：2021年09月03日 11:07:13 作者：_紅領(lǐng)巾

TypeScript是Javascrip t超集,支持靜態(tài)類型檢測(cè),可以在編譯期提前暴露問題,節(jié)省debug時(shí)間,下面這篇文章主要給大家介紹了關(guān)于TypeScript開發(fā)的6六個(gè)實(shí)用小技巧,需要的朋友可以參考下

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

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

types
    user.ts
    corp.ts
    ...

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

interface User{
    id:string
    name:string
}

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

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

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

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

定義的類型如下：

interface User{
    id:number,
    name:string
}

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

3. 使用枚舉類型

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

舉個(gè)栗子：

//使用枚舉類型來定義會(huì)員類型
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 //枚舉類型定義的類型可以作為值來使用
})

枚舉類型也可以是字符串，舉例如下，用法同上

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

4. DOM元素的類型要正常給

對(duì)于DOM元素，不要給any，人家是有類型的。
一般來說，所有的標(biāo)簽都繼承自HTMLElement，然后不同標(biāo)簽有不同的類型,這個(gè)類型往往是套路化的，例如video元素的類型就是HTMLVideoElement,div元素的類型是HTMLDivElement,canvas元素的類型是HTMLCanvasElement，以此類推。其實(shí)常用的類型并不多，簡(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元素類型，這樣你才能收獲代碼提示

這里補(bǔ)充一個(gè)上傳文件時(shí)類型怎么給,給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ì)象的類型要怎么給

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

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

//定義對(duì)象的類型,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í)類型怎么給

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

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的類型要怎么給
    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用的較多。