typescript中设置别名paths

请添加图片描述

设置tsconfig.json属性compilerOptions.paths
配置后引用

import Example from "@ceshitspaths";

发现我的vscode编辑器已经能识别这个路径了,当我按下ctrl点击路径的时候,也自动跳转到了a.ts文件,再运行npm run start报错如下

Module not found: Can't resolve '@ceshitspaths' 

在这里插入图片描述

原因:typescript根本不会对别名进行处理,只能借助第三方编译工具,例如babel,webpack。

解决方案:
我的项目使用的是roadhog编译,根目录添加webpack配置webpack.config.js,在配置文件中自动读取了tsconfig中path的属性来给webpack设置别名,避免多位置配置alias。

var tsconfig = require("./tsconfig.json");
var paths = tsconfig.compilerOptions.paths;
var alias = {};
Object.keys(paths).forEach(function (key) {
  var value = paths[key][0];
  alias[key] = `${__dirname}/${value}`;
});

console.log("alias", alias);
module.exports = (webpackConfig, env) => {
  // 别名配置

  const data = webpackConfig.resolve.alias;

  webpackConfig.resolve.alias = {
    // ...alias,
    ...data,
  };
  return webpackConfig;
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2和Vue-cli使用TypeScript需要进行一定的配置。下面是详细的配置步骤: 1. 安装TypeScript和相关依赖 首先需要安装TypeScript和相关依赖: ```bash npm install typescript ts-loader ``` 2. 配置tsconfig.json 在项目的根目录下创建一个tsconfig.json文件,并进行如下配置: ```json { "compilerOptions": { "target": "es5", "module": "es2015", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 其的配置项意义如下: - target: 编译后的JavaScript代码的目标版本 - module: 模块化方式 - strict: 开启TypeScript的严格模式 - jsx: 支持使用JSX语法 - moduleResolution: 模块解析方式 - esModuleInterop: 支持导入非ES6模块的默认导出 - baseUrl: 模块解析的基础路径 - paths: 模块解析的别名配置 3. 配置webpackwebpack.config.js进行如下配置: ```javascript module.exports = { // ... resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], alias: { '@': path.resolve(__dirname, 'src') } }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } } ] } // ... } ``` 其的配置项意义如下: - extensions: 支持解析的文件扩展名 - alias: 模块解析的别名配置 - test: 匹配需要使用ts-loader处理的文件类型 - loader: 使用的loader - exclude: 排除不需要处理的文件夹 - options: ts-loader的配置项 4. 安装Vue的类型声明文件 需要安装Vue的类型声明文件,使得TypeScript能够正确地识别Vue相关的API。 ```bash npm install @types/vue -D ``` 5. 在组件使用TypeScript 在Vue组件,需要使用.ts或者.tsx文件作为组件的文件后缀,然后在脚本使用TypeScript进行编写,例如: ```vue <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { message: string = 'Hello, World!' } </script> <style> /* ... */ </style> ``` 这样就可以在Vue2和Vue-cli使用TypeScript进行开发了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值