您好,登錄后才能下訂單哦!
這篇文章主要講解了“寫TypeScript代碼的1壞習(xí)慣有哪些”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“寫TypeScript代碼的1壞習(xí)慣有哪些”吧!
沒有用嚴(yán)格模式編寫 tsconfig.json。
{ "compilerOptions": { "target": "ES2015", "module": "commonjs" } }
只需啟用 strict 模式即可:
{ "compilerOptions": { "target": "ES2015", "module": "commonjs", "strict": true } }
在現(xiàn)有代碼庫中引入更嚴(yán)格的規(guī)則需要花費(fèi)時間。
更嚴(yán)格的規(guī)則使將來維護(hù)代碼時更加容易,使你節(jié)省大量的時間。
使用舊的 || 處理后備的默認(rèn)值:
function createBlogPost (text: string, author: string, date?: Date) { return { text: text, author: author, date: date || new Date() } }
使用新的 ?? 運(yùn)算符,或者在參數(shù)重定義默認(rèn)值。
function createBlogPost (text: string, author: string, date: Date = new Date()) return { text: text, author: author, date: date } }
?? 運(yùn)算符是去年才引入的,當(dāng)在長函數(shù)中使用值時,可能很難將其設(shè)置為參數(shù)默認(rèn)值。
?? 與 || 不同,?? 僅針對 null 或 undefined,并不適用于所有虛值。
當(dāng)你不確定結(jié)構(gòu)時,可以用 any 類型。
async function loadProducts(): Promise<Product[]> { const response = await fetch('https://api.mysite.com/products') const products: any = await response.json() return products }
把你代碼中任何一個使用 any 的地方都改為 unknown
async function loadProducts(): Promise<Product[]> { const response = await fetch('https://api.mysite.com/products') const products: unknown = await response.json() return products as Product[] }
any 是很方便的,因為它基本上禁用了所有的類型檢查。通常,甚至在官方提供的類型中都使用了 any。例如,TypeScript 團(tuán)隊將上面例子中的 response.json() 的類型設(shè)置為 Promise <any>。
它基本上禁用所有類型檢查。任何通過 any 進(jìn)來的東西將完全放棄所有類型檢查。這將會使錯誤很難被捕獲到。
強(qiáng)行告訴編譯器無法推斷的類型。
async function loadProducts(): Promise<Product[]> { const response = await fetch('https://api.mysite.com/products') const products: unknown = await response.json() return products as Product[] }
這正是 Type Guard 的用武之地。
function isArrayOfProducts (obj: unknown): obj is Product[] { return Array.isArray(obj) && obj.every(isProduct) } function isProduct (obj: unknown): obj is Product { return obj != null && typeof (obj as Product).id === 'string' } async function loadProducts(): Promise<Product[]> { const response = await fetch('https://api.mysite.com/products') const products: unknown = await response.json() if (!isArrayOfProducts(products)) { throw new TypeError('Received malformed products API response') } return products }
從 JavaScript 轉(zhuǎn)到 TypeScript 時,現(xiàn)有的代碼庫通常會對 TypeScript 編譯器無法自動推斷出的類型進(jìn)行假設(shè)。在這時,通過 as SomeOtherType 可以加快轉(zhuǎn)換速度,而不必修改 tsconfig 中的設(shè)置。
Type Guard 會確保所有檢查都是明確的。
編寫測試時創(chuàng)建不完整的用例。
interface User { id: string firstName: string lastName: string email: string } test('createEmailText returns text that greats the user by first name', () => { const user: User = { firstName: 'John' } as any expect(createEmailText(user)).toContain(user.firstName) }
如果你需要模擬測試數(shù)據(jù),請將模擬邏輯移到要模擬的對象旁邊,并使其可重用。
interface User { id: string firstName: string lastName: string email: string } class MockUser implements User { id = 'id' firstName = 'John' lastName = 'Doe' email = 'john@doe.com' } test('createEmailText returns text that greats the user by first name', () => { const user = new MockUser() expect(createEmailText(user)).toContain(user.firstName) }
在給尚不具備廣泛測試覆蓋條件的代碼編寫測試時,通常會存在復(fù)雜的大數(shù)據(jù)結(jié)構(gòu),但要測試的特定功能僅需要其中的一部分。短期內(nèi)不必關(guān)心其他屬性。
在某些情況下,被測代碼依賴于我們之前認(rèn)為不重要的屬性,然后需要更新針對該功能的所有測試。
將屬性標(biāo)記為可選屬性,即便這些屬性有時不存在。
interface Product { id: string type: 'digital' | 'physical' weightInKg?: number sizeInMb?: number }
明確哪些組合存在,哪些不存在。
interface Product { id: string type: 'digital' | 'physical' } interface DigitalProduct extends Product { type: 'digital' sizeInMb: number } interface PhysicalProduct extends Product { type: 'physical' weightInKg: number }
將屬性標(biāo)記為可選而不是拆分類型更容易,并且產(chǎn)生的代碼更少。它還需要對正在構(gòu)建的產(chǎn)品有更深入的了解,并且如果對產(chǎn)品的設(shè)計有所修改,可能會限制代碼的使用。
類型系統(tǒng)的最大好處是可以用編譯時檢查代替運(yùn)行時檢查。通過更顯式的類型,能夠?qū)赡懿槐蛔⒁獾腻e誤進(jìn)行編譯時檢查,例如確保每個 DigitalProduct 都有一個 sizeInMb。
用一個字母命名泛型
function head<T> (arr: T[]): T | undefined { return arr[0] }
提供完整的描述性類型名稱。
function head<Element> (arr: Element[]): Element | undefined { return arr[0] }
這種寫法最早來源于C++的范型庫,即使是 TS 的官方文檔也在用一個字母的名稱。它也可以更快地輸入,只需要簡單的敲下一個字母 T 就可以代替寫全名。
通用類型變量也是變量,就像其他變量一樣。當(dāng) IDE 開始向我們展示變量的類型細(xì)節(jié)時,我們已經(jīng)慢慢放棄了用它們的名稱描述來變量類型的想法。例如我們現(xiàn)在寫代碼用 const name ='Daniel',而不是 const strName ='Daniel'。同樣,一個字母的變量名通常會令人費(fèi)解,因為不看聲明就很難理解它們的含義。
通過直接將值傳給 if 語句來檢查是否定義了值。
function createNewMessagesResponse (countOfNewMessages?: number) { if (countOfNewMessages) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
明確檢查我們所關(guān)心的狀況。
function createNewMessagesResponse (countOfNewMessages?: number) { if (countOfNewMessages !== undefined) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
編寫簡短的檢測代碼看起來更加簡潔,使我們能夠避免思考實(shí)際想要檢測的內(nèi)容。
也許我們應(yīng)該考慮一下實(shí)際要檢查的內(nèi)容。例如上面的例子以不同的方式處理 countOfNewMessages 為 0 的情況。
將非布爾值轉(zhuǎn)換為布爾值。
function createNewMessagesResponse (countOfNewMessages?: number) { if (!!countOfNewMessages) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
明確檢查我們所關(guān)心的狀況。
function createNewMessagesResponse (countOfNewMessages?: number) { if (countOfNewMessages !== undefined) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
對某些人而言,理解 !! 就像是進(jìn)入 JavaScript 世界的入門儀式。它看起來簡短而簡潔,如果你對它已經(jīng)非常習(xí)慣了,就會知道它的含義。這是將任意值轉(zhuǎn)換為布爾值的便捷方式。尤其是在如果虛值之間沒有明確的語義界限時,例如 null、undefined 和 ''。
與很多編碼時的便捷方式一樣,使用 !! 實(shí)際上是混淆了代碼的真實(shí)含義。這使得新開發(fā)人員很難理解代碼,無論是對一般開發(fā)人員來說還是對 JavaScript 來說都是新手。也很容易引入細(xì)微的錯誤。在對“非布爾類型的值”進(jìn)行布爾檢查時 countOfNewMessages 為 0 的問題在使用 !! 時仍然會存在。
棒棒運(yùn)算符的小弟 ! = null使我們能同時檢查 null 和 undefined。
function createNewMessagesResponse (countOfNewMessages?: number) { if (countOfNewMessages != null) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
明確檢查我們所關(guān)心的狀況。
function createNewMessagesResponse (countOfNewMessages?: number) { if (countOfNewMessages !== undefined) { return `You have ${countOfNewMessages} new messages` } return 'Error: Could not retrieve number of new messages' }
如果你的代碼在 null 和 undefined 之間沒有明顯的區(qū)別,那么 != null 有助于簡化對這兩種可能性的檢查。
盡管 null 在 JavaScript早期很麻煩,但 TypeScript 處于 strict 模式時,它卻可以成為這種語言中寶貴的工具。一種常見模式是將 null 值定義為不存在的事物,將 undefined 定義為未知的事物,例如 user.firstName === null 可能意味著用戶實(shí)際上沒有名字,而 user.firstName === undefined 只是意味著我們尚未詢問該用戶(而 user.firstName === 的意思是字面意思是 '' 。
感謝各位的閱讀,以上就是“寫TypeScript代碼的1壞習(xí)慣有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對寫TypeScript代碼的1壞習(xí)慣有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。