脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → typescript配置alias

typescript配置alias的详细步骤

 更新时间：2020年08月12日 08:57:52   作者：墨抒颖  
这篇文章主要介绍了typescript配置alias，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1 安装依赖

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

根目录新增.babelrc文件

参考以下内容按您项目中的需要去修改

{
 "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报Option 'paths' cannot be used without specifying '--baseUrl' option.错误

next.js中配置alias也可以参考如上步骤

到此这篇关于typescript配置alias的详细步骤的文章就介绍到这了,更多相关typescript配置alias内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • jquery pagination插件动态分页实例(Bootstrap分页)

    jquery pagination插件动态分页实例(Bootstrap分页)

    这篇文章主要为大家分享了Bootstrap静态分页和jquery pagination插件动态分页两个实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Javascript数据结构之栈和队列详解

    Javascript数据结构之栈和队列详解

    要了解JavaScript数组的堆栈和队列方法的操作,需要先对堆栈和队列基础知识有所了解,下面这篇文章主要给大家介绍了关于Javascript数据结构之栈和队列的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • javascript中对象的定义、使用以及对象和原型链操作小结

    javascript中对象的定义、使用以及对象和原型链操作小结

    这篇文章主要介绍了javascript中对象的定义、使用以及对象和原型链操作,结合实例形式总结分析了javascript对象操作的常用技巧,需要的朋友可以参考下
    2016-12-12
  • JS button按钮实现submit按钮提交效果

    JS button按钮实现submit按钮提交效果

    今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交，所以想到的实现方法就是 使用button实现,怎么实现呢？下面小编给大家分享JS button按钮实现submit按钮提交效果，感兴趣的朋友参考下吧
    2016-11-11
  • javascript仿百度输入框提示自动下拉补全

    javascript仿百度输入框提示自动下拉补全

    这篇文章主要介绍了javascript仿百度输入框提示自动下拉补全的相关资料,需要的朋友可以参考下
    2016-01-01
  • 详解Typescript里的This的使用方法

    详解Typescript里的This的使用方法

    这篇文章主要介绍了详解Typescript里的This的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 前端取消接口调用的方法示例

    前端取消接口调用的方法示例

    这篇文章主要介绍了前端取消接口调用的相关资料,讲解了XMLHttpRequest和AbortController两种取消HTTP请求的方法,XMLHttpRequest通过abort()方法取消请求,而AbortController提供了一个更现代和灵活的解决方案,需要的朋友可以参考下
    2025-03-03
  • JS 获取span标签中的值的代码 支持ie与firefox

    JS 获取span标签中的值的代码 支持ie与firefox

    JS获取span标签中的值的代码，在实际应用中经常用的到的功能，原理很简单，大家可以拓展下。
    2009-08-08
  • nestjs实现图形校验和单点登录的示例代码

    nestjs实现图形校验和单点登录的示例代码

    本文主要介绍了nestjs实现图形校验和单点登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JavaScript中find()和 filter()方法的区别小结

    JavaScript中find()和 filter()方法的区别小结

    js中find和filter方法大家在工作中会经常遇到,那么他们有什么区别呢？这篇文章主要给大家介绍了关于JavaScript中find()和 filter()方法区别的相关资料,需要的朋友可以参考下
    2021-12-12

最新评论