摘要:會(huì)報(bào)錯(cuò),因?yàn)橹袥]有暴露此方法,可以最大限度的避免拼寫錯(cuò)誤在此之前,先看一個(gè)的錯(cuò)誤處理流程,以下是對進(jìn)行集中處理,并且標(biāo)識的過程在處,會(huì)編譯出錯(cuò),提示。
用了一段時(shí)間的 typescript 之后,深感中大型項(xiàng)目中 typescript 的必要性,它能夠提前在編譯期避免許多 bug,如很惡心的拼寫問題。而越來越多的 package 也開始使用 ts,學(xué)習(xí) ts 已是勢在必行。
以下是我在工作中總結(jié)到的比較實(shí)用的 typescript 技巧。
本文鏈接: https://shanyue.tech/post/ts-...
01 keyofkeyof 與 Object.keys 略有相似,只不過 keyof 取 interface 的鍵。
interface Point { x: number; y: number; } // type keys = "x" | "y" type keys = keyof Point;
假設(shè)有一個(gè) object 如下所示,我們需要使用 typescript 實(shí)現(xiàn)一個(gè) get 函數(shù)來獲取它的屬性值
const data = { a: 3, hello: "world" } function get(o: object, name: string) { return o[name] }
我們剛開始可能會(huì)這么寫,不過它有很多缺點(diǎn)
無法確認(rèn)返回類型:這將損失 ts 最大的類型校驗(yàn)功能
無法對 key 做約束:可能會(huì)犯拼寫錯(cuò)誤的問題
這時(shí)可以使用 keyof 來加強(qiáng) get 函數(shù)的類型功能,有興趣的同學(xué)可以看看 _.get 的 type 標(biāo)記以及實(shí)現(xiàn)
function get02 Partial & Pick(o: T, name: K): T[K] { return o[name] }
既然了解了 keyof,可以使用它對屬性做一些擴(kuò)展, 如實(shí)現(xiàn) Partial 和 Pick,Pick 一般用在 _.pick 中
type Partial03 Condition Type= { [P in keyof T]?: T[P]; }; type Pick = { [P in K]: T[P]; }; interface User { id: number; age: number; name: string; }; // 相當(dāng)于: type PartialUser = { id?: number; age?: number; name?: string; } type PartialUser = Partial // 相當(dāng)于: type PickUser = { id: number; age: number; } type PickUser = Pick
類似于 js 中的 ?: 運(yùn)算符,可以使用它擴(kuò)展一些基本類型
T extends U ? X : Y type isTrue04 never & Exclude & Omit= T extends true ? true : false // 相當(dāng)于 type t = false type t = isTrue // 相當(dāng)于 type t = false type t1 = isTrue
官方文檔對 never 的描述如下
the never type represents the type of values that never occur.
結(jié)合 never 與 conditional type 可以推出很多有意思而且實(shí)用的類型,比如 Omit
type Exclude= T extends U ? never : T; // 相當(dāng)于: type A = "a" type A = Exclude<"x" | "a", "x" | "y" | "z">
結(jié)合 Exclude 可以推出 Omit 的寫法
type Omit05 typeof= Pick >; interface User { id: number; age: number; name: string; }; // 相當(dāng)于: type PickUser = { age: number; name: string; } type OmitUser = Omit
顧名思義,typeof 代表取某個(gè)值的 type,可以從以下示例來展示他們的用法
const a: number = 3 // 相當(dāng)于: const b: number = 4 const b: typeof a = 4
在一個(gè)典型的服務(wù)端項(xiàng)目中,我們經(jīng)常需要把一些工具塞到 context 中,如config,logger,db models, utils 等,此時(shí)就使用到 typeof。
import logger from "./logger" import utils from "./utils" interface Context extends KoaContect { logger: typeof logger, utils: typeof utils } app.use((ctx: Context) => { ctx.logger.info("hello, world") // 會(huì)報(bào)錯(cuò),因?yàn)?logger.ts 中沒有暴露此方法,可以最大限度的避免拼寫錯(cuò)誤 ctx.loger.info("hello, world") })06 is
在此之前,先看一個(gè) koa 的錯(cuò)誤處理流程,以下是對 error 進(jìn)行集中處理,并且標(biāo)識 code 的過程
app.use(async (ctx, next) => { try { await next(); } catch (err) { let code = "BAD_REQUEST" if (err.isAxiosError) { code = `Axios-${err.code}` } else if (err instanceof Sequelize.BaseError) { } ctx.body = { code } } })
在 err.code 處,會(huì)編譯出錯(cuò),提示 Property "code" does not exist on type "Error".ts(2339)。
此時(shí)可以使用 as AxiosError 或者 as any 來避免報(bào)錯(cuò),不過強(qiáng)制類型轉(zhuǎn)換也不夠友好
if ((err as AxiosError).isAxiosError) { code = `Axios-${(err as AxiosError).code}` }
此時(shí)可以使用 is 來判定值的類型
function isAxiosError (error: any): error is AxiosError { return error.isAxiosError } if (isAxiosError(err)) { code = `Axios-${err.code}` }
在 GraphQL 的源碼中,有很多諸如此類的用法,用以標(biāo)識類型
export function isType(type: any): type is GraphQLType; export function isScalarType(type: any): type is GraphQLScalarType; export function isObjectType(type: any): type is GraphQLObjectType; export function isInterfaceType(type: any): type is GraphQLInterfaceType;07 interface & type
interface 與 type 的區(qū)別是什么?可以參考以下 stackoverflow 的問題
https://stackoverflow.com/que...
一般來說,interface 與 type 區(qū)別很小,比如以下兩種寫法差不多
interface A { a: number; b: number; }; type B { a: number; b: number; }
其中 interface 可以如下合并多個(gè),而 type 只能使用 & 類進(jìn)行連接。
interface A { a: number; } interface A { b: number; } const a: A = { a: 3, b: 4 }08 Dictionary & Many
這幾個(gè)語法糖是從 lodash 的 types 源碼中學(xué)到的,平時(shí)工作中的使用頻率還挺高。
interface Dictionary09 使用 const enum 維護(hù)常量表{ [index: string]: T; }; interface NumericDictionary { [index: number]: T; }; const data:Dictionary = { a: 3, b: 4 }
相比使用字面量對象維護(hù)常量,const enum 可以提供更安全的類型檢查
// 使用 object 維護(hù)常量 const enum TODO_STATUS { TODO = "TODO", DONE = "DONE", DOING = "DOING" }
// 使用 const enum 偉華常量 const enum TODO_STATUS { TODO = "TODO", DONE = "DONE", DOING = "DOING" } function todos (status: TODO_STATUS): Todo[]; todos(TODO_STATUS.TODO)10 VS Code Tips & Typescript Command
使用 VS Code 有時(shí)會(huì)出現(xiàn),使用 tsc 編譯時(shí)產(chǎn)生的問題與 vs code 提示的問題不一致
找到項(xiàng)目右下角的 Typescript 字樣,右側(cè)顯示它的版本號,可以點(diǎn)擊選擇 Use Workspace Version,它表示與項(xiàng)目依賴的 typescript 版本一直。
或者編輯 .vs-code/settings.json
{ "typescript.tsdk": "node_modules/typescript/lib" }11 Typescript Roadmap
最后一條也是最重要的一條,翻閱 Roadmap,了解 ts 的一些新的特性與 bug 修復(fù)情況。
Typescript Roadmap
參考https://www.typescriptlang.or...
https://www.typescriptlang.or...
https://moin.world/2017/06/18...
歡迎關(guān)注我的公眾號山月行,在這里記錄著我的技術(shù)成長,歡迎交流
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104611.html
摘要:一個(gè)帶提示的最后對于開發(fā)同學(xué)來說,就算不使用,也強(qiáng)烈建議使用提供注解,它會(huì)通過一些類型推導(dǎo)來檢查你的代碼的正確性,可以減少很多開發(fā)過程中的。相對于對象,它保證了輸入的類型你定義的對象可能某一天不再只有類型的,不再需要額外的類型判斷。 作者:陳達(dá)孚 香港中文大學(xué)研究生,《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》作者之一,《前端開發(fā)者指南2017》譯者之一,在中國前端開發(fā)者大會(huì),中生代技術(shù)大會(huì)等技術(shù)...
摘要:官方文檔高級類型優(yōu)先閱讀,建議閱讀英文文檔。關(guān)鍵字這個(gè)關(guān)鍵字是在版本引入的在條件類型語句中,該關(guān)鍵字用于替代手動(dòng)獲取類型。源碼解釋使用條件判斷完成示例官方作用該類型可以獲得函數(shù)的參數(shù)類型組成的元組類型。 學(xué)習(xí) TypeScript 到一定階段,必須要學(xué)會(huì)高階類型的使用,否則一些復(fù)雜的場景若是用 any 類型來處理的話,也就失去了 TS 類型檢查的意義。 本文羅列了 TypeScript...
摘要:往期第一課體驗(yàn)第二課基礎(chǔ)類型和入門高級類型第三課泛型第四課解讀高級類型插一課本來打算接著上節(jié)課把高級類型都講完但是寫著寫著我發(fā)現(xiàn)高級類型中有很多地方都需要泛型的知識那么先插一節(jié)泛型什么是類型變量和泛型變量的概念我們都知道可以表示任意數(shù)據(jù)類型 往期 第一課, 體驗(yàn)typescript 第二課, 基礎(chǔ)類型和入門高級類型 第三課, 泛型 第四課, 解讀高級類型 插一課 本來打算接著上節(jié)課, ...
摘要:入門,第一個(gè)這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數(shù)式編程語言,它的代碼運(yùn)行在之上。它通過編輯類工具,帶來了先進(jìn)的編輯體驗(yàn),增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了,總結(jié)過去的 2017,相信小伙們一定有很多收獲...
摘要:入門,第一個(gè)這是一門很新的語言,年前后正式公布,算起來是比較年輕的編程語言了,更重要的是它是面向程序員的函數(shù)式編程語言,它的代碼運(yùn)行在之上。它通過編輯類工具,帶來了先進(jìn)的編輯體驗(yàn),增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了,總結(jié)過去的 2017,相信小伙們一定有很多收獲...
閱讀 2081·2021-11-02 14:48
閱讀 2760·2019-08-30 14:19
閱讀 2929·2019-08-30 13:19
閱讀 1297·2019-08-29 16:17
閱讀 3230·2019-08-26 14:05
閱讀 2986·2019-08-26 13:58
閱讀 3075·2019-08-23 18:10
閱讀 1105·2019-08-23 18:04