TypeScript開發小狀況記錄之選且只選一個

2022-10-06 14:06:55

前言

在專案內，使用TypeScript的過程中遇到了一些狀況、報錯或棘手的情況，決定開一個系列記錄遇到的問題和我的解決方法。

背景

在專案開發中，很多時候會遇到一種場景，需要定義一個物件的型別，此型別必須包含某n個欄位中的其中一種。

例如，我要定義一個工程師(Engineer)的物件，裡面包括姓名(name)，性別(gender)，年齡(age)和一門程式語言(java/cpp/go/js四選一)的評價。

顯然，前三個欄位都是很簡單的，但是第四個就有點麻煩了。首先，第四個欄位的key是可以不一樣（甚至value也有可能不同），其次欄位只能從給定的裡面4選1。

初步方案

一開始是考慮使用可選或聯合型別，但是發現沒有辦法進行4選1的限制，對於沒有程式語言欄位，或者多個程式語言欄位的情況並沒有很好的限制。最後只能使用泛型，再使用時進行顯式的宣告。

於是，型別定義如下：

interface ICodingLangRating {
    java: string
    cpp: string
    go: string
    js: string
}

type Engineer<K extends keyof ICodingLangRating> = {
    name: string
    gender: 'male' | 'female'
    age: number
} & Pick<ICodingLangRating, K>

對該宣告的校驗程式碼如下：

// 正確
const candidate: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    java: 'fabulous'
}

// 錯誤，宣告了java，但是卻同時定義了java和go欄位
const candidate_1: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    java: 'fabulous',
    go: 'not bad'
}

// 錯誤，宣告了java，但是型別不正確
const candidate_2: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    java: 666
}

// 錯誤，宣告了java，但是卻定義了go欄位
const candidate_3: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    go: 'not bad'
}

// 錯誤，宣告了java，但是卻同時定義了cpp和go欄位
const candidate_4: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    cpp: 'unknown',
    go: 'not bad'
}

// 錯誤，宣告了java，但是卻沒有定義java欄位
const candidate_5: Engineer<'java'> = {
    name: 'Jack',
    gender: 'male',
    age: 22
}

// 錯誤，宣告了ICodingLangRating中不存在的python
const candidate_6: Engineer<'python'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    python: 'just so so'
}

從校驗程式碼可以看出，針對各種不符合期望的情況：

宣告a，卻定義a和b
宣告a，但定義a的型別不正確
宣告a，卻定義b
宣告a，卻定義b和c
宣告a，卻沒有定義a
宣告不合法的f

都能做出正確的限制，確保在業務場景的程式碼中，有且只有一個合法範圍的欄位。

但是，轉折來了！

在後來的使用中，我們發現，其實這個解決方案只是一個弱限制，如果在泛型的顯式宣告中，傳入聯合型別的話，那還是可以繞過有且只有一個程式語言欄位的限制。

// 正確，宣告了java和go，並同時定義了java和go欄位
const candidate_1: Engineer<'java' | 'go'> = {
    name: 'Jack',
    gender: 'male',
    age: 22,
    java: 'fabulous',
    go: 'not bad'
}

難道就真的沒有辦法做到只能選擇一個的限制麼？

終極方案

根據上面的嘗試，目前我們還缺少的是如何阻止同時有2個或以上的合法欄位出現。最笨的方式就是為每一個語言都定義一個類似{ langName: string }這樣的型別然後通過extends或者聯合型別使用，但是顯然這樣就沒有辦法做到在其它情況通用。

而通過官方現成的工具型別，由於都是支援字面量和聯合型別，沒有辦法篩選出只包含一個欄位的型別。就在這時，我想到，是不是可以定義出一個型別，包含全部欄位，但是隻有一個欄位是正確有意義，其他欄位都是無意義的呢。

最終，我就構造出下面這個PickOne工具型別：

type PickOne<T> = {
    [K in keyof T]: Record<K, T[K]> & Partial<Record<Exclude<keyof T, K>, undefined>>
}[keyof T]

測試程式碼如下：

type OneLang = PickOne<ICodingLangRating>

// 正確
const lang: OneLang = {
    java: 'good'
}

// 錯誤
const lang2: OneLang = {
    python: 'unknown'
}

// 錯誤
const lang3: OneLang = {
    java: 'good',
    go: 'good'
}

// 錯誤
const lang4: OneLang = {
    java: 123
}

最後，型別定義程式碼如下：

interface ICodingLangRating {
    java: string
    cpp: string
    go: string
    js: string
}

type Engineer = {
    name: string
    gender: 'male' | 'female'
    age: number
} & PickOne<ICodingLangRating>

使用了這個PickOne工具型別，我不需要在使用的時候顯式的指定程式語言，甚至還能在其它類似的場景使用。

總結

到此這篇關於TypeScript開發小狀況記錄之選且只選一個的文章就介紹到這了,更多相關TypeScript選且只選一個內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

TypeScript開發小狀況記錄之選且只選一個

目錄

前言

背景

初步方案

終極方案

總結

熱門文章