TypeScript:如何向根目录添加一个绝对路径以从那里导入文件

Question

我有我的TS配置：

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": false,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.js"],
"exclude": ["node_modules", ".next", "out", "build", "coverage"]

我想在根目录中引用我的一个组件的TS文件，这样它就更干净了：

import React from 'react';
import { withTranslation, Link } from '../../../i18n';
const Header = (): JSX.Element => {
return (
<>
<Flex>
<Box>
<Link href="/">HOME</Link>
</Box>
</Flex>
</>
);
};
export default Header;

如何更新tsconfig以绝对引用i18n？

Answer 1

假设i18n文件夹在根目录中，则可以在tsconfig中使用paths属性。

更多信息点击这里

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"i18n": ["i18n"]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": false,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.js"],
"exclude": ["node_modules", ".next", "out", "build", "coverage"]
}

import React from 'react';
import { withTranslation, Link } from 'i18n';
const Header = (): JSX.Element => {
return (
<>
<Flex>
<Box>
<Link href="/">HOME</Link>
</Box>
</Flex>
</>
);
};
export default Header;