TypeScript?類型級(jí)別示例介紹
介紹
這是一門在線課程,旨在將您的TypeScript技能從中級(jí)提升到高級(jí)。它將使你深入了解類型系統(tǒng)的基本原理,并指導(dǎo)你完成其高級(jí)功能。在這里,你會(huì)找到成為TypeScript專家所需的一切-不僅有深入的內(nèi)容,還有練習(xí)新技能的有趣挑戰(zhàn),就像這里的這個(gè)。
/** * Try assigning "World" to `type Hello`! */ type Hello = "..."; // Type-level unit tests! // If the next line type-checks, you solved this challenge! type test1 = Expect<Equal<Hello, "World">>;
多年來,TypeScript的類型系統(tǒng)已經(jīng)從基本的類型注釋發(fā)展成為一種大型復(fù)雜的編程語言。如果你曾經(jīng)研究過一個(gè)開源庫的代碼,你可能會(huì)發(fā)現(xiàn)一些看起來很嚇人、很陌生的類型,比如來自另一個(gè)星球的一些深?yuàn)W的語言。庫代碼通常需要比我們習(xí)慣編寫的代碼更抽象;
這就是為什么它廣泛使用高級(jí)TypeScript功能,如泛型、條件類型、映射類型甚至遞歸類型。我個(gè)人在研究TS Pattern時(shí)學(xué)習(xí)了這些概念,這是一個(gè)開源庫,具有極其難以鍵入的特殊性。在本課程中,我希望分享我通過閱讀過多的源代碼和對(duì)類型系統(tǒng)進(jìn)行數(shù)百小時(shí)的修改所學(xué)到的知識(shí)。
類型之所以很棒,有很多原因:
- 類型可以作為代碼的文檔,以便查詢。
- 類型可以向開發(fā)人員提供代碼提示。
- 類型能發(fā)現(xiàn)錯(cuò)誤和拼寫錯(cuò)誤。
類型系統(tǒng)對(duì)您的代碼了解得越多,它對(duì)你的幫助就越大!一旦你精通TypeScript,一切都變得可能。您將不再覺得類型系統(tǒng)限制了您編寫所需抽象的能力。
想不想檢查路由參數(shù)傳遞的是否正確?
走你:
// ? this is correct ?? navigate("user/:userId", { userId: "2" }); // ? Looks good! `dashboardId` is optional. navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2" }); // ? `userId` is missing. Add one to fix the error! navigate("user/:userId/dashboard(/:dashboardId)", { dashboardId: "2" }); // ? `oops` isn't a parameter. Remove it to fix the error! navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2", oops: ":(" }); // ?? Scroll to see how this works! // ?? Here are the kind of things you will soon be able to do! type ParseUrlParams<Url> = Url extends `${infer Path}(${infer OptionalPath})` ? ParseUrlParams<Path> & Partial<ParseUrlParams<OptionalPath>> : Url extends `${infer Start}/${infer Rest}` ? ParseUrlParams<Start> & ParseUrlParams<Rest> : Url extends `:${infer Param}` ? { [K in Param]: string } : {}; // navigate to a different route function navigate<T extends string>( path: T, params: ParseUrlParams<T> ) { // interpolate params let url = Object.entries<string>(params).reduce<string>( (path, [key, value]) => path.replace(`:${key}`, value), path ); // clean url url = url.replace(/(\(|\)|\/?:[^\/]+)/g, '') // update url history.pushState({}, '', url); }
是不是覺得很神奇?它居然能夠檢查路由參數(shù)的傳遞。其實(shí)這并不是魔法。類型系統(tǒng)只是一種真正的編程語言!
為了更好地理解這一點(diǎn),我們首先需要承認(rèn)TypeScript的類型系統(tǒng)本身就是一種成熟的編程語言!它非常值得學(xué)習(xí)它的基礎(chǔ)知識(shí),就像我們使用任何其他新編程語言一樣。在本課程中,我將嘗試展示您已經(jīng)知道的編程概念之間的對(duì)應(yīng)關(guān)系,如代碼分支、變量賦值、循環(huán)和數(shù)據(jù)結(jié)構(gòu),以及它們的類型級(jí)別等價(jià)物。通過組裝這些構(gòu)建塊,您將能夠創(chuàng)建強(qiáng)大的類型級(jí)算法,以確保在整個(gè)代碼庫中始終正確使用您創(chuàng)建的抽象。
以上就是TypeScript 類型級(jí)別示例介紹的詳細(xì)內(nèi)容,更多關(guān)于TypeScript 類型級(jí)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 直觀詳細(xì)的typescript隱式類型轉(zhuǎn)換圖文詳解
- TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
- TypeScript類型使用示例剖析
- TypeScript類型實(shí)現(xiàn)加減乘除詳解
- 自動(dòng)生成typescript類型聲明工具實(shí)現(xiàn)詳解
- TypeScript中的遞歸類型示例解析
- TypeScript實(shí)現(xiàn)類型安全的EventEmitter
- TypeScript類型級(jí)別和值級(jí)別示例詳解
- Typescript?轉(zhuǎn)換類型操作索引映射類型IIMT模式學(xué)習(xí)
相關(guān)文章
TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Webpack source map實(shí)戰(zhàn)分析詳解
這篇文章主要為大家介紹了Webpack source map示例分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12CKEditor4配置與開發(fā)詳細(xì)中文說明文檔
網(wǎng)上分享的CKEditor4中文說明很多都只是的部分使用方法,今天為大家分享一下比較完整的CKEditor4中文說明文檔2018-10-10Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08TypeScript十大排序算法插入排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法插入排序?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02TypeScript之Generics泛型類型學(xué)習(xí)
這篇文章主要為大家介紹了TypeScript之Generics泛型類型學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07TypeScript逆變之條件推斷和泛型的應(yīng)用示例詳解
這篇文章主要為大家介紹了TypeScript逆變之條件推斷和泛型的應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09