TypeScript類型級別實例代碼分析

本篇內(nèi)容介紹了“TypeScript類型級別實例代碼分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

代碼如下：

/**
 * 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)研究過一個開源庫的代碼，你可能會發(fā)現(xiàn)一些看起來很嚇人、很陌生的類型，比如來自另一個星球的一些深奧的語言。庫代碼通常需要比我們習(xí)慣編寫的代碼更抽象；

這就是為什么它廣泛使用高級TypeScript功能，如泛型、條件類型、映射類型甚至遞歸類型。我個人在研究TS Pattern時學(xué)習(xí)了這些概念，這是一個開源庫，具有極其難以鍵入的特殊性。在本課程中，我希望分享我通過閱讀過多的源代碼和對類型系統(tǒng)進行數(shù)百小時的修改所學(xué)到的知識。

類型之所以很棒，有很多原因：

• 類型可以作為代碼的文檔，以便查詢。

• 類型可以向開發(fā)人員提供代碼提示。

• 類型能發(fā)現(xiàn)錯誤和拼寫錯誤。

類型系統(tǒng)對您的代碼了解得越多，它對你的幫助就越大！一旦你精通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);
}

“TypeScript類型級別實例代碼分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！