[英]Typescript alias import with auto-complete
===== 2021/03/17 Update ===== ===== 2021/03/17 更新 =====
If anyone still have the same issue.如果有人仍然有同样的问题。 You can try this:
你可以试试这个:
webpack.config.js webpack.config.js
module.exports = {
...
resolve: {
alias: {
components: path.resolve(process.cwd(), './src/components'),
},
},
};
tsconfig.json tsconfig.json
{
...
"baseUrl": ".",
"path": {
"components/*": ["./src/components/*"]
}
}
===== Origin Post ===== ===== 原始帖子 =====
I have a Alert React component below:我在下面有一个 Alert React 组件:
import React from 'react';
interface Props {
message: string;
};
const Alert = (props: Props) => {
return (
<div>{props.message}</div>
);
};
export default Alert;
I use the alias import instead of relative import :我使用别名导入而不是相对导入:
// alias import
import Alert from 'components/Alert';
// relative import
// import Alert from '../../components/Alert';
const App = () => {
return (
<div>
<Alert message="I want to know the interface of Alert" />
</div>
);
};
export default App;
If I type "<Alert me" in relative import , VSCode will show the auto-complete options.如果我在relative import中键入“<Alert me”,VSCode 将显示自动完成选项。
However, when I use the alias import , VSCode won't show the auto-complete.但是,当我使用别名 import时,VSCode 不会显示自动完成。
Is there any possible way to let the VSCode knows the 'components/Alert' is '../../components/Alert', and show me the auto-complete that I can understand the interface of Alert's props?有什么方法可以让 VSCode 知道“components/Alert”是“../../components/Alert”,并向我展示我可以理解 Alert 道具界面的自动完成功能吗?
Here is how I setting the alias, I had been tried both webpack config and tsconfig :这是我设置别名的方法,我已经尝试过webpack config和tsconfig :
webpack.config.js webpack.config.js
...
resolve: {
modules: ['node_modules', 'src'],
extensions: ['.ts', '.tsx', '.js', '.jsx'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'components/*': path.resolve(process.cwd(), 'src/components/*'),
'containers/*': path.resolve(process.cwd(), 'src/containers/*'),
'images/*': path.resolve(process.cwd(), 'src/images/*'),
'hooks/*': path.resolve(process.cwd(), 'src/hooks/*'),
},
}
tsconfig.json tsconfig.json
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"components": ["components"],
"containers": ["containers"],
"images": ["images"],
"hooks": ["hooks"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"]
folder structure:文件夹结构:
- src
- components
- Alert
- index.tsx
- containers
- App
- index.tsx
You will have to set the baseUrl
option as relative to the paths you are aliasing, so if you have alias path set to ./src/components
then the baseUrl
of that path is ./
.您必须将
baseUrl
选项设置为相对于您要别名的路径,因此如果您将别名路径设置为./src/components
那么该路径的baseUrl
是./
。
Here is an example:这是一个例子:
"baseUrl": "./",
"paths": {
"@components/*": [
"./src/components/*"
],
or或者
"baseUrl": "./src",
"paths": {
"@components/*": [
"components/*"
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.