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;
};

typescript中设置别名paths相关推荐

扯一扯 typescript中几种类型 (附带环境安装)
首先还是老生畅谈的问题哈,什么是typescript 我们怎么在本地编写ts 和如何编译成js呢 typescript 是js的超集哈,说通俗点就是 js的外壳上又套了层皮穿上了更高级的衣服但 ...
如何在TypeScript中删除数组项？
本文翻译自:How do I remove an array item in TypeScript? I have an array that I've created in TypeScript a ...
typeScript面试必备之-通识七:typeScript中的可索引接口（数组，对象）+类类型接口...
可索引接口:数组.对象的约束 (不常用) ts定义数组的方式 var arr:number[]=[2342,235325]var arr1:Array<string>=['111','22 ...
Typescript中使用Axios
1)Vue.prototype 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. ...
JavaScript 和 typeScript 中的 import、from
From:https://segmentfault.com/a/1190000018249137?utm_source=tag-newest Github - allowSyntheticDefaul ...
angular 字符串转换成数字_Angular日期在TypeScript中格式化转换应用
组件模板中我们常常使用Angular内置管道DatePipe将其日期格式化,如同{{ startTime | date:'yyyy-MM-dd' }}这般操作,即可转换为字符串格式.那么在TS文件中我 ...
gettype获取类名_在TypeScript中运行时获取对象的类名
在TypeScript中运行时获取对象的类名是否可以使用typescript在运行时获取对象的类/类型名称? class MyClass{} var instance = new MyClass() ...
第七节：在 TypeScript 中什么是类型推论？
上一节,我们学习了TypeScript中的一种新的数据类型:元组Tuple.没学习上一节的同学可以戳:<又一种新的数据类型:元组Tuple> 这一节,我们一起来学习一下TypeScript ...
第四节：5种数据类型在TypeScript中的运用
在上一节<第三节:快速编译TypeScript,提高开发效率>,我们学习了如何结合IDE快速地帮助我们编译TypeScript,有了这个辅助功能,我们的开发效率就大大提高. 接下来,我们就 ...

typescript中设置别名paths

typescript中设置别名paths相关推荐

最新文章

热门文章