typescript - 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文件夹位于根目录中，您可以使用paths.tsconfig

更多信息在这里

{
  "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;