问题描述

问题

我有一个对 React 组件使用类型检查 (React-Typescript) 的项目

到目前为止，我已经配置了所有内容及其工作，除了 Typescript 中的别名。

在 webpack 中，module.alias 对象允许您查找 webpack 模块解析的特定文件夹

const path = require('path');
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",entry: "./src/ts/app.tsx",plugins: [
        new HTMLWebpackPlugin({
            title: 'Pedro Uzcátegui',template: "./dist/index.html"
        }),],output: {
        path: path.resolve(__dirname,"dist"),filename: "bundle.js",publicPath: "/"
    },module: {
        rules: [
            {
                test: /\.(js|jsx)$/,exclude: /(node_modules|bower_components)/,use: {
                    loader: 'babel-loader',options: {
                        presets: ['@babel/preset-env','@babel/preset-react'] // ES5+ -> Old .Js | Tells babel we are using react
                    }
                }
            },{
                test: /\.(s[ac]ss|css)$/i,use: ['style-loader','css-loader','sass-loader']
            },{
                test: /\.tsx$/,exclude: /  node_modules/,loader: "ts-loader"
            },{
                test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',},{
                test: /\.(woff|woff2|eot|ttf|otf)$/i,]
    },resolve: {
        extensions: ['.ts','.js','.tsx','.jsx','.json'],// Importante,busca archivos por estos nombres al resolver modulos.
        modules: ['node_modules',path.resolve(__dirname,'src/ts/')],alias: {
            Components: 'Components/',Utils: 'Components/Utils/',Types: path.resolve(__dirname,'custom.d.ts'),Styles: path.resolve(__dirname,"src/sass"),Assets: path.resolve(__dirname,'src/assets/')
        },devtool: "inline-source-map",devServer: {
        contentBase: path.join(__dirname,'dist'),// Serve files from this directory
        compress: true,port: 3000
    },}

所以，问题是它运行良好，它看起来像组件，并且构建时没有任何错误。

但是在 VSC 中....

Cannot find module 'Components/Menu/Menu' or its corresponding type declarations.

这是我的 tsconfig.json 文件

{
  "compilerOptions": {
    "target": "es6","module": "commonjs","jsx": "react","sourceMap": true,"outDir": "server/js/","strict": true,"noImplicitAny": true,"moduleResolution": "node","baseUrl": "src/","paths": {
      "Components": ["ts/Components"],"Utils": ["ts/Components/Utils/"],"Types":["ts/custom.d.ts"],"Styles":["sass/"],"Assets":["assets/"]
    },"allowSyntheticDefaultImports": true,"esModuleInterop": true,"include": [
    "server/ts/*","src/ts/**/*","src/ts/custom.d.ts"
  ],"exclude": [
    "node_modules",]
}

和我的文件夹结构

注意：项目没有崩溃，运行良好，但似乎 Typescript 找不到模块。

也许这与 Typescript 模块解析或我没有考虑的事情有关？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs reactjs reactjs tsx typescript typescript typescript webpack webpack webpack

Webpack 别名工作，但 Typescript 给我错误

问题描述

问题

解决方法