'After installing TypeScript, why does "Peek Definition" in Visual Studio Code stop working?

I'm very new to TypeScript and am trying to figure why, when transitioning a project to TypeScript in Visual Studio Code, "Peek Definition" stops working.

Before transitioning to TypeScript, I'm using jsconfig.json to set up Webpack aliases. After adding TypeScript, I'm using tsconfig.json to do the same thing, with additional configuration options I don't fully understand yet.

Without TypeScript, when hovering over a component, I'll see something like,

(alias) module ComponentWrapper
(alias) const ComponentWrapper: {
    ({ children }: {
        children: any;
    }): JSX.Element;
    displayName: string;
    propTypes: {
        something: PropTypes.Requireable<string>;
    };
    defaultProps: {};
}
import ComponentWrapper

And CMD + click will take me to that file. However, in the TypeScript project, doing the same thing, when hovering I see

import ComponentWrapper

And CMD + click just takes me to the top of the file to the import statement.

My jsconfig.json looks like

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@modules/*": ["src/modules/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

While my tsconfig.json looks like

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@modules/*": ["src/modules/*"],
      "@utils/*": ["src/utils/*"]
    },
    "allowJs": true,
    "checkJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "es2017"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveConstEnums": true,
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
    "target": "ES2019",
    "incremental": true
  },
  "exclude": [".github", ".next", "node_modules", "public"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

What am I getting wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source