Zoeken op website

javascript - Typescript-alias import met automatisch aanvullen

===== 2021/03/17 Update =====

Als iemand nog steeds hetzelfde probleem heeft. Je kunt dit proberen:

webpack.config.js

module.exports = {
  ...

  resolve: {
    alias: {
      components: path.resolve(process.cwd(), './src/components'),
    },
  },
};

tsconfig.json

{
  ...

  "baseUrl": ".",
  "path": {
    "components/*": ["./src/components/*"]
  }
}

===== Oorspronkelijke bericht =====

Ik heb hieronder een Alert React-component:

  import React from 'react';
  
  interface Props {
    message: string;
  };

  const Alert = (props: Props) => {
    return (
      <div>{props.message}</div>
    );
  };

  export default Alert;

Ik gebruik de alias import in plaats van de 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;

Als ik "<Alert me" typ in relatieve import, zal VSCode de opties voor automatisch aanvullen tonen.

Echter, wanneer ik de alias import gebruik, zal VSCode de auto-aanvulling niet tonen.

Is er een mogelijke manier om VSCode te laten weten dat 'components/Alert' '../../components/Alert' is, en mij de auto-complete te laten zien zodat ik de interface van de props van Alert kan begrijpen?

Hier is hoe ik de alias instel, ik had zowel webpack-configuratie als tsconfig geprobeerd:

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

  "compilerOptions": {
    ...

    "baseUrl": "src",
    "paths": {
      "components": ["components"],
      "containers": ["containers"],
      "images": ["images"],
      "hooks": ["hooks"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]

mappenstructuur:

  - src
    - components
      - Alert
        - index.tsx
    - containers
      - App
        - index.tsx

Antwoord #1

Je moet de optie baseUrl instellen als relatief ten opzichte van de paden die je alias gebruikt, dus als je een aliaspad hebt ingesteld op ./src/components, dan is de baseUrl van dat pad ./.

Hier is een voorbeeld:

    "baseUrl": "./",
    "paths": {
      "@components/*": [
        "./src/components/*"
      ],

of

    "baseUrl": "./src",
    "paths": {
      "@components/*": [
        "components/*"
      ],

Gerelateerde artikelen