快捷導(dǎo)航

typescript配置alias的詳細(xì)步驟

更新時(shí)間：2020年08月12日 08:57:52 作者：墨抒穎

這篇文章主要介紹了typescript配置alias，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1 安裝依賴

npm install --save-dev babel-plugin-module-resolver
# yarn add babel-plugin-module-resolver --dev

根目錄新增.babelrc文件

參考以下內(nèi)容按您項(xiàng)目中的需要去修改

{
 "presets": ["next/babel"],
 "plugins": [
  [
   "module-resolver",
   {
    "alias": {
     "@/actions": "./actions",
     "@/components": "./components",
     "@/constants": "./constants",
     "@/pages": "./pages",
     "@/public": "./public",
     "@/reducers": "./reducers",
     "@/utils": "./utils"
    }
   }
  ]
 ]
}

修改tsconfig.json文件

{
 "compilerOptions": {
  "baseUrl": "./",
  "paths": {
   "@components/*": ["./components/*"],
   "@pages/*": ["./pages/*"],
   "@public/*": ["./public/*"]
  }
 }
}

注意"baseUrl": "./",不能省去，否則ts報(bào)Option 'paths' cannot be used without specifying '--baseUrl' option.錯誤

next.js中配置alias也可以參考如上步驟

到此這篇關(guān)于typescript配置alias的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)typescript配置alias內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jquery pagination插件動態(tài)分頁實(shí)例(Bootstrap分頁)
這篇文章主要為大家分享了Bootstrap靜態(tài)分頁和jquery pagination插件動態(tài)分頁兩個(gè)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解
要了解JavaScript數(shù)組的堆棧和隊(duì)列方法的操作,需要先對堆棧和隊(duì)列基礎(chǔ)知識有所了解,下面這篇文章主要給大家介紹了關(guān)于Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
javascript中對象的定義、使用以及對象和原型鏈操作小結(jié)
這篇文章主要介紹了javascript中對象的定義、使用以及對象和原型鏈操作,結(jié)合實(shí)例形式總結(jié)分析了javascript對象操作的常用技巧,需要的朋友可以參考下
2016-12-12
JS button按鈕實(shí)現(xiàn)submit按鈕提交效果
今天在使用表單是同時(shí)使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交，所以想到的實(shí)現(xiàn)方法就是使用button實(shí)現(xiàn),怎么實(shí)現(xiàn)呢？下面小編給大家分享JS button按鈕實(shí)現(xiàn)submit按鈕提交效果，感興趣的朋友參考下吧
2016-11-11
javascript仿百度輸入框提示自動下拉補(bǔ)全
這篇文章主要介紹了javascript仿百度輸入框提示自動下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下
2016-01-01
詳解Typescript里的This的使用方法
這篇文章主要介紹了詳解Typescript里的This的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
前端取消接口調(diào)用的方法示例
這篇文章主要介紹了前端取消接口調(diào)用的相關(guān)資料,講解了XMLHttpRequest和AbortController兩種取消HTTP請求的方法,XMLHttpRequest通過abort()方法取消請求,而AbortController提供了一個(gè)更現(xiàn)代和靈活的解決方案,需要的朋友可以參考下
2025-03-03
JS 獲取span標(biāo)簽中的值的代碼支持ie與firefox
JS獲取span標(biāo)簽中的值的代碼，在實(shí)際應(yīng)用中經(jīng)常用的到的功能，原理很簡單，大家可以拓展下。
2009-08-08
nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼
本文主要介紹了nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
JavaScript中find()和?filter()方法的區(qū)別小結(jié)
js中find和filter方法大家在工作中會經(jīng)常遇到,那么他們有什么區(qū)別呢？這篇文章主要給大家介紹了關(guān)于JavaScript中find()和?filter()方法區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-12-12