typescript @ alias bug All In One

[xgqfrms]

typescript @ alias bug All In One

Cannot find module '@/components/' or its corresponding type declarations.ts

[xgqfrms]

tsconfig.json alias @

webapck alias @

https://github.com/vuejs/vetur/issues/1896#issuecomment-626148690

https://segmentfault.com/a/1190000022665283

https://zhuanlan.zhihu.com/p/298189197

[xgqfrms]

webapck alias

    resolve: {
        extensions: ['.js', '.jsx', '.tsx', '.ts', ],
        alias: {
            '@': path.join(__dirname, './src')
        }
    },

webstrom alias

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src')
        }
    },
};

[xgqfrms]

jsconfig alias

{
    // This file is required for VSCode to understand webpack aliases
    "compilerOptions": {
        // This must be specified if "paths" is set
        "baseUrl": ".",
        // Relative to "baseUrl"
        "paths": {
            "@/*": ["./src/*"],
        }
    }
}

tsconfig alias

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react",
    "outDir": "./dist/",
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"],
    },
  },
  "include": [
    "./src/**/*",
  ]
}

[xgqfrms]

still not work ❌

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react",
    "outDir": "./dist/",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
    },
  },
  "include": [
    "./src/**/*",
  ]
}

[xgqfrms]

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

https://github.com/tsconfig/bases/issues/79

[xgqfrms]

https://www.typescriptlang.org/tsconfig#paths

https://json.schemastore.org/tsconfig